Qlockify/qlockify-frontend-deployment
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(tags): use a responsive compact card layout

Browse Source
This commit is contained in:
Amirhossein Khalili
2026-04-25 19:12:00 +03:30
parent cf7dd06046
commit 846668add9
1 changed files with 17 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
src/pages/Tags.tsx
View File

@@ -171,20 +171,23 @@ export default function Tags() {
<div className="p-12 flex justify-center text-slate-500">{t.loading || "Loading..."}</div> <div className="p-12 flex justify-center text-slate-500">{t.loading || "Loading..."}</div>
) : ( ) : (
<div className="flex flex-col flex-1"> <div className="flex flex-col flex-1">
<div className="flex flex-col gap-4 mb-6"> <div className="mb-6 grid grid-cols-1 gap-4 sm:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4">
{tags.map((tag) => ( {tags.map((tag) => (
<Card key={tag.id} className="dark:bg-slate-800 dark:border-slate-700 shadow-sm"> <Card key={tag.id} className="overflow-hidden shadow-sm dark:border-slate-700 dark:bg-slate-800">
<CardContent className="flex items-center justify-between gap-4 py-4 px-6"> <CardContent className="flex h-full flex-col gap-4 p-5">
<div className="flex items-center gap-4 min-w-0"> <div className="flex items-start justify-between gap-3">
<div className="h-10 w-10 rounded-full border border-slate-200 dark:border-slate-700" style={{ backgroundColor: tag.color || DEFAULT_COLOR }} /> <div className="flex min-w-0 items-center gap-3">
<div className="min-w-0"> <div
<CardTitle className="text-lg truncate text-slate-900 dark:text-white">{tag.name}</CardTitle> className="h-9 w-9 shrink-0 rounded-xl border border-slate-200 dark:border-slate-700"
<p className="text-sm text-slate-500 dark:text-slate-400">{tag.color || DEFAULT_COLOR}</p> style={{ backgroundColor: tag.color || DEFAULT_COLOR }}
/>
<div className="min-w-0">
<CardTitle className="truncate text-base text-slate-900 dark:text-white">{tag.name}</CardTitle>
</div>
</div> </div>
</div>
{(canEditTag || canDeleteTag) && ( {(canEditTag || canDeleteTag) && (
<div className="flex items-center gap-2"> <div className="flex shrink-0 items-center gap-1">
{canEditTag && ( {canEditTag && (
<Button variant="ghost" size="icon" onClick={() => openEditModal(tag)} title={t.actions?.edit || "Edit"}> <Button variant="ghost" size="icon" onClick={() => openEditModal(tag)} title={t.actions?.edit || "Edit"}>
<Edit2 className="w-4 h-4" /> <Edit2 className="w-4 h-4" />
@@ -200,8 +203,9 @@ export default function Tags() {
<Trash2 className="w-4 h-4 text-red-500" /> <Trash2 className="w-4 h-4 text-red-500" />
</Button> </Button>
)} )}
</div> </div>
)} )}
</div>
</CardContent> </CardContent>
</Card> </Card>
))} ))}