[V0_FILE]typescriptreact:file="components/app-sidebar.tsx" isEdit="true" "use client" import type * as React from "react" import { Album, Bell, Clock, FolderHeart, Image, MapPin, Star, Users, Video } from 'lucide-react' import { Progress } from "@/components/ui/progress" import { Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupContent, SidebarGroupLabel, SidebarMenu, SidebarMenuButton, SidebarMenuItem, } from "@/components/ui/sidebar" import { cn } from "@/lib/utils" const navigation = { main: [ { name: "Photos", icon: Image, href: "#" }, { name: "Updates", icon: Bell, href: "#", badge: "3" }, ], collections: [ { name: "Albums", icon: Album, href: "#" }, { name: "Favorites", icon: Star, href: "#" }, { name: "People", icon: Users, href: "#" }, { name: "Places", icon: MapPin, href: "#" }, { name: "Videos", icon: Video, href: "#" }, ], utility: [ { name: "Recently added", icon: Clock, href: "#" }, { name: "Archive", icon: FolderHeart, href: "#" }, ], } export function AppSidebar({ className }: React.ComponentProps) { const storageUsed = 11.7 const storageTotal = 15 const storagePercentage = (storageUsed / storageTotal) * 100 return (

{navigation.main.map((item) => ( {item.name} {item.badge && ( {item.badge} )} ))} Collections {navigation.collections.map((item) => ( {item.name} ))} {navigation.utility.map((item) => ( {item.name} ))}

Storage {storageUsed} GB of {storageTotal} GB used

) } [V0_FILE]typescriptreact:file="components/photo-grid.tsx" isEdit="true" "use client" import * as React from "react" import { format } from "date-fns" import Masonry from "react-masonry-css" import { cn } from "@/lib/utils" import { PhotoPreview } from "@/components/photo-preview" interface Photo { id: string src: string date: Date aspectRatio: number } interface PhotoGridProps { photos: Photo[] className?: string } export function PhotoGrid({ photos, className }: PhotoGridProps) { const photosByMonth = React.useMemo(() => { const grouped = photos.reduce( (acc, photo) => { const monthKey = format(photo.date, "MMMM yyyy") if (!acc[monthKey]) { acc[monthKey] = [] } acc[monthKey].push(photo) return acc }, {} as Record, ) return Object.entries(grouped).sort(([a], [b]) => { return new Date(b).getTime() - new Date(a).getTime() }) }, [photos]) return (

{photosByMonth.map(([month, photos]) => (

{month}

{photos.map((photo) => ( ))}

))}

) } [V0_FILE]typescriptreact:file="components/site-header.tsx" isEdit="true" "use client"; import Image from "next/image"; import { HelpCircle, Menu, Moon, Plus, Search, Settings, Sun, } from "lucide-react"; import { useTheme } from "next-themes"; import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"; import { Button } from "@/components/ui/button"; import { Input } from "@/components/ui/input"; import { Separator } from "@/components/ui/separator"; import { useSidebar } from "@/components/ui/sidebar"; export function SiteHeader() { const { theme, setTheme } = useTheme(); const { toggleSidebar } = useSidebar(); return (

Photos

); } [V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" "use client"; import { AppSidebar } from "@/components/app-sidebar"; import { PhotoGrid } from "@/components/photo-grid"; import { SiteHeader } from "@/components/site-header"; import { SidebarInset, SidebarProvider } from "@/components/ui/sidebar"; // Sample photo data import { photos } from "@/lib/sample-data"; export default function Page() { return (

); } [V0_FILE]typescriptreact:file="components/photo-carousel.tsx" isEdit="true" isMerged="true" "use client" import * as React from "react" import Image from "next/image" import useEmblaCarousel from "embla-carousel-react" import { ChevronLeft, ChevronRight } from "lucide-react" import { Button } from "@/components/ui/button" import { cn } from "@/lib/utils" interface Photo { id: string src: string aspectRatio: number } interface PhotoCarouselProps { photos: Photo[] className?: string } export function PhotoCarousel({ photos, className }: PhotoCarouselProps) { const [emblaRef, emblaApi] = useEmblaCarousel() const scrollPrev = React.useCallback(() => { if (emblaApi) emblaApi.scrollPrev() }, [emblaApi]) const scrollNext = React.useCallback(() => { if (emblaApi) emblaApi.scrollNext() }, [emblaApi]) return (

{photos.map((photo) => (

))}

) } [V0_FILE]typescript:file="lib/sample-data.ts" isMerged="true" export const photos = [ { id: "1", src: "https://images.unsplash.com/photo-1682687220198-88e9bdea9931?w=800&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDF8MHxlZGl0b3JpYWwtZmVlZHwxfHx8ZW58MHx8fHx8", date: new Date("2024-03-29"), aspectRatio: 1.5, }, { id: "2", src: "https://images.unsplash.com/photo-1682687982501-1e58ab814714?w=800&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDF8MHxlZGl0b3JpYWwtZmVlZHw2fHx8ZW58MHx8fHx8", date: new Date("2024-05-23"), aspectRatio: 1, }, { id: "3", src: "https://images.unsplash.com/photo-1706463629335-d92264bbfd6f?w=800&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwxNHx8fGVufDB8fHx8fA%3D%3D", date: new Date("2024-01-23"), aspectRatio: 0.67, }, { id: "4", src: "https://images.unsplash.com/photo-1682687220742-aba13b6e50ba?w=800&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDF8MHxlZGl0b3JpYWwtZmVlZHwyNnx8fGVufDB8fHx8fA%3D%3D", date: new Date("2024-04-15"), aspectRatio: 1.5, }, { id: "6", src: "https://images.unsplash.com/photo-1682695796497-31a44224d6d6?w=800&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDF8MHxlZGl0b3JpYWwtZmVlZHw0MXx8fGVufDB8fHx8fA%3D%3D", date: new Date("2023-12-25"), aspectRatio: 1.5, }, { id: "7", src: "https://images.unsplash.com/photo-1519681393784-d120267933ba?w=800&auto=format&fit=crop&q=60", date: new Date("2024-01-23"), aspectRatio: 1, }, { id: "8", src: "https://images.unsplash.com/photo-1542273917363-3b1817f69a2d?w=800&auto=format&fit=crop&q=60", date: new Date("2024-03-10"), aspectRatio: 1.25, }, { id: "9", src: "https://images.unsplash.com/photo-1470770841072-f978cf4d019e?w=800&auto=format&fit=crop&q=60", date: new Date("2023-12-30"), aspectRatio: 1.1, }, { id: "10", src: "https://images.unsplash.com/photo-1495195134817-aeb325a55b65?w=800&auto=format&fit=crop&q=60", date: new Date("2023-11-15"), aspectRatio: 0.8, }, { id: "11", src: "https://images.unsplash.com/photo-1556740738-b6a63e27c4df?w=800&auto=format&fit=crop&q=60", date: new Date("2024-01-03"), aspectRatio: 1, }, { id: "12", src: "https://images.unsplash.com/photo-1481349518771-20055b2a7b24?w=800&auto=format&fit=crop&q=60", date: new Date("2023-12-15"), aspectRatio: 1.3, }, { id: "13", src: "https://images.unsplash.com/photo-1481277542470-605612bd2d61?w=800&auto=format&fit=crop&q=60", date: new Date("2024-02-11"), aspectRatio: 1.4, }, ]; [V0_FILE]css:file="app/globals.css" isMoved="true" isMerged="true" @tailwind base; @tailwind components; @tailwind utilities; :root { --background: 0 0% 100%; --foreground: 222.2 84% 4.9%; --card: 0 0% 100%; --card-foreground: 222.2 84% 4.9%; --popover: 0 0% 100%; --popover-foreground: 222.2 84% 4.9%; --primary: 221.2 83.2% 53.3%; --primary-foreground: 210 40% 98%; --secondary: 210 40% 96.1%; --secondary-foreground: 222.2 47.4% 11.2%; --muted: 210 40% 96.1%; --muted-foreground: 215.4 16.3% 46.9%; --accent: 210 40% 96.1%; --accent-foreground: 222.2 47.4% 11.2%; --destructive: 0 84.2% 60.2%; --destructive-foreground: 210 40% 98%; --border: 214.3 31.8% 91.4%; --input: 214.3 31.8% 91.4%; --ring: 221.2 83.2% 53.3%; --radius: 0.5rem; } .dark { --background: 222.2 84% 4.9%; --foreground: 210 40% 98%; --card: 222.2 84% 4.9%; --card-foreground: 210 40% 98%; --popover: 222.2 84% 4.9%; --popover-foreground: 210 40% 98%; --primary: 217.2 91.2% 59.8%; --primary-foreground: 222.2 47.4% 11.2%; --secondary: 217.2 32.6% 17.5%; --secondary-foreground: 210 40% 98%; --muted: 217.2 32.6% 17.5%; --muted-foreground: 215 20.2% 65.1%; --accent: 217.2 32.6% 17.5%; --accent-foreground: 210 40% 98%; --destructive: 0 62.8% 30.6%; --destructive-foreground: 210 40% 98%; --border: 217.2 32.6% 17.5%; --input: 217.2 32.6% 17.5%; --ring: 224.3 76.3% 48%; } @layer base { * { @apply border-border; } body { @apply bg-background text-foreground; } } /* Custom scrollbar */ ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: hsl(var(--secondary)); border-radius: 4px; } ::-webkit-scrollbar-thumb { background: hsl(var(--muted-foreground)); border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: hsl(var(--primary)); } [V0_FILE]javascript:file="tailwind.config.ts" isMerged="true" isMoved="true" /** @type {import('tailwindcss').Config} */ module.exports = { darkMode: ["class"], content: [ './pages/**/*.{js,ts,jsx,tsx,mdx}', './components/**/*.{js,ts,jsx,tsx,mdx}', './app/**/*.{js,ts,jsx,tsx,mdx}', ], theme: { container: { center: true, padding: "2rem", screens: { "2xl": "1400px", }, }, extend: { colors: { border: "hsl(var(--border))", input: "hsl(var(--input))", ring: "hsl(var(--ring))", background: "hsl(var(--background))", foreground: "hsl(var(--foreground))", primary: { DEFAULT: "hsl(var(--primary))", foreground: "hsl(var(--primary-foreground))", }, secondary: { DEFAULT: "hsl(var(--secondary))", foreground: "hsl(var(--secondary-foreground))", }, destructive: { DEFAULT: "hsl(var(--destructive))", foreground: "hsl(var(--destructive-foreground))", }, muted: { DEFAULT: "hsl(var(--muted))", foreground: "hsl(var(--muted-foreground))", }, accent: { DEFAULT: "hsl(var(--accent))", foreground: "hsl(var(--accent-foreground))", }, popover: { DEFAULT: "hsl(var(--popover))", foreground: "hsl(var(--popover-foreground))", }, card: { DEFAULT: "hsl(var(--card))", foreground: "hsl(var(--card-foreground))", }, }, borderRadius: { lg: "var(--radius)", md: "calc(var(--radius) - 2px)", sm: "calc(var(--radius) - 4px)", }, }, }, plugins: [], } [V0_FILE]typescriptreact:file="components/ThemeProvider.tsx" isMerged="true" "use client"; import * as React from "react"; import { ThemeProvider as NextThemesProvider } from "next-themes"; import { type ThemeProviderProps } from "next-themes"; export function ThemeProvider({ children, ...props }: ThemeProviderProps) { return {children}; } [V0_FILE]typescriptreact:file="app/layout.tsx" isMerged="true" import type { Metadata } from 'next' import { Inter } from 'next/font/google' import './globals.css' import { ThemeProvider } from '@/components/ThemeProvider' import React from 'react'; // Added import for React const inter = Inter({ subsets: ['latin'] }) export const metadata: Metadata = { title: 'Google Photos Clone', description: 'A Google Photos clone built with Next.js and Tailwind CSS', } export default function RootLayout({ children, }: { children: React.ReactNode }) { return ( {children} ) } [V0_FILE]typescriptreact:file="components/photo-preview.tsx" "use client" import Image from "next/image" import { X } from "lucide-react" import { Dialog, DialogContent, DialogTrigger } from "@/components/ui/dialog" import { Button } from "@/components/ui/button" import { cn } from "@/lib/utils" interface Photo { id: string src: string date: Date aspectRatio: number } interface PhotoPreviewProps { photo: Photo className?: string } export function PhotoPreview({ photo, className }: PhotoPreviewProps) { return ( ) }

About

Tags

Share

More from shaam

More Templates Like This

About

Tags

Share

About

Tags

Share

More from shaam

More Templates Like This