mirror of
https://github.com/pocket-id/pocket-id.git
synced 2025-12-16 10:12:58 +03:00
80 lines
1.9 KiB
Svelte
80 lines
1.9 KiB
Svelte
<script lang="ts">
|
|
import { Button } from '$lib/components/ui/button';
|
|
import * as Tooltip from '$lib/components/ui/tooltip/index.js';
|
|
import { m } from '$lib/paraglide/messages';
|
|
import { LucideCalendar, LucidePencil, LucideTrash, type Icon as IconType } from '@lucide/svelte';
|
|
|
|
let {
|
|
icon,
|
|
onRename,
|
|
onDelete,
|
|
label,
|
|
description
|
|
}: {
|
|
icon: typeof IconType;
|
|
onRename: () => void;
|
|
onDelete: () => void;
|
|
description?: string;
|
|
label?: string;
|
|
} = $props();
|
|
</script>
|
|
|
|
<div class="bg-card hover:bg-muted/50 group rounded-lg p-3 transition-colors">
|
|
<div class="flex items-center justify-between">
|
|
<div class="flex items-start gap-3">
|
|
<div class="bg-primary/10 text-primary mt-1 rounded-lg p-2">
|
|
{#if icon}{@const Icon = icon}
|
|
<Icon class="size-5" />
|
|
{/if}
|
|
</div>
|
|
<div>
|
|
<div class="flex items-center gap-2">
|
|
<p class="font-medium">{label}</p>
|
|
</div>
|
|
{#if description}
|
|
<div class="text-muted-foreground mt-1 flex items-center text-xs">
|
|
<LucideCalendar class="mr-1 size-3" />
|
|
{description}
|
|
</div>
|
|
{/if}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex items-center gap-2">
|
|
<Tooltip.Provider>
|
|
<Tooltip.Root>
|
|
<Tooltip.Trigger>
|
|
<Button
|
|
onclick={onRename}
|
|
size="icon"
|
|
variant="ghost"
|
|
class="size-8"
|
|
aria-label={m.rename()}
|
|
>
|
|
<LucidePencil class="size-4" />
|
|
</Button>
|
|
</Tooltip.Trigger>
|
|
<Tooltip.Content>{m.rename()}</Tooltip.Content>
|
|
</Tooltip.Root></Tooltip.Provider
|
|
>
|
|
|
|
<Tooltip.Provider>
|
|
<Tooltip.Root>
|
|
<Tooltip.Trigger>
|
|
<Button
|
|
onclick={onDelete}
|
|
size="icon"
|
|
variant="ghost"
|
|
class="hover:bg-destructive/10 hover:text-destructive size-8"
|
|
aria-label={m.delete()}
|
|
>
|
|
<LucideTrash class="size-4" />
|
|
</Button>
|
|
</Tooltip.Trigger>
|
|
<Tooltip.Content>{m.delete()}</Tooltip.Content>
|
|
</Tooltip.Root></Tooltip.Provider
|
|
>
|
|
</div>
|
|
</div>
|
|
</div>
|