Model Card - Copy this React, Tailwind Component to your project

"use client" import { useState } from "react" import { motion, AnimatePresence } from "framer motion" import { Card, CardContent } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Check, Loader2 } from 'lucide react' import { cn } from "@/lib/utils" const models = [ { name: "Claude", icon: Check, status: "complete" }, { name: "chatGPT", icon: Loader2, status: "loading" }, { name: "Gemini", icon: Loader2, status: "loading" }, ] const TypewriterText = ({ text, isTyping }: { text: string; isTyping: boolean }) => { return ( <motion.div initial={{ opacity: 1 }} animate={{ opacity: 1 }} className="font mono" > <AnimatePresence mode="wait"> {isTyping && ( <motion.div initial={{ width: "0%" }} animate={{ width: "100%" }} transition={{ duration: 2, ease: "easeInOut" }} className="whitespace pre wrap" > {text} </motion.div> )} </AnimatePresence> </motion.div> ) } export default function AnimatedCards() { const [expanded, setExpanded] = useState(false) const [activeTyping, setActiveTyping] = useState<number[]>([0]) const handleExpand = () => { setExpanded(true) // Start typing animation for other cards after expansion // setTimeout(() => { // setActiveTyping([0, 1, 2]) // }, 500) } return ( <div className="min h screen bg gradient to b from green 950 to black p 6"> <div className="mx auto max w 7xl"> <div className="relative"> <motion.div className={cn( "grid gap 6", expanded ? "grid cols 1 md:grid cols 3" : "grid cols 1 place items center" )} > {models.map((model, index) => ( <motion.div key={model.name} layout initial={false} animate={{ opacity: !expanded && index !== 0 ? 0 : 1, scale: !expanded && index !== 0 ? 0.8 : 1, }} transition={{ duration: 0.5 }} className={cn( "w full max w md", !expanded && index !== 0 && "hidden md:block" )} > <Card className="bg black/50 backdrop blur sm border green 900 text white"> <CardContent className="p 6"> <div className="flex items center justify between mb 4 "> <div className="flex items center gap 2"> <span className="text green 500">Response by {model.name}</span> <model.icon className={cn( "h 4 w 4", model.status === "loading" ? "text green 500 animate spin" : "text green 500" )} /> </div> </div> <TypewriterText text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eu turpis molestie, dictum est a, mattis tellus. Sed dignissim, metus nec fringilla accumsan, risus sem sollicitudin lacus, ut interdum tellus elit sed risus." isTyping={activeTyping.includes(index)} /> </CardContent> </Card> </motion.div> ))} </motion.div> {!expanded && ( <motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }} className="absolute bottom 4 left 1/2 translate x 1/2" > <Button onClick={handleExpand} variant="outline" className="bg green 950 text green 500 border green 900 hover:bg green 900 hover:text green 400" > See More </Button> </motion.div> )} </div> </div> </div> ) } how to handle card will be split from the middle card to the 2 sides