mirror of
https://github.com/JOYCEQL/magic-resume.git
synced 2026-06-02 07:43:34 +02:00
style: workbench template card style
This commit is contained in:
@@ -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"
|
||||||
|
|||||||
Reference in New Issue
Block a user