@@ -0,0 +1,115 @@
请根据这个 React 组件生成一个 shadcn 实现的 loading Skeleton
<div className="flex flex-row w-full">
<div className="w-full h-screen flex flex-col p-0 md:p-10">
<div className="w-full h-11 rounded-t-lg bg-gray-200 dark:bg-gray-700 flex items-center px-3 justify-between">
<div className="space-x-1.5 flex flex-row gap-1">
<span className="w-3 h-3 rounded-full bg-red-400"></span>
<span className="w-3 h-3 rounded-full bg-yellow-400"></span>
<span className="w-3 h-3 rounded-full bg-green-400"></span>
</div>
<div className="flex flex-row gap-2 items-center justify-center">
<div className="md:hidden">
<Link href={product.website || ""} target="__blank">
<Button size={"icon"} variant={"ghost"} className="rounded-full">
<SquareArrowOutUpRight color="gray" className=" w-5 h-5" />
</Button>
</Link>
</div>
{isLoading &&
<Spiner className="mr-5" />
}
{prev &&
<Button onClick={prevProduct} size={"icon"} variant={"ghost"} className=" rounded-full">
<ChevronLeft strokeWidth={1.5} color="gray" className=" w-6 h-6" />
</Button>
}
{next &&
<Button onClick={nextProduct} size={"icon"} variant={"ghost"} className=" rounded-full">
<ChevronRight strokeWidth={1.5} color="gray" className=" w-6 h-6" />
</Button>
}
</div>
</div>
<div className="bg-gray-100 dark:bg-gray-700 border-t-0 w-full h-screen overflow-auto border-gray-200 dark:border-gray-600 border">
<img alt={${product.name} - screenshot} loading="lazy" src={${process.env.NEXT_PUBLIC_CLOUDFLARE_R2}/${product?.uuid}.webp}></img>
</div>
</div>
<div className="md:flex md:w-[500px] hidden h-screen">
<div className="my-10 md:flex flex-col border rounded-lg border-r-0 rounded-r-none shadow-sm pb-5">
<div className="absolute top-15 right-5">
<GoBack className=" border-t-0 rounded-t-none hover:border-t" />
</div>
<div className="flex flex-col gap-4">
<div className="flex flex-row gap-4 items-center p-5 mt-10 justify-start">
<div>
{product &&
<img alt={${product.name} thumbnail} loading="lazy" src={thumbailGetter(props.productType, product) || ""} className=" w-20 rounded-lg border" />
}
</div>
<div className="flex flex-col gap-1 ">
<h1 className=" text-xl font-semibold">{product?.name}</h1>
<h2 className=" text-slate-600">
{product?.tagline}
</h2>
</div>
</div>
</div>
<div>
</div>
{props.productType === "yc" && <>
<YCInfoBadge yc={(product as YC)} />
</>}
<div className="px-5 overflow-auto min-h-10">
<h2 className="text-slate-500">
{product?.description}
</h2>
</div>
{product && props.productType === "ph" &&
<div className="p-5 gap-2 flex flex-wrap">
{(product as Producthunt).topics?.nodes.map((item) =>
<Badge key={item.name} className="py-1 text-slate-500" variant="outline">{item.name}</Badge>
)}
</div>
}
<div className="p-5 flex gap-5 grow">
<Link className="w-full" href={product?.website || ""} target="__blank">
<Button className="w-full" variant={"outline"}>
GET IT
</Button>
</Link>
{product && props.productType === "ph" &&
<Link className="w-full h-full" href={(product as Producthunt)?.url || ""} target="__blank">
<Button className="w-full border" variant={"outline"}>VOTE ({(product as Producthunt)?.votesCount || ""})</Button>
</Link>
}
</div>
<div className="flex items-end px-5 min-h-10">
<div className="w-full flex flex-row justify-start gap-4">
{prev &&
<Button onClick={prevProduct} variant={"outline"} size={"icon"} className="rounded-full" >
<ChevronLeft strokeWidth={1.5} color="gray" className=" w-6 h-6" />
</Button>
}
{next &&
<Button onClick={nextProduct} variant={"outline"} size={"icon"} className="rounded-full" >
<ChevronRight strokeWidth={1.5} color="gray" className=" w-6 h-6" />
</Button>
}
</div>
</div>
</div>
</div>
</div>
daimajia created this gist