[V0_FILE]typescriptreact:file="components/ui/images-badge.tsx" "use client"; import React, { useState } from "react"; import { motion } from "motion/react"; import { cn } from "@/lib/utils"; interface ImagesBadgeProps { text: string; images: string[]; className?: string; /** Optional link URL */ href?: string; /** Link target attribute (e.g., "_blank" for new tab) */ target?: string; /** Folder dimensions { width, height } in pixels */ folderSize?: { width: number; height: number }; /** Image dimensions when teased (peeking) { width, height } in pixels */ teaserImageSize?: { width: number; height: number }; /** Image dimensions when hovered { width, height } in pixels */ hoverImageSize?: { width: number; height: number }; /** How far images translate up on hover in pixels */ hoverTranslateY?: number; /** How far images spread horizontally on hover in pixels */ hoverSpread?: number; /** Rotation angle for fanned images on hover in degrees */ hoverRotation?: number; } export function ImagesBadge({ text, images, className, href, target, folderSize = { width: 32, height: 24 }, teaserImageSize = { width: 20, height: 14 }, hoverImageSize = { width: 48, height: 32 }, hoverTranslateY = -35, hoverSpread = 20, hoverRotation = 15, }: ImagesBadgeProps) { const [isHovered, setIsHovered] = useState(false); // Limit to max 3 images const displayImages = images.slice(0, 3); // Calculate folder tab dimensions proportionally const tabWidth = folderSize.width * 0.375; const tabHeight = folderSize.height * 0.25; const Component = href ? "a" : "div"; return ( setIsHovered(true)} onMouseLeave={() => setIsHovered(false)} > {/* Folder Container */} {/* Folder Back */}

{/* Folder Tab */}

{/* Images that pop out */} {displayImages.map((image, index) => { const totalImages = displayImages.length; // Calculate rotation based on index const baseRotation = totalImages === 1 ? 0 : totalImages === 2 ? (index - 0.5) * hoverRotation : (index - 1) * hoverRotation; // Hover positions - fan out const hoverY = hoverTranslateY - (totalImages - 1 - index) * 3; const hoverX = totalImages === 1 ? 0 : totalImages === 2 ? (index - 0.5) * hoverSpread : (index - 1) * hoverSpread; // Teaser positions - slight peek from folder const teaseY = -4 - (totalImages - 1 - index) * 1; const teaseRotation = totalImages === 1 ? 0 : totalImages === 2 ? (index - 0.5) * 3 : (index - 1) * 3; return ( {`Preview

); })} {/* Folder Front (flattens on hover) */} {/* Folder line detail */}

{/* Text */} {text} ); } [V0_FILE]typescriptreact:file="components/images-badge-demo.tsx" "use client"; import { ImagesBadge } from "@/components/ui/images-badge"; import { ImagesBadge2 } from "@/components/ui/images-badge-2"; export default function ImagesBadgeDemo() { return (

Old

New

); } [V0_FILE]typescriptreact:file="components/ui/images-badge-2.tsx" isMoved="true" "use client"; import React, { useState } from "react"; import { motion } from "motion/react"; import { cn } from "@/lib/utils"; interface ImagesBadgeProps { text: string; images: string[]; className?: string; href?: string; target?: string; folderSize?: { width: number; height: number }; teaserImageSize?: { width: number; height: number }; hoverImageSize?: { width: number; height: number }; hoverTranslateY?: number; hoverSpread?: number; hoverRotation?: number; } export function ImagesBadge2({ text, images, className, href, target, folderSize = { width: 32, height: 24 }, teaserImageSize = { width: 20, height: 14 }, hoverImageSize = { width: 48, height: 32 }, hoverTranslateY = -35, hoverSpread = 20, hoverRotation = 15, }: ImagesBadgeProps) { const [isHovered, setIsHovered] = useState(false); // Limit to max 3 images const displayImages = images.slice(0, 3); // Folder tab proportions const tabWidth = folderSize.width * 0.375; const tabHeight = folderSize.height * 0.25; const Component = href ? "a" : "div"; return ( setIsHovered(true)} onMouseLeave={() => setIsHovered(false)} > {/* Folder */} {/* Folder Back */}

{/* Images */} {displayImages.map((image, index) => { const total = displayImages.length; const baseRotation = total === 1 ? 0 : total === 2 ? (index - 0.5) * hoverRotation : (index - 1) * hoverRotation; const hoverX = total === 1 ? 0 : total === 2 ? (index - 0.5) * hoverSpread : (index - 1) * hoverSpread; const hoverY = hoverTranslateY - (total - 1 - index) * 3; const teaseY = -4 - (total - 1 - index) * 1; const teaseRotation = total === 1 ? 0 : total === 2 ? (index - 0.5) * 3 : (index - 1) * 3; return ( {`Preview

); })} {/* Folder Front */}

{/* Label */} {text} ); }