[V0_FILE]typescript:file="utils/debounce.ts" isEdit="true" isMerged="true" export function debounce any>( func: T, wait: number ): (...args: Parameters) => void { let timeout: NodeJS.Timeout | null = null; return (...args: Parameters) => { if (timeout) clearTimeout(timeout); timeout = setTimeout(() => func(...args), wait); }; } [V0_FILE]typescriptreact:file="art-search.tsx" entry="true" isMerged="true" "use client" import { useState, useCallback, useEffect } from 'react' import useSWR from 'swr' import { debounce } from './utils/debounce' import { Input } from "@/components/ui/input" import { Card, CardContent } from "@/components/ui/card" import { Skeleton } from "@/components/ui/skeleton" const API_URL = 'https://api.artic.edu/api/v1/artworks/search' const fetcher = (url: string) => fetch(url).then((res) => res.json()) export default function ArtSearch() { const [searchTerm, setSearchTerm] = useState('') const [debouncedSearchTerm, setDebouncedSearchTerm] = useState('') const { data, error, isLoading } = useSWR( debouncedSearchTerm ? `${API_URL}?q=${encodeURIComponent(debouncedSearchTerm)}&limit=20&fields=id,title,image_id,artist_display` : null, fetcher ) const debouncedSetSearch = useCallback( debounce((value: string) => setDebouncedSearchTerm(value), 300), [] ) useEffect(() => { debouncedSetSearch(searchTerm) }, [searchTerm, debouncedSetSearch]) const handleSearchChange = (e: React.ChangeEvent) => { setSearchTerm(e.target.value) } return (

Art Institute of Chicago Collection

{error &&

Failed to load results

}

{isLoading ? Array(6).fill(0).map((_, i) => ( )) : data?.data.map((artwork: any) => (

{artwork.title}

{artwork.artist_display}

))}

{data?.data.length === 0 && (

No results found. Try a different search term.

)}

) } [V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isMerged="true" import { Suspense } from 'react' import ArtSearch from '../components/art-search' import ArtworkCarousel from '../components/artwork-carousel' import { ArtworkProvider } from '../contexts/ArtworkContext' import { getRandomArtworks } from '../lib/api' export default async function Home() { const randomArtworks = await getRandomArtworks(5) return (

Ary's Art Institute

Explore artwork from the Art Institute of Chicago's wide-ranging collection—from world-renowned icons to lesser-known gems from every corner of the globe.

) } [V0_FILE]typescript:file="lib/api.ts" isEdit="true" isMerged="true" const API_URL = 'https://api.artic.edu/api/v1/artworks' export async function getRandomArtworks(count: number) { const response = await fetch(`${API_URL}?limit=100&fields=id,title,image_id,artist_display`) const data = await response.json() return data.data .filter((artwork: any) => artwork.image_id) // Ensure we only get artworks with images .sort(() => 0.5 - Math.random()) .slice(0, count) } export async function searchArtworks(query: string) { const response = await fetch(`${API_URL}/search?q=${encodeURIComponent(query)}&limit=20&fields=id,title,image_id,artist_display`) return response.json() } export function getArtworkImageUrl(imageId: string) { return `https://www.artic.edu/iiif/2/${imageId}/full/843,/0/default.jpg` } [V0_FILE]typescriptreact:file="components/art-search.tsx" isEdit="true" isMerged="true" "use client" import { useState, useCallback } from 'react' import useSWR from 'swr' import { debounce } from '../utils/debounce' import { searchArtworks, getArtworkImageUrl } from '../lib/api' import { Input } from "@/components/ui/input" import { Card, CardContent } from "@/components/ui/card" import { Skeleton } from "@/components/ui/skeleton" import { useArtwork } from '../contexts/ArtworkContext' import { Search } from 'lucide-react' import ArtworkCarousel from './artwork-carousel' export default function ArtSearch() { const [searchTerm, setSearchTerm] = useState('') const [debouncedSearchTerm, setDebouncedSearchTerm] = useState('') const { randomArtworks, currentIndex } = useArtwork() const { data, error, isLoading } = useSWR( debouncedSearchTerm ? debouncedSearchTerm : null, searchArtworks ) const debouncedSetSearch = useCallback( debounce((value: string) => setDebouncedSearchTerm(value), 300), [] ) const handleSearchChange = (e: React.ChangeEvent) => { setSearchTerm(e.target.value) debouncedSetSearch(e.target.value) } const isSearchActive = searchTerm.length > 0 || debouncedSearchTerm.length > 0 return ( <>

{error && (

Failed to load results

)} {isSearchActive && data?.data.length === 0 && (

No results found. Try a different search term.

)} {isSearchActive && (

{isLoading ? Array(6).fill(0).map((_, i) => ( )) : data?.data.map((artwork: any) => (

{artwork.title}

{artwork.artist_display}

))}

)}

{!isSearchActive && } ) } [V0_FILE]typescriptreact:file="contexts/ArtworkContext.tsx" isEdit="true" isMerged="true" "use client" import React, { createContext, useState, useContext, useEffect } from 'react' import { getRandomArtworks } from '../lib/api' interface Artwork { id: number title: string image_id: string artist_display: string } interface ArtworkContextType { randomArtworks: Artwork[] currentIndex: number setCurrentIndex: (index: number) => void } const ArtworkContext = createContext(undefined) export function ArtworkProvider({ children, initialArtworks }: { children: React.ReactNode, initialArtworks: Artwork[] }) { const [randomArtworks, setRandomArtworks] = useState(initialArtworks) const [currentIndex, setCurrentIndex] = useState(0) useEffect(() => { const interval = setInterval(() => { setCurrentIndex((prevIndex) => (prevIndex + 1) % randomArtworks.length) }, 10000) // Changed from 5000 to 10000 ms (10 seconds) return () => clearInterval(interval) }, [randomArtworks.length]) return ( {children} ) } export function useArtwork() { const context = useContext(ArtworkContext) if (context === undefined) { throw new Error('useArtwork must be used within an ArtworkProvider') } return context } [V0_FILE]typescriptreact:file="components/artwork-carousel.tsx" isEdit="true" "use client" import { useEffect, useState } from 'react' import { Card, CardContent } from "@/components/ui/card" import { Carousel, CarouselContent, CarouselItem } from "@/components/ui/carousel" import { getArtworkImageUrl } from '../lib/api' import { useArtwork } from '../contexts/ArtworkContext' import PixelatingImage from './PixelatingImage' export default function ArtworkCarousel() { const { randomArtworks, currentIndex } = useArtwork() const [activeIndex, setActiveIndex] = useState(currentIndex) const [key, setKey] = useState(0) useEffect(() => { setActiveIndex(currentIndex) setKey(prevKey => prevKey + 1) }, [currentIndex]) return ( {randomArtworks.map((artwork, index) => (

{artwork.title}

{artwork.artist_display}

))} ) } [V0_FILE]typescriptreact:file="components/PixelatingImage.tsx" isEdit="true" "use client" import React, { useEffect, useRef, useState } from 'react' interface PixelatingImageProps { src: string alt: string className?: string } const PixelatingImage: React.FC = ({ src, alt, className }) => { const canvasRef = useRef(null) const [isLoaded, setIsLoaded] = useState(false) useEffect(() => { const canvas = canvasRef.current if (!canvas) return const ctx = canvas.getContext('2d') if (!ctx) return let pixelSize = 40 let animationFrameId: number | null = null let startTime: number | null = null const duration = 2500 const img = new Image() img.crossOrigin = "anonymous" img.src = src const pixelate = (size: number) => { if (!ctx || !canvas) return const w = canvas.width const h = canvas.height ctx.drawImage(img, 0, 0, w, h) if (size > 1) { ctx.imageSmoothingEnabled = false ctx.drawImage(canvas, 0, 0, w, h, 0, 0, w / size, h / size) ctx.drawImage(canvas, 0, 0, w / size, h / size, 0, 0, w, h) } } const easeOutCubic = (t: number) => 1 - Math.pow(1 - t, 3) const smoothTransition = (timestamp: number) => { if (!startTime) startTime = timestamp const elapsed = timestamp - startTime const progress = Math.min(elapsed / duration, 1) const easedProgress = easeOutCubic(progress) pixelSize = 40 * (1 - easedProgress) + 1 * easedProgress pixelate(pixelSize) if (progress < 1) { animationFrameId = requestAnimationFrame(smoothTransition) } } const onLoad = () => { if (canvas) { canvas.width = img.width canvas.height = img.height setIsLoaded(true) startTime = null if (animationFrameId) cancelAnimationFrame(animationFrameId) animationFrameId = requestAnimationFrame(smoothTransition) } } img.onload = onLoad if (img.complete) { onLoad() } return () => { if (animationFrameId) cancelAnimationFrame(animationFrameId) } }, [src]) return

About

Tags

Share

About

Tags

Share

More from aryamank

More Templates Like This

About

Tags

Share

About

Tags

Share

More from aryamank

More Templates Like This