96:I[903690,["/chat-static/_next/static/immutable/chunks/1s38b5er7hbv8.js","/chat-static/_next/static/immutable/chunks/0ic6a6ps43-np.js","/chat-static/_next/static/immutable/chunks/2enw2ezzmjrzd.js","/chat-static/_next/static/immutable/chunks/055eeu4yqz_8r.js","/chat-static/_next/static/immutable/chunks/3h9c9xa_ce096.js","/chat-static/_next/static/immutable/chunks/1y8f_921aawwo.js","/chat-static/_next/static/immutable/chunks/0d2mcgj-q16do.js","/chat-static/_next/static/immutable/chunks/02r6x1jrr6bjz.js","/chat-static/_next/static/immutable/chunks/22rize2mf-358.js","/chat-static/_next/static/immutable/chunks/0kqis8e7ip_dq.js","/chat-static/_next/static/immutable/chunks/0re7e5f0cowr7.js","/chat-static/_next/static/immutable/chunks/2fuq3dzrsdm_0.js","/chat-static/_next/static/immutable/chunks/40oczuspnd9lh.js","/chat-static/_next/static/immutable/chunks/12jgl_43mlhsg.js","/chat-static/_next/static/immutable/chunks/2bziwuklsua7x.js","/chat-static/_next/static/immutable/chunks/2_5esn7cixwin.js","/chat-static/_next/static/immutable/chunks/3egtc_86flmig.js","/chat-static/_next/static/immutable/chunks/3_zne-oxp3ex8.js","/chat-static/_next/static/immutable/chunks/21b4squl5r8au.js","/chat-static/_next/static/immutable/chunks/43gfst54wug0y.js","/chat-static/_next/static/immutable/chunks/38ti4hx2285mi.js","/chat-static/_next/static/immutable/chunks/00hu8fdgh1j4v.js","/chat-static/_next/static/immutable/chunks/0g4_0g2ih2szk.js","/chat-static/_next/static/immutable/chunks/2-wdjxm1l1tgc.js","/chat-static/_next/static/immutable/chunks/44ac-26ybftd3.js","/chat-static/_next/static/immutable/chunks/0sg7s8mat8wbm.js","/chat-static/_next/static/immutable/chunks/3cg2lu5nlxz19.js","/chat-static/_next/static/immutable/chunks/2_-vkr9dhj5p_.js","/chat-static/_next/static/immutable/chunks/0ajqvtd47_5sl.js","/chat-static/_next/static/immutable/chunks/1k6hw0zz-xg-o.js","/chat-static/_next/static/immutable/chunks/0r0ce_rhuu-vw.js","/chat-static/_next/static/immutable/chunks/1-89w3467jpe0.js","/chat-static/_next/static/immutable/chunks/1mom5in5gecbc.js","/chat-static/_next/static/immutable/chunks/1di-zl73drzjt.js","/chat-static/_next/static/immutable/chunks/29f13ut0uqd3g.js","/chat-static/_next/static/immutable/chunks/364l0i5oyhodb.js","/chat-static/_next/static/immutable/chunks/2vru7ekzafb8c.js"],"ExplicitChatIdProvider"] 97:I[838238,["/chat-static/_next/static/immutable/chunks/1s38b5er7hbv8.js","/chat-static/_next/static/immutable/chunks/0ic6a6ps43-np.js","/chat-static/_next/static/immutable/chunks/2enw2ezzmjrzd.js","/chat-static/_next/static/immutable/chunks/055eeu4yqz_8r.js","/chat-static/_next/static/immutable/chunks/3h9c9xa_ce096.js","/chat-static/_next/static/immutable/chunks/1y8f_921aawwo.js","/chat-static/_next/static/immutable/chunks/0d2mcgj-q16do.js","/chat-static/_next/static/immutable/chunks/02r6x1jrr6bjz.js","/chat-static/_next/static/immutable/chunks/22rize2mf-358.js","/chat-static/_next/static/immutable/chunks/0kqis8e7ip_dq.js","/chat-static/_next/static/immutable/chunks/0re7e5f0cowr7.js","/chat-static/_next/static/immutable/chunks/2fuq3dzrsdm_0.js","/chat-static/_next/static/immutable/chunks/40oczuspnd9lh.js","/chat-static/_next/static/immutable/chunks/12jgl_43mlhsg.js","/chat-static/_next/static/immutable/chunks/2bziwuklsua7x.js","/chat-static/_next/static/immutable/chunks/2_5esn7cixwin.js","/chat-static/_next/static/immutable/chunks/3egtc_86flmig.js","/chat-static/_next/static/immutable/chunks/3_zne-oxp3ex8.js","/chat-static/_next/static/immutable/chunks/21b4squl5r8au.js","/chat-static/_next/static/immutable/chunks/43gfst54wug0y.js","/chat-static/_next/static/immutable/chunks/38ti4hx2285mi.js","/chat-static/_next/static/immutable/chunks/00hu8fdgh1j4v.js","/chat-static/_next/static/immutable/chunks/0g4_0g2ih2szk.js","/chat-static/_next/static/immutable/chunks/2-wdjxm1l1tgc.js","/chat-static/_next/static/immutable/chunks/44ac-26ybftd3.js","/chat-static/_next/static/immutable/chunks/0sg7s8mat8wbm.js","/chat-static/_next/static/immutable/chunks/3cg2lu5nlxz19.js","/chat-static/_next/static/immutable/chunks/2_-vkr9dhj5p_.js","/chat-static/_next/static/immutable/chunks/0ajqvtd47_5sl.js","/chat-static/_next/static/immutable/chunks/1k6hw0zz-xg-o.js","/chat-static/_next/static/immutable/chunks/0r0ce_rhuu-vw.js","/chat-static/_next/static/immutable/chunks/1-89w3467jpe0.js","/chat-static/_next/static/immutable/chunks/1mom5in5gecbc.js","/chat-static/_next/static/immutable/chunks/1di-zl73drzjt.js","/chat-static/_next/static/immutable/chunks/29f13ut0uqd3g.js","/chat-static/_next/static/immutable/chunks/364l0i5oyhodb.js","/chat-static/_next/static/immutable/chunks/2vru7ekzafb8c.js"],"SWRDataProvider"] 98:T2ab8,[V0_FILE]json:file="package.json" isMerged="true" { "name": "my-v0-project", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "next lint" }, "dependencies": { "@hookform/resolvers": "^3.10.0", "@radix-ui/react-accordion": "1.2.2", "@radix-ui/react-alert-dialog": "1.1.4", "@radix-ui/react-aspect-ratio": "1.1.1", "@radix-ui/react-avatar": "1.1.2", "@radix-ui/react-checkbox": "1.1.3", "@radix-ui/react-collapsible": "1.1.2", "@radix-ui/react-context-menu": "2.2.4", "@radix-ui/react-dialog": "1.1.4", "@radix-ui/react-dropdown-menu": "2.1.4", "@radix-ui/react-hover-card": "1.1.4", "@radix-ui/react-label": "2.1.1", "@radix-ui/react-menubar": "1.1.4", "@radix-ui/react-navigation-menu": "1.2.3", "@radix-ui/react-popover": "1.1.4", "@radix-ui/react-progress": "1.1.1", "@radix-ui/react-radio-group": "1.2.2", "@radix-ui/react-scroll-area": "1.2.2", "@radix-ui/react-select": "2.1.4", "@radix-ui/react-separator": "1.1.1", "@radix-ui/react-slider": "1.2.2", "@radix-ui/react-slot": "1.1.1", "@radix-ui/react-switch": "1.1.2", "@radix-ui/react-tabs": "1.1.2", "@radix-ui/react-toast": "1.2.4", "@radix-ui/react-toggle": "1.1.1", "@radix-ui/react-toggle-group": "1.1.1", "@radix-ui/react-tooltip": "1.1.6", "@vercel/analytics": "1.3.1", "autoprefixer": "^10.4.20", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", "cmdk": "1.0.4", "date-fns": "4.1.0", "embla-carousel-react": "8.5.1", "geist": "^1.3.1", "input-otp": "1.4.1", "lucide-react": "^0.454.0", "next": "14.2.25", "next-themes": "^0.4.6", "react": "^19", "react-day-picker": "9.8.0", "react-dom": "^19", "react-hook-form": "^7.60.0", "react-resizable-panels": "^2.1.7", "recharts": "2.15.4", "sonner": "^1.7.4", "tailwind-merge": "^3.3.1", "tailwindcss-animate": "^1.0.7", "vaul": "^0.9.9", "zod": "3.25.67", "framer-motion": "12.23.12" }, "devDependencies": { "@tailwindcss/postcss": "^4.1.9", "@types/node": "^22", "@types/react": "^18", "@types/react-dom": "^18", "postcss": "^8.5", "tailwindcss": "^4.1.9", "tw-animate-css": "1.3.3", "typescript": "^5" } } [V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isMerged="true" import ProductCategoryGrid from "@/components/product-category-grid" export default function Home() { return (

) } [V0_FILE]typescriptreact:file="components/ui/direction-aware-hover.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import type React from "react" import { useRef, useState } from "react" import Image from "next/image" import { AnimatePresence, motion } from "framer-motion" import { cn } from "@/lib/utils" export const DirectionAwareHover = ({ imageUrl, children, childrenClassName, imageClassName, className, }: { imageUrl: string children: React.ReactNode | string childrenClassName?: string imageClassName?: string className?: string }) => { const ref = useRef(null) const [direction, setDirection] = useState<"top" | "bottom" | "left" | "right" | string>("left") const handleMouseEnter = (event: React.MouseEvent) => { if (!ref.current) return const direction = getDirection(event, ref.current) console.log("direction", direction) switch (direction) { case 0: setDirection("top") break case 1: setDirection("right") break case 2: setDirection("bottom") break case 3: setDirection("left") break default: setDirection("left") break } } const getDirection = (ev: React.MouseEvent, obj: HTMLElement) => { const { width: w, height: h, left, top } = obj.getBoundingClientRect() const x = ev.clientX - left - w / 2 const y = ev.clientY - top - h / 2 const d = Math.round(Math.atan2(y, x) / 1.57079633 + 5) % 4 return d } return (

{children} ) } const variants = { initial: { x: 0, }, exit: { x: 0, y: 0, }, top: { y: 20, }, bottom: { y: -20, }, left: { x: 20, }, right: { x: -20, }, } const textVariants = { initial: { y: 0, x: 0, opacity: 0, }, exit: { y: 0, x: 0, opacity: 0, }, top: { y: -20, opacity: 1, }, bottom: { y: 2, opacity: 1, }, left: { x: -2, opacity: 1, }, right: { x: 20, opacity: 1, }, } const overlayVariants = { initial: { opacity: 0, }, exit: { opacity: 0, }, top: { opacity: 1, }, bottom: { opacity: 1, }, left: { opacity: 1, }, right: { opacity: 1, }, } [V0_FILE]typescriptreact:file="components/product-category-grid.tsx" isEdit="true" isQuickEdit="true" "use client" import Link from "next/link" import { DirectionAwareHover } from "@/components/ui/direction-aware-hover" const categories = [ { id: "cat-sport", name: "SportsWare", image: "https://images.unsplash.com/photo-1571019613454-1cb2f99b2d8b?auto=format&fit=crop&w=1260&h=750&q=80", alignRight: true, }, { id: "cat-tees", name: "Graphic Tees", image: "https://images.unsplash.com/photo-1734834917963-2c7a7351b4d7?w=900&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTE1fHxncmFwaGljJTIwdHNoaXJ0fGVufDB8fDB8fHww", }, { id: "cat-hoodies", name: "Ladies Hoodies", image: "https://images.unsplash.com/photo-1634276703006-c1236a505b36?q=80&w=3086&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D", }, { id: "cat-ladies-shirts", name: "Ladies Shirts", image: "https://plus.unsplash.com/premium_photo-1690350731538-57344931ac02?w=900&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Nnx8bGFkaWVzJTIwc2hpcnR8ZW58MHx8MHx8fDA%3D", }, { id: "cat-youth", name: "Youth Fashion", image: "https://images.unsplash.com/photo-1503342217505-b0a15ec3261c?auto=format&fit=crop&w=1260&h=750&q=80", }, { id: "cat-kids", name: "Kids Fashion", image: "https://images.unsplash.com/photo-1519238263530-99bdd11df2ea?auto=format&fit=crop&w=1260&h=750&q=80", }, { id: "cat-cologne", name: "Perfume & Cologne", image: "https://images.unsplash.com/photo-1541643600914-78b084683601?auto=format&fit=crop&w=1260&h=750&q=80", alignRight: true, }, { id: "cat-mens-shirts", name: "Mens Shirts", image: "https://images.unsplash.com/photo-1602810318383-e386cc2a3ccf?auto=format&fit=crop&w=1260&h=750&q=80", }, { id: "cat-intimate", name: "Ladies Intimates", image: "https://images.unsplash.com/photo-1596755389378-c31d21fd1273?auto=format&fit=crop&w=1260&h=750&q=80", }, ] export default function ProductCategoryGrid() { return (

{categories.map((category) => (

{category.name}

))}

BANNER

) }8c:["$","$L96",null,{"chatId":"mXaAmsDBP9o","children":["$","$L97",null,{"data":{"@\"active-block\",\"mXaAmsDBP9o\",":{"id":"b_DNi8zPdJCBL","messageId":"MXo5bKsgNwpCJgR0CZPD4BjKLeae4AHu","source":"$98","language":"typescriptreact","type":"code-project","closed":true,"meta":{"id":"product-category-grid","type":"code-project","project":"product-category-grid","taskNameActive":"Updating image URLs","taskNameComplete":"Updated image URLs"},"hasSourceBeenEdited":false,"forkedFromBlockId":"$undefined"},"@\"chat:vm-mode\",\"mXaAmsDBP9o\",":false},"children":"$L99"}]}]

About

Tags

Share

About

Tags

Share

More from deepakchandwani

More Templates Like This