[V0_FILE]typescriptreact:file="app-icons.tsx" isEdit="true" isMerged="true" "use client" import { useState } from "react" import { motion, AnimatePresence } from "framer-motion" import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area" import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip" interface AppIcon { name: string icon: JSX.Element } const apps: AppIcon[] = [ { name: "Finder", icon: ( ), }, { name: "Safari", icon: ( ), }, { name: "Siri", icon: ( ), }, { name: "Messages", icon: ( ), }, { name: "Mail", icon: ( ), }, ] export default function AppIcons() { return (

{apps.map((app, index) => ( {app.icon}

{app.name}

))}

) } [V0_FILE]typescriptreact:file="page.tsx" isEdit="true" isMerged="true" import AppIcons from "./app-icons" export default function Page() { return (

) } [V0_FILE]css:file="app/globals.css" isEdit="true" isMerged="true" @tailwind base; @tailwind components; @tailwind utilities; :root { --app-bg-light: #ffffff; --app-bg-dark: #262626; --icon-bg-light: #f5f5f5; --icon-bg-dark: #404040; --icon-border-light: #e5e5e5; --icon-border-dark: #525252; } body { background-color: var(--app-bg-light); } .dark body { background-color: var(--app-bg-dark); } /* Custom scrollbar styles */ .scrollbar-hide::-webkit-scrollbar { display: none; } .scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; } /* Smooth scrolling for the entire page */ html { scroll-behavior: smooth; } @keyframes rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes flip { from { transform: rotateY(0deg); } to { transform: rotateY(360deg); } } .animate-rotate { animation: rotate 6s linear infinite; } .animate-flip { animation: flip 6s linear infinite; } .mask-gradient { mask-image: linear-gradient(black, transparent 50%); } @media (prefers-color-scheme: dark) { .mask-gradient { mask-image: linear-gradient(white, transparent 50%); } } [V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isMerged="true" "use client" import { useState } from "react" import AppIcons from "@/components/app-icons" import { Button } from "@/components/ui/button" import { Moon, Sun } from "lucide-react" export default function Home() { const [isDarkMode, setIsDarkMode] = useState(false) const toggleDarkMode = () => { setIsDarkMode(!isDarkMode) document.documentElement.classList.toggle("dark") } return (

) } [V0_FILE]typescriptreact:file="app/layout.tsx" isMerged="true" import "./globals.css" import type { Metadata } from "next" import { Inter } from "next/font/google" const inter = Inter({ subsets: ["latin"] }) export const metadata: Metadata = { title: "Apple-style Icon Interface", description: "A smooth, interactive icon interface inspired by Apple designs", } export default function RootLayout({ children, }: { children: React.ReactNode }) { return ( {children} ) } [V0_FILE]typescriptreact:file="components/ui/tooltip.tsx" isEdit="true" "use client" import * as React from "react" import * as TooltipPrimitive from "@radix-ui/react-tooltip" import { cn } from "@/lib/utils" const TooltipProvider = TooltipPrimitive.Provider const Tooltip = TooltipPrimitive.Root const TooltipTrigger = TooltipPrimitive.Trigger const TooltipContent = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, sideOffset = 4, ...props }, ref) => ( )) TooltipContent.displayName = TooltipPrimitive.Content.displayName export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider } [V0_FILE]typescriptreact:file="components/app-icons.tsx" isEdit="true" "use client" import { useState } from "react" import { motion, AnimatePresence } from "framer-motion" import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area" import { cn } from "@/lib/utils" import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip" interface AppIcon { name: string icon: JSX.Element } const apps: AppIcon[] = [ { name: "Finder", icon: ( ), }, { name: "Safari", icon: ( ), }, { name: "Siri", icon: ( ), }, { name: "Messages", icon: ( ), }, { name: "Mail", icon: ( ), }, ] export default function AppIcons() { const [hoveredIdx, setHoveredIdx] = useState(null) return (

{apps.map((app, index) => ( setHoveredIdx(index)} onHoverEnd={() => setHoveredIdx(null)} animate={{ scale: hoveredIdx === index ? 1.4 : hoveredIdx === index - 1 || hoveredIdx === index + 1 ? 1.25 : 1, }} transition={{ type: "spring", stiffness: 400, damping: 30, mass: 0.8, duration: 0.3, }} > {app.icon} {hoveredIdx === index && ( )} {app.name} ))}

) }

About

About