[V0_FILE]typescriptreact:file="components/ImageCanvas.tsx" isEdit="true" isMerged="true" "use client" import type React from "react" import { useState, useEffect, useRef, useCallback } from "react" import Image from "next/image" import { ZoomIn, ZoomOut } from "lucide-react" interface ImagePosition { id: string src: string x: number y: number } export function ImageCanvas() { const [isVisible, setIsVisible] = useState(false) const [opacity, setOpacity] = useState(0) const [images, setImages] = useState([]) const [zoom, setZoom] = useState(2) // Default zoom set to 200% const [panOffset, setPanOffset] = useState({ x: 0, y: 0 }) const fileInputRef = useRef(null) const canvasRef = useRef(null) const draggedImageRef = useRef(null) useEffect(() => { const handleScroll = () => { const mainContainer = document.getElementById("main-container") if (mainContainer) { const mainContainerRect = mainContainer.getBoundingClientRect() const scrollProgress = 1 - mainContainerRect.bottom / window.innerHeight if (scrollProgress > 0) { setIsVisible(true) setOpacity(Math.min(scrollProgress * 2, 1)) } else { setIsVisible(false) setOpacity(0) } } } window.addEventListener("scroll", handleScroll) return () => window.removeEventListener("scroll", handleScroll) }, []) const handleImageUpload = (event: React.ChangeEvent) => { const files = event.target.files if (files) { const newImages = Array.from(files).map((file) => ({ id: Math.random().toString(36).substr(2, 9), src: URL.createObjectURL(file), x: Math.random() * 100, y: Math.random() * 100, })) setImages((prevImages) => [...prevImages, ...newImages]) } } const triggerFileInput = () => { fileInputRef.current?.click() } const handleZoom = useCallback( (delta: number, clientX: number, clientY: number) => { setZoom((prevZoom) => { const newZoom = Math.max(0.5, Math.min(5, prevZoom + delta)) if (canvasRef.current) { const rect = canvasRef.current.getBoundingClientRect() const mouseX = clientX - rect.left const mouseY = clientY - rect.top const zoomPoint = { x: (mouseX - panOffset.x) / prevZoom, y: (mouseY - panOffset.y) / prevZoom, } const newPanOffset = { x: mouseX - zoomPoint.x * newZoom, y: mouseY - zoomPoint.y * newZoom, } setPanOffset(newPanOffset) } return newZoom }) }, [panOffset], ) const handleWheel = useCallback( (event: WheelEvent) => { event.preventDefault() const delta = event.deltaY * -0.001 handleZoom(delta, event.clientX, event.clientY) }, [handleZoom], ) useEffect(() => { const canvas = canvasRef.current if (canvas) { canvas.addEventListener("wheel", handleWheel, { passive: false }) } return () => { if (canvas) { canvas.removeEventListener("wheel", handleWheel) } } }, [handleWheel]) const handleMouseDown = (id: string) => (event: React.MouseEvent) => { draggedImageRef.current = id } const handleMouseMove = useCallback( (event: React.MouseEvent) => { if (draggedImageRef.current && canvasRef.current) { const canvasRect = canvasRef.current.getBoundingClientRect() const x = ((event.clientX - canvasRect.left - panOffset.x) / (canvasRect.width * zoom)) * 100 const y = ((event.clientY - canvasRect.top - panOffset.y) / (canvasRect.height * zoom)) * 100 setImages((prevImages) => prevImages.map((img) => (img.id === draggedImageRef.current ? { ...img, x, y } : img)), ) } }, [zoom, panOffset], ) const handleMouseUp = () => { draggedImageRef.current = null } const handleDoubleClick = useCallback( (image: ImagePosition) => (event: React.MouseEvent) => { event.preventDefault() if (canvasRef.current) { const rect = canvasRef.current.getBoundingClientRect() const targetZoom = 3 // Zoom level when double-clicking an image const newPanOffset = { x: rect.width / 2 - ((image.x * rect.width) / 100) * targetZoom, y: rect.height / 2 - ((image.y * rect.height) / 100) * targetZoom, } setZoom(targetZoom) setPanOffset(newPanOffset) } }, [], ) return (

{images.map((image) => (

))}

) } [V0_FILE]typescriptreact:file="components/AutoCarousel.tsx" isFixed="true" isQuickEdit="true" isEdit="true" isMerged="true" "use client" import type React from "react" import { useEffect, useState, useRef } from "react" import Image from "next/image" import { Card } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Plus } from "lucide-react" import useEmblaCarousel, { type EmblaOptionsType } from "embla-carousel-react" const initialImages = [ "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/CleanShot%202025-01-30%20at%2007.52.49@2x-zqF3XrkA8YEuxCPQcC8SBBsDUJVS9L.png", "/placeholder.svg?height=200&width=300", "/placeholder.svg?height=200&width=300", "/placeholder.svg?height=200&width=300", "/placeholder.svg?height=200&width=300", "/placeholder.svg?height=200&width=300", "/placeholder.svg?height=200&width=300", "/placeholder.svg?height=200&width=300", "/placeholder.svg?height=200&width=300", ] export function AutoCarousel() { const [isVisible, setIsVisible] = useState(false) const [opacity, setOpacity] = useState(0) const [images, setImages] = useState(initialImages) const fileInputRef = useRef(null) const options: EmblaOptionsType = { loop: true, align: "start", dragFree: true, containScroll: "trimSnaps", } const [emblaRef1] = useEmblaCarousel({ ...options, direction: "rtl", }) const [emblaRef2] = useEmblaCarousel(options) const [emblaRef3] = useEmblaCarousel({ ...options, direction: "rtl", }) useEffect(() => { const handleScroll = () => { const mainContainer = document.getElementById("main-container") if (mainContainer) { const mainContainerRect = mainContainer.getBoundingClientRect() const scrollProgress = 1 - mainContainerRect.bottom / window.innerHeight if (scrollProgress > 0) { setIsVisible(true) setOpacity(Math.min(scrollProgress * 2, 1)) } else { setIsVisible(false) setOpacity(0) } } } window.addEventListener("scroll", handleScroll) return () => window.removeEventListener("scroll", handleScroll) }, []) const handleImageUpload = (event: React.ChangeEvent) => { const files = event.target.files if (files) { const newImages = Array.from(files).map((file) => URL.createObjectURL(file)) setImages((prevImages) => [...prevImages, ...newImages]) } } const triggerFileInput = () => { fileInputRef.current?.click() } return (

{[emblaRef1, emblaRef2, emblaRef3].map((ref, rowIndex) => (

{images.map((image, index) => (

))}

) } [V0_FILE]typescriptreact:file="components/InfiniteSlideshow.tsx" isQuickEdit="true" isEdit="true" isMerged="true" "use client" import { useEffect, useState, useRef } from "react" import { Card } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Plus } from "lucide-react" import Image from "next/image" import React from "react" interface SlideImage { id: string url: string } export function InfiniteSlideshow() { const [isVisible, setIsVisible] = useState(false) const [opacity, setOpacity] = useState(0) const [slideshowImages, setSlideshowImages] = useState([[], [], []]) const fileInputRefs = [useRef(null), useRef(null), useRef(null)] useEffect(() => { const handleScroll = () => { const mainContainer = document.getElementById("main-container") if (mainContainer) { const mainContainerRect = mainContainer.getBoundingClientRect() const scrollProgress = 1 - mainContainerRect.bottom / window.innerHeight if (scrollProgress > 0) { setIsVisible(true) setOpacity(Math.min(scrollProgress * 2, 1)) } else { setIsVisible(false) setOpacity(0) } } } window.addEventListener("scroll", handleScroll) return () => window.removeEventListener("scroll", handleScroll) }, []) const handleImageUpload = (event: React.ChangeEvent, rowIndex: number) => { const files = event.target.files if (files) { const newImages = Array.from(files).map((file) => ({ id: Math.random().toString(36).substr(2, 9), url: URL.createObjectURL(file), })) setSlideshowImages((prev) => { const newState = [...prev] newState[rowIndex] = [...newState[rowIndex], ...newImages] return newState }) } } const triggerFileInput = (index: number) => { fileInputRefs[index].current?.click() } return (

{[0, 1, 2].map((rowIndex) => (

{slideshowImages[rowIndex].length > 0 ? [...slideshowImages[rowIndex], ...slideshowImages[rowIndex]].map((image, index) => (

)) : Array.from({ length: 8 }).map((_, index) => (

))}

{slideshowImages[rowIndex].length > 0 ? [...slideshowImages[rowIndex], ...slideshowImages[rowIndex]].map((image, index) => (

)) : Array.from({ length: 8 }).map((_, index) => (

))}

{[0, 1, 2].map((index) => ( handleImageUpload(e, index)} accept="image/*" multiple className="hidden" /> ))}

) } [V0_FILE]json:file="public/ticker-images.json" isEdit="true" isMerged="true" { "row1": [ "https://vercel.com/_next/image?url=https%3A%2F%2Fassets.vercel.com%2Fimage%2Fupload%2Fcontentful%2Fimage%2Fe5382hct74si%2F1UcWyWgJHTQ23qf7GFfay9%2F5596e123d52500541574cf3d970d94f8%2Fimage.png&w=3840&q=75", "https://vercel.com/_next/image?url=https%3A%2F%2Fassets.vercel.com%2Fimage%2Fupload%2Fcontentful%2Fimage%2Fe5382hct74si%2F1YkuFBZwzmI7CZ4hxpq6dW%2Fea55183d4d0e8a0cdb020f00718ae38e%2FMy_Logs_Dark.png&w=3840&q=75", "https://vercel.com/_next/image?url=https%3A%2F%2Fassets.vercel.com%2Fimage%2Fupload%2Fcontentful%2Fimage%2Fe5382hct74si%2F3CSHPVw6n6ZPBWXZfFycpp%2Fb499dbf7977ad404be660a892da2100a%2F600x300.png&w=1920&q=75", "https://vercel.com/_next/image?url=https%3A%2F%2Fassets.vercel.com%2Fimage%2Fupload%2Fcontentful%2Fimage%2Fe5382hct74si%2F4iSi90keMWB4NNDKPfPr3b%2F67791d0dd5b5a847836a94b4b7435279%2Fimage-1736860667012.png&w=1920&q=75", "https://vercel.com/_next/image?url=https%3A%2F%2Fassets.vercel.com%2Fimage%2Fupload%2Fcontentful%2Fimage%2Fe5382hct74si%2F1UcWyWgJHTQ23qf7GFfay9%2F5596e123d52500541574cf3d970d94f8%2Fimage.png&w=3840&q=75", "https://vercel.com/_next/image?url=https%3A%2F%2Fassets.vercel.com%2Fimage%2Fupload%2Fcontentful%2Fimage%2Fe5382hct74si%2F1YkuFBZwzmI7CZ4hxpq6dW%2Fea55183d4d0e8a0cdb020f00718ae38e%2FMy_Logs_Dark.png&w=3840&q=75", "https://vercel.com/_next/image?url=https%3A%2F%2Fassets.vercel.com%2Fimage%2Fupload%2Fcontentful%2Fimage%2Fe5382hct74si%2F3CSHPVw6n6ZPBWXZfFycpp%2Fb499dbf7977ad404be660a892da2100a%2F600x300.png&w=1920&q=75", "https://vercel.com/_next/image?url=https%3A%2F%2Fassets.vercel.com%2Fimage%2Fupload%2Fcontentful%2Fimage%2Fe5382hct74si%2F4iSi90keMWB4NNDKPfPr3b%2F67791d0dd5b5a847836a94b4b7435279%2Fimage-1736860667012.png&w=1920&q=75" ], "row2": [ "https://vercel.com/_next/image?url=https%3A%2F%2Fassets.vercel.com%2Fimage%2Fupload%2Fcontentful%2Fimage%2Fe5382hct74si%2F1UcWyWgJHTQ23qf7GFfay9%2F5596e123d52500541574cf3d970d94f8%2Fimage.png&w=3840&q=75", "https://vercel.com/_next/image?url=https%3A%2F%2Fassets.vercel.com%2Fimage%2Fupload%2Fcontentful%2Fimage%2Fe5382hct74si%2F1YkuFBZwzmI7CZ4hxpq6dW%2Fea55183d4d0e8a0cdb020f00718ae38e%2FMy_Logs_Dark.png&w=3840&q=75", "https://vercel.com/_next/image?url=https%3A%2F%2Fassets.vercel.com%2Fimage%2Fupload%2Fcontentful%2Fimage%2Fe5382hct74si%2F3CSHPVw6n6ZPBWXZfFycpp%2Fb499dbf7977ad404be660a892da2100a%2F600x300.png&w=1920&q=75", "https://vercel.com/_next/image?url=https%3A%2F%2Fassets.vercel.com%2Fimage%2Fupload%2Fcontentful%2Fimage%2Fe5382hct74si%2F4iSi90keMWB4NNDKPfPr3b%2F67791d0dd5b5a847836a94b4b7435279%2Fimage-1736860667012.png&w=1920&q=75", "https://vercel.com/_next/image?url=https%3A%2F%2Fassets.vercel.com%2Fimage%2Fupload%2Fcontentful%2Fimage%2Fe5382hct74si%2F1UcWyWgJHTQ23qf7GFfay9%2F5596e123d52500541574cf3d970d94f8%2Fimage.png&w=3840&q=75", "https://vercel.com/_next/image?url=https%3A%2F%2Fassets.vercel.com%2Fimage%2Fupload%2Fcontentful%2Fimage%2Fe5382hct74si%2F1YkuFBZwzmI7CZ4hxpq6dW%2Fea55183d4d0e8a0cdb020f00718ae38e%2FMy_Logs_Dark.png&w=3840&q=75", "https://vercel.com/_next/image?url=https%3A%2F%2Fassets.vercel.com%2Fimage%2Fupload%2Fcontentful%2Fimage%2Fe5382hct74si%2F3CSHPVw6n6ZPBWXZfFycpp%2Fb499dbf7977ad404be660a892da2100a%2F600x300.png&w=1920&q=75", "https://vercel.com/_next/image?url=https%3A%2F%2Fassets.vercel.com%2Fimage%2Fupload%2Fcontentful%2Fimage%2Fe5382hct74si%2F4iSi90keMWB4NNDKPfPr3b%2F67791d0dd5b5a847836a94b4b7435279%2Fimage-1736860667012.png&w=1920&q=75" ], "row3": [ "https://vercel.com/_next/image?url=https%3A%2F%2Fassets.vercel.com%2Fimage%2Fupload%2Fcontentful%2Fimage%2Fe5382hct74si%2F1UcWyWgJHTQ23qf7GFfay9%2F5596e123d52500541574cf3d970d94f8%2Fimage.png&w=3840&q=75", "https://vercel.com/_next/image?url=https%3A%2F%2Fassets.vercel.com%2Fimage%2Fupload%2Fcontentful%2Fimage%2Fe5382hct74si%2F1YkuFBZwzmI7CZ4hxpq6dW%2Fea55183d4d0e8a0cdb020f00718ae38e%2FMy_Logs_Dark.png&w=3840&q=75", "https://vercel.com/_next/image?url=https%3A%2F%2Fassets.vercel.com%2Fimage%2Fupload%2Fcontentful%2Fimage%2Fe5382hct74si%2F3CSHPVw6n6ZPBWXZfFycpp%2Fb499dbf7977ad404be660a892da2100a%2F600x300.png&w=1920&q=75", "https://vercel.com/_next/image?url=https%3A%2F%2Fassets.vercel.com%2Fimage%2Fupload%2Fcontentful%2Fimage%2Fe5382hct74si%2F4iSi90keMWB4NNDKPfPr3b%2F67791d0dd5b5a847836a94b4b7435279%2Fimage-1736860667012.png&w=1920&q=75", "https://vercel.com/_next/image?url=https%3A%2F%2Fassets.vercel.com%2Fimage%2Fupload%2Fcontentful%2Fimage%2Fe5382hct74si%2F1UcWyWgJHTQ23qf7GFfay9%2F5596e123d52500541574cf3d970d94f8%2Fimage.png&w=3840&q=75", "https://vercel.com/_next/image?url=https%3A%2F%2Fassets.vercel.com%2Fimage%2Fupload%2Fcontentful%2Fimage%2Fe5382hct74si%2F1YkuFBZwzmI7CZ4hxpq6dW%2Fea55183d4d0e8a0cdb020f00718ae38e%2FMy_Logs_Dark.png&w=3840&q=75", "https://vercel.com/_next/image?url=https%3A%2F%2Fassets.vercel.com%2Fimage%2Fupload%2Fcontentful%2Fimage%2Fe5382hct74si%2F3CSHPVw6n6ZPBWXZfFycpp%2Fb499dbf7977ad404be660a892da2100a%2F600x300.png&w=1920&q=75", "https://vercel.com/_next/image?url=https%3A%2F%2Fassets.vercel.com%2Fimage%2Fupload%2Fcontentful%2Fimage%2Fe5382hct74si%2F4iSi90keMWB4NNDKPfPr3b%2F67791d0dd5b5a847836a94b4b7435279%2Fimage-1736860667012.png&w=1920&q=75" ] } [V0_FILE]javascript:file="next.config.js" isEdit="true" isMerged="true" /** @type {import('next').NextConfig} */ const nextConfig = { images: { domains: ["vercel.com", "assets.vercel.com", "hebbkx1anhila5yf.public.blob.vercel-storage.com"], }, } module.exports = nextConfig [V0_FILE]typescriptreact:file="components/ui/button.tsx" isQuickEdit="true" isEdit="true" isMerged="true" import * as React from "react" import { cva, type VariantProps } from "class-variance-authority" import { cn } from "@/lib/utils" const buttonVariants = cva( "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50", { variants: { variant: { default: "bg-primary text-primary-foreground shadow", destructive: "bg-destructive text-destructive-foreground shadow-sm", outline: "border border-input bg-background shadow-sm", secondary: "bg-secondary text-secondary-foreground shadow-sm", ghost: "text-accent-foreground", link: "text-primary underline-offset-4", }, size: { default: "h-9 px-4 py-2", sm: "h-8 rounded-md px-3 text-xs", lg: "h-10 rounded-md px-8", icon: "h-9 w-9", }, }, defaultVariants: { variant: "default", size: "default", }, }, ) export interface ButtonProps extends React.AnchorHTMLAttributes, VariantProps { asChild?: boolean } const Button = React.forwardRef( ({ className, variant, size, asChild = false, ...props }, ref) => { return ( {props.children} ) }, ) Button.displayName = "Button" export { Button, buttonVariants } [V0_FILE]typescriptreact:file="lib/utils.ts" isEdit="true" isMerged="true" import { type ClassValue, clsx } from "clsx" import { twMerge } from "tailwind-merge" export function cn(...inputs: ClassValue[]) { return twMerge(clsx(inputs)) } [V0_FILE]typescriptreact:file="app/layout.tsx" isEdit="true" isMerged="true" import "@/app/globals.css" import { Inter } from "next/font/google" import type React from "react" const inter = Inter({ subsets: ["latin"], display: "swap", variable: "--font-inter", }) export const metadata = { title: "Yadwinder Singh - Product Designer", description: "Freelance Product Designer based in India", } export default function RootLayout({ children, }: { children: React.ReactNode }) { return ( {children} ) } [V0_FILE]javascript:file="tailwind.config.js" isEdit="true" isMerged="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: { 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))", }, }, fontFamily: { sans: ["var(--font-inter)", "Inter", "system-ui", "Avenir", "Helvetica", "Arial", "sans-serif"], mono: [ "var(--font-inter)", "Inter", "Consolas", "Monaco", "Lucida Console", "Liberation Mono", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Courier New", "monospace", ], }, boxShadow: { "shadow-2xl": "var(--shadow-2xl)", "shadow-2xs": "var(--shadow-2xs)", "shadow-lg": "var(--shadow-lg)", "shadow-md": "var(--shadow-md)", "shadow-none": "var(--shadow-none)", "shadow-sm": "var(--shadow-sm)", "shadow-xl": "var(--shadow-xl)", "shadow-xs": "var(--shadow-xs)", }, borderRadius: { lg: "var(--radius)", md: "calc(var(--radius) - 2px)", sm: "calc(var(--radius) - 4px)", }, }, }, plugins: [require("tailwindcss-animate")], } [V0_FILE]typescriptreact:file="app/globals.css" isEdit="true" isQuickEdit="true" isMerged="true" @tailwind base; @tailwind components; @tailwind utilities; :root { --foreground-rgb: 0, 0, 0; --background-start-rgb: 214, 219, 220; --background-end-rgb: 255, 255, 255; } @media (prefers-color-scheme: dark) { :root { --foreground-rgb: 255, 255, 255; --background-start-rgb: 0, 0, 0; --background-end-rgb: 0, 0, 0; } } body { color: rgb(var(--foreground-rgb)); background: linear-gradient(to bottom, transparent, rgb(var(--background-end-rgb))) rgb(var(--background-start-rgb)); } @layer utilities { .text-balance { text-wrap: balance; } } [V0_FILE]json:file="package.json" isQuickEdit="true" isMerged="true" { "name": "my-project", "version": "1.0.0", "dependencies": { "framer-motion": "^10.16.4" } } [V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" "use client" import { Button } from "@/components/ui/button" import { Card, CardContent } from "@/components/ui/card" import { ArrowUpRight } from "lucide-react" import { RealTimeClock } from "@/components/RealTimeClock" import { Ticker } from "@/components/Ticker" import { useState, useEffect } from "react" const socialLinks = [ { label: "Email", href: "mailto:yadwinder.design@gmail.com", value: "yadwinder.design@gmail.com", }, { label: "Twitter", href: "https://x.com/ydwndr", }, { label: "Dribbble", href: "https://dribbble.com/yadwinders", }, { label: "GitHub", href: "https://github.com/singh-yadwinder", }, ] const experiences = [ { company: "TechNova", period: "2023 - present", description: "Leading UX design for cutting-edge AI-powered productivity tools.", }, { company: "QuantumLeap", period: "2021 - 2023", description: "Spearheaded the design of quantum computing visualization interfaces, bridging complex data with intuitive user experiences.", }, { company: "EcoSphere", period: "2019 - 2021", description: "Designed sustainable product packaging and digital experiences for eco-friendly consumer goods.", }, ] export default function Portfolio() { const [isLoaded, setIsLoaded] = useState(false) useEffect(() => { setIsLoaded(true) }, []) return (

) } function Header({ isLoaded }: { isLoaded: boolean }) { return (

Yadwinder Singh

Freelance Product Designer

) } function Description({ isLoaded }: { isLoaded: boolean }) { return (

I'm Yadwinder Singh, a freelance product designer based in India. I design digital interfaces that solve challenges and amplify user experiences, turning strategic goals into reality.

I experiment with tools like v0 to prototype swiftly, focusing on clean, impactful solutions that balance creativity and functionality.

) } function CTAButtons({ isLoaded }: { isLoaded: boolean }) { return (

) } function Experience({ isLoaded, experiences }: { isLoaded: boolean; experiences: typeof experiences }) { return (

EXPERIENCE

{experiences.map((exp) => (

{exp.company} {exp.period}

{exp.description}

))}

) } function SocialLinks({ isLoaded, links }: { isLoaded: boolean; links: typeof socialLinks }) { return (

LET'S GET IN TOUCH

{links.map((link) => (

{link.label === "Email" ? ( ) : ( {link.label} )}

))}

) } function ClockWrapper({ isLoaded }: { isLoaded: boolean }) { return (

) } [V0_FILE]typescriptreact:file="components/Ticker.tsx" isEdit="true" "use client" import { useEffect, useState, useRef, useCallback } from "react" import { Card } from "@/components/ui/card" import Image from "next/image" import React from "react" interface TickerImage { id: string url: string } interface TickerTrackProps { children: React.ReactNode direction?: "toLeft" | "toRight" speed?: number } const TickerTrack: React.FC = ({ children, direction = "toRight", speed = 30 }) => { const [movePosition, setMovePosition] = useState(0) const containerRef = useRef(null) const contentRef = useRef(null) const requestRef = useRef() const previousTimeRef = useRef() const multiplier = direction === "toLeft" ? -1 : 1 const animate = useCallback( (time: number) => { if (previousTimeRef.current !== undefined) { const deltaTime = time - previousTimeRef.current const movement = ((deltaTime * speed) / 1000) * multiplier setMovePosition((prevPos) => { const contentWidth = contentRef.current?.offsetWidth || 0 const adjustedContentWidth = contentWidth / 2 if (direction === "toLeft" && prevPos <= -adjustedContentWidth) { return 0 } if (direction === "toRight" && prevPos >= 0) { return -adjustedContentWidth } return prevPos + movement }) } previousTimeRef.current = time requestRef.current = requestAnimationFrame(animate) }, [speed, direction, multiplier], ) useEffect(() => { requestRef.current = requestAnimationFrame(animate) return () => { if (requestRef.current) { cancelAnimationFrame(requestRef.current) } } }, [animate]) return (

{children} {React.Children.map(children, (child) => React.cloneElement(child as React.ReactElement))}

) } export function Ticker() { const [isVisible, setIsVisible] = useState(true) const [opacity, setOpacity] = useState(1) const [tickerImages, setTickerImages] = useState<{ [key: string]: TickerImage[] }>({}) const [isLoading, setIsLoading] = useState(true) const [error, setError] = useState(null) useEffect(() => { const handleScroll = () => { const mainContainer = document.getElementById("main-container") if (mainContainer) { const mainContainerRect = mainContainer.getBoundingClientRect() const scrollProgress = 1 - mainContainerRect.bottom / window.innerHeight if (scrollProgress > 0) { setIsVisible(true) setOpacity(Math.min(scrollProgress * 2, 1)) } else { setIsVisible(false) setOpacity(0) } } } window.addEventListener("scroll", handleScroll) return () => window.removeEventListener("scroll", handleScroll) }, []) useEffect(() => { const loadImages = async () => { try { const response = await fetch("/ticker-images.json") if (!response.ok) { throw new Error(`HTTP error! status: ${response.status}`) } const data = await response.json() if (!data || typeof data !== "object") { throw new Error("Invalid JSON structure") } const processedImages: { [key: string]: TickerImage[] } = Object.entries(data).reduce( (acc, [row, urls]) => ({ ...acc, [row]: (urls as string[]).map((url) => ({ id: Math.random().toString(36).substr(2, 9), url, })), }), {} as { [key: string]: TickerImage[] }, ) setTickerImages(processedImages) } catch (error) { console.error("Error loading ticker images:", error) setError("Failed to load images. Please try again later.") } finally { setIsLoading(false) } } loadImages() }, []) if (isLoading) { return

} if (error) { return

{error}

} return (

{Object.entries(tickerImages).map(([row, images], rowIndex) => (

{images.map((image) => (

))}

) } [V0_FILE]typescriptreact:file="components/RealTimeClock.tsx" isEdit="true" "use client" import { useState, useEffect } from "react" export function RealTimeClock() { const [time, setTime] = useState("") useEffect(() => { const updateTime = () => { const date = new Date() const options: Intl.DateTimeFormatOptions = { timeZone: "Asia/Kolkata", hour: "2-digit", minute: "2-digit", second: "2-digit", hour12: true, } setTime(date.toLocaleTimeString("en-US", options)) } updateTime() // Initial call to set the time immediately const timer = setInterval(updateTime, 1000) return () => clearInterval(timer) }, []) return (

{time} IST

) }

About

Tags

Share

More from yadwinder

More Templates Like This

About

Tags

Share

About

Tags

Share

More from yadwinder

More Templates Like This