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

// components/FeaturedCard.tsx import React from "react"; import Image from "next/image"; import { TopRightArrowIcon } from "@/icons"; interface FeaturedCardProps { featured: { prompt: string; image: string; }; onClick: (value: string) => void; } const FeaturedCard: React.FC<FeaturedCardProps> = ({ featured, onClick }) => { return ( <div className="group flex flex col justify center gap 3 rounded 2xl border p 4 transition duration 300 hover:shadow featureSectionShadowLight dark:hover:shadow featureSectionShadowDark max sm:gap 1 max sm:p 3" onClick={() => onClick(featured.prompt)} > <div className="flex items center justify center overflow hidden rounded md"> <Image src={featured.image} alt="." width={500} height={500} priority loading="eager" className="aspect video w full object cover object center transition duration 300 ease in group hover:scale [1.05] group hover:cursor pointer" /> </div> <div className="relative flex w full items center justify between gap 2"> <span className="absolute bottom [95%] left 1/2 translate x 1/2 rounded sm bg foreground p 2 py 0.5 text [10px] font semibold tracking wide !text white opacity 0 transition duration 500 after:absolute after:left 1/2 after:top full after: translate x 1/2 after:border [4px] after:border transparent after:border t foreground after:content [''] group hover:opacity 100"> Generate this </span> <div className="group cursor pointer font medium transition all duration 700"> <div className="line clamp 2 h 12 text ellipsis py 2 text sm">{featured.prompt}</div> </div> <div className="shrink 0"> <TopRightArrowIcon size={19} /> </div> </div> </div> ); }; export default FeaturedCard; optimise and show me how its looks like