[V0_FILE]typescriptreact:file="components/base-tile.tsx" isFixed="true" isEdit="true" isQuickEdit="true" import type { ReactNode } from "react" import { cn } from "@/lib/utils" interface BaseTileProps { className?: string children: ReactNode size?: "small" | "medium" | "large" | "hero" } export function BaseTile({ className, children, size = "small" }: BaseTileProps) { return (

{children}

) } [V0_FILE]typescriptreact:file="components/spec-tile.tsx" isEdit="true" import { BaseTile } from "./base-tile" import { cn } from "@/lib/utils" interface SpecTileProps { title: string subtitle: string color?: string className?: string } export function SpecTile({ title, subtitle, color = "text-blue-500", className }: SpecTileProps) { return (

Up to

{title}

{subtitle}

) } [V0_FILE]typescriptreact:file="components/feature-tile.tsx" isFixed="true" isQuickEdit="true" isMerged="true" isEdit="true" import type React from "react" import type { LucideIcon } from "lucide-react" interface FeatureTileProps { icon: LucideIcon title: string size?: "small" | "medium" } interface BaseTileProps { size?: "small" | "medium" children: React.ReactNode } function BaseTile({ size = "small", children }: BaseTileProps) { let paddingClass = "p-4" if (size === "small") { paddingClass = "p-4" } else if (size === "medium") { paddingClass = "p-6" } return (

{children}

) } export function FeatureTile({ icon: Icon, title, size = "small" }: FeatureTileProps) { return (

{title}

) } [V0_FILE]typescriptreact:file="components/hero-tile.tsx" isEdit="true" isMerged="true" import { BaseTile } from "./base-tile" interface HeroTileProps { image: string alt: string className?: string } export function HeroTile({ image, alt, className }: HeroTileProps) { return ( {alt}

) } [V0_FILE]typescriptreact:file="components/feature-grid.tsx" isEdit="true" import { Lock } from "lucide-react" import { BaseTile } from "./base-tile" import { SpecTile } from "./spec-tile" import { HeroTile } from "./hero-tile" import { ImageTile } from "./image-tile" export function FeatureGrid() { return (

{/* First Column */}

macOS Big Sur

{/* Second Column (Center) */}

Silent design

{/* Third Column */}

Secure Enclave

) } [V0_FILE]typescriptreact:file="page.tsx" isEdit="true" isMerged="true" import { ThemeProvider } from "./components/theme-provider" import { ThemeToggle } from "./components/theme-toggle" import { FeatureGrid } from "./components/feature-grid" export default function Page() { return (

MacBook Air

) } [V0_FILE]typescriptreact:file="components/theme-toggle.tsx" isMerged="true" isEdit="true" "use client" import { Moon, Sun } from "lucide-react" import { Button } from "@/components/ui/button" import { useTheme } from "./theme-provider" export function ThemeToggle() { const { theme, setTheme } = useTheme() return ( ) } [V0_FILE]typescriptreact:file="components/theme-provider.tsx" isMerged="true" isEdit="true" "use client" import type React from "react" import { createContext, useContext, useEffect, useState } from "react" type Theme = "dark" | "light" type ThemeProviderProps = { children: React.ReactNode defaultTheme?: Theme } type ThemeProviderState = { theme: Theme setTheme: (theme: Theme) => void } const initialState: ThemeProviderState = { theme: "light", setTheme: () => null, } const ThemeProviderContext = createContext(initialState) export function ThemeProvider({ children, defaultTheme = "light" }: ThemeProviderProps) { const [theme, setTheme] = useState(defaultTheme) useEffect(() => { const root = window.document.documentElement root.classList.remove("light", "dark") root.classList.add(theme) }, [theme]) return {children} } export const useTheme = () => { const context = useContext(ThemeProviderContext) if (context === undefined) throw new Error("useTheme must be used within a ThemeProvider") return context } [V0_FILE]typescriptreact:file="styles/globals.css" isMerged="true" isEdit="true" @tailwind base; @tailwind components; @tailwind utilities; @layer base { :root { --background: 0 0% 100%; --foreground: 240 10% 3.9%; --card: 0 0% 100%; --card-foreground: 240 10% 3.9%; --popover: 0 0% 100%; --popover-foreground: 240 10% 3.9%; --primary: 240 5.9% 10%; --primary-foreground: 0 0% 98%; --secondary: 240 4.8% 95.9%; --secondary-foreground: 240 5.9% 10%; --muted: 240 4.8% 95.9%; --muted-foreground: 240 3.8% 46.1%; --accent: 240 4.8% 95.9%; --accent-foreground: 240 5.9% 10%; --destructive: 0 84.2% 60.2%; --destructive-foreground: 0 0% 98%; --border: 240 5.9% 90%; --input: 240 5.9% 90%; --ring: 240 10% 3.9%; --radius: 0.75rem; } .dark { --background: 240 10% 3.9%; --foreground: 0 0% 98%; --card: 240 10% 3.9%; --card-foreground: 0 0% 98%; --popover: 240 10% 3.9%; --popover-foreground: 0 0% 98%; --primary: 0 0% 98%; --primary-foreground: 240 5.9% 10%; --secondary: 240 3.7% 15.9%; --secondary-foreground: 0 0% 98%; --muted: 240 3.7% 15.9%; --muted-foreground: 240 5% 64.9%; --accent: 240 3.7% 15.9%; --accent-foreground: 0 0% 98%; --destructive: 0 62.8% 30.6%; --destructive-foreground: 0 0% 98%; --border: 240 3.7% 15.9%; --input: 240 3.7% 15.9%; --ring: 240 4.9% 83.9%; } } @layer base { * { @apply border-border; } body { @apply bg-background text-foreground; } } /* Smooth theme transitions */ * { transition: background-color 0.3s ease, border-color 0.3s ease; } [V0_FILE]typescriptreact:file="components/image-tile.tsx" isEdit="true" import { BaseTile } from "./base-tile" interface ImageTileProps { image: string alt: string title: string className?: string } export function ImageTile({ image, alt, title, className }: ImageTileProps) { return (

{title}

) }

About

Tags

Share

About

Tags

Share

More Templates Like This

About

Tags

Share

About

Tags

Share

More Templates Like This