style: workbench template card style

This commit is contained in:
siyue
2025-02-04 23:11:30 +08:00
committed by qingchen
parent f24557fdb1
commit 5c49aea07d
@@ -43,25 +43,23 @@ const TemplateSheet = () => {
{/* 解决警告问题 */} {/* 解决警告问题 */}
<SheetDescription></SheetDescription> <SheetDescription></SheetDescription>
<div className="grid grid-cols-4 gap-4 mt-4"> <div className="grid grid-cols-3 gap-4 mt-4">
{DEFAULT_TEMPLATES.map((t) => ( {DEFAULT_TEMPLATES.map((t) => (
<button <button
key={t.id} key={t.id}
onClick={() => setTemplate(t.id)} onClick={() => setTemplate(t.id)}
className={cn( className={cn(
"relative group rounded-lg overflow-hidden border-2 transition-all duration-200 aspect-[210/297]", "relative group rounded-lg overflow-hidden border transition-all duration-200 hover:scale-[1.02]",
t.id === currentTemplate.id t.id === currentTemplate.id
? "border-black dark:border-white" ? "border-black dark:border-white"
: "dark:border-neutral-800 dark:hover:border-neutral-700 border-gray-100 hover:border-gray-200" : "dark:border-neutral-800 dark:hover:border-neutral-700 border-gray-100 hover:border-gray-200"
)} )}
> >
<div className="absolute inset-0"> <img
<img src={templateImages[t.id].src}
src={templateImages[t.id].src} alt={t.name}
alt={t.name} className="w-full h-auto"
className="w-full object-cover" />
/>
</div>
{t.id === currentTemplate.id && ( {t.id === currentTemplate.id && (
<motion.div <motion.div
layoutId="template-selected" layoutId="template-selected"