Feature Generation Page - Copy this React, Tailwind Component to your project

"use client"; import React, { useCallback, useMemo, useContext } from "react"; import { FeaturedGenerations, FeaturedGenerationsForComponent, DISCOVER_GENERATIONS, UI_Lib_Options_List, UI_Options, DefaultFeatureGenerator, } from "@/constants"; import { useParams, usePathname } from "next/navigation"; import useCreateNewComponent from "@/hooks/uiElements/useCreateNewComponent"; import clsx from "clsx"; import { gilroyBold } from "@/fonts"; import { useGetFeatureGenerationList } from "@/services/ai/apiHooks"; import type { UI_LIB } from "@/components/pages/landingPage/AISamplePrompt"; import { useRouter } from "next/navigation"; import { RootContext } from "@/providers/ContextProvider"; import type { GeneratedComponent } from "@/types/ai"; import { removeHyphen } from "@/utils"; import Link from "next/link"; import { ArrowRightIcon } from "@radix ui/react icons"; import { trackMixpanelEvent } from "@/mixpanel/mixpanel"; import { MIXPANEL_EVENTS } from "@/mixpanel/constant"; import { constantOrganicData } from "@/components/organicpages/constorganic"; import dynamic from "next/dynamic"; import CardLoader from "@/components/homepage/components/CardLoader"; const FeatureGenerationCard = dynamic( () => import("@/components/homepage/components/FeatureGenerationCard"), { ssr: false, loading: () => <CardLoader />, } ); function FeatureGeneration() { const { createNewAiComponent } = useCreateNewComponent(); const { selectedFramework, selectedUILib } = useContext(RootContext); const router = useRouter(); const params = useParams<{ uielement?: string; component?: string }>(); const uielement = useMemo(() => removeHyphen(params?.uielement ?? ""), [params?.uielement]); const pathname = usePathname(); const frameworkKeyFromRoute = pathname?.split("/").slice( 2, 1)[0] ?? ""; const frameworkKey = frameworkKeyFromRoute.toLowerCase(); const Dynamic_text_uielement = useMemo(() => params?.uielement ?? "", [params?.uielement]); const componentData = useMemo(() => { const frameworkField = `${frameworkKey}_componentName`; const dataItem = constantOrganicData?.constantOrganicPageData?.find((item) => { const itemComponentName = item[frameworkField]?.toString().toLowerCase() ?? ""; const uielementLower = Dynamic_text_uielement.toLowerCase(); return itemComponentName === uielementLower; }); return dataItem ? dataItem.TextofOrganicPage : {}; }, [Dynamic_text_uielement, frameworkKey]); const { data: componentList } = useGetFeatureGenerationList({ isEnabled: true, uiframework: selectedFramework.value, uilibrary: selectedUILib.value, category: uielement, }); const getComponentsList = (): GeneratedComponent[] => { return Array.isArray(componentList?.data) ? componentList?.data : []; }; const uiLib = useMemo( () => UI_Lib_Options_List?.find((item: UI_LIB) => item.value === selectedUILib?.value)?.value ?? selectedUILib?.value ?? "", [selectedUILib] ); const uiFramework = useMemo( () => UI_Options?.find((item) => item?.framework?.value === selectedFramework?.value)?.framework ?.value ?? selectedFramework?.value ?? "", [selectedFramework] ); const getElementGenerations = useMemo( () => FeaturedGenerationsForComponent.find( (component) => component.component.toLowerCase() === uielement.toLowerCase() )?.FeaturedGenerations ?? FeaturedGenerations, [uielement] ); const isUsingComponentsList = getComponentsList().length > 0; const displayedComponents = isUsingComponentsList ? getComponentsList() : getElementGenerations; const handleClick = useCallback( (featured: GeneratedComponent | { prompt: string; image: string }, index: number) => { trackMixpanelEvent(MIXPANEL_EVENTS.FEATURED_GENERATIONS_CLICK, { prompt: featured.prompt, index: index, }); if (isUsingComponentsList) { router.push((featured as GeneratedComponent).link); } else { void createNewAiComponent( (featured as { prompt: string }).prompt, uiLib, uiFramework, "", true ); } }, [isUsingComponentsList, router, createNewAiComponent, uiLib, uiFramework] ); const pluralize = (word: string) => { if (word.toLowerCase() === "all") { return word; } if (word.endsWith("x") || word.endsWith("z") || word.endsWith("ch") || word.endsWith("sh")) { return `${word}es`; } else if ( word.endsWith("y") && !word.endsWith("ay") && !word.endsWith("ey") && !word.endsWith("iy") && !word.endsWith("oy") && !word.endsWith("uy") ) { return `${word.slice(0, 1)}ies`; } else if (word.endsWith("f")) { return `${word.slice(0, 1)}ves`; } else if (word.endsWith("fe")) { return `${word.slice(0, 2)}ves`; } else if (word.endsWith("o")) { return `${word}es`; } else { return `${word}s`; } }; const handleUielement = (uielement: string) => { return uielement.replace(/\bui\b/g, "UI"); }; const formattedUielement = handleUielement(uielement); const pluralUielement = formattedUielement.endsWith("s") ? formattedUielement : pluralize(formattedUielement); const DisplayFeatureGeneration = !componentData || !uielement || !pluralUielement; const textFeature = (componentData as { Text_Feature?: string })?.Text_Feature ?? `${removeHyphen(uielement && pluralUielement)} ${DefaultFeatureGenerator}`; return ( <div className="mx auto flex w full max w [1200px] flex col gap y 4 px 4"> <div className="mb 8 flex flex wrap items center justify between gap 2"> <div className={clsx( "text start text 3xl capitalize max [375px]:text 2xl", gilroyBold.className )} > {DisplayFeatureGeneration ? DefaultFeatureGenerator : textFeature} </div>{" "} <Link href={DISCOVER_GENERATIONS} className="group flex items center gap 1 text primary hover:underline" onClick={() => trackMixpanelEvent(MIXPANEL_EVENTS.EXPLORE_GENERATIONS_CLICK, {})} > Discover all{" "} <span className="transition duration 300 group hover:translate x 0.5 "> {" "} <ArrowRightIcon />{" "} </span> </Link> </div> <div className="grid w full grid cols [repeat(_auto fit_,_minmax(270px_,_1fr_)_)] gap 8 max lg:gap 5 max [620px]:grid cols [repeat(_auto fit_,_minmax(240px_,_1fr_)_)] max [620px]:gap x 2"> {displayedComponents.map( (featured: GeneratedComponent | { prompt: string; image: string }, index: number) => ( <FeatureGenerationCard key={index} featured={featured} handleClick={handleClick} index={index} /> ) )} </div> </div> ); } export default FeatureGeneration; import Image from "next/image"; import type { GeneratedComponent } from "@/types/ai"; import { TopRightArrowIcon } from "@/icons"; type ComponentCardProps = { featured: { prompt: string; image: string } | GeneratedComponent; handleClick: (featured: { prompt: string; image: string }, index: number) => void; index: number; }; function FeatureGenerationCard({ featured, handleClick, index }: ComponentCardProps) { return ( <div key={index} 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={() => handleClick(featured, index)} > <div className="flex items center justify center overflow hidden rounded md"> <Image src={featured.image} alt="Component" 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 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 FeatureGenerationCard; rander and show me how it will look like