blob: 494cbe4eca3fd3491808f7b3a16d46aff0a3e07c (
plain) (
blame)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
|
<script lang="ts">
interface Props {
name: string;
tooltip?: string | null;
style: string;
}
let { name, tooltip, style }: Props = $props();
</script>
<div class="flex items-center rounded-sm border p-0.5 {style}" title={tooltip}>
{#if style === 'female'}
<span class="icon-xs icon-[material-symbols--female] -mx-[3px]"></span>
{:else if style === 'male'}
<span class="icon-xs icon-[material-symbols--male] -mx-px"></span>
{:else if style === 'trans'}
<span class="icon-xs icon-[material-symbols--transgender]"></span>
{:else if style === 'location'}
<span class="icon-xs icon-[material-symbols--location-on-outline]"></span>
{:else if style === 'artist'}
<span class="icon-xs icon-[material-symbols--person] -mx-px"></span>
{:else if style === 'character'}
<span class="icon-xs icon-[material-symbols--face]"></span>
{:else if style === 'circle'}
<span class="icon-xs icon-[material-symbols--group] mx-px"></span>
{:else if style === 'world'}
<span class="icon-xs icon-[material-symbols--public]"></span>
{/if}
<span>{name}</span>
</div>
<style lang="postcss">
@reference "tailwindcss/theme";
div {
@apply border-zinc-700 bg-zinc-700/20 text-zinc-300;
}
.female {
@apply border-pink-800 bg-pink-800/20 text-pink-200;
}
.male {
@apply border-blue-800 bg-blue-800/20 text-blue-200;
}
.trans {
@apply border-violet-800 bg-violet-800/20 text-violet-200;
}
.mixed {
@apply border-amber-800 bg-amber-800/20 text-amber-200;
}
.location {
@apply border-sky-800 bg-sky-800/20 text-sky-200;
}
</style>
|
