diff options
Diffstat (limited to 'frontend/src/lib/pills')
| -rw-r--r-- | frontend/src/lib/pills/AssociationPill.svelte | 30 | ||||
| -rw-r--r-- | frontend/src/lib/pills/ComicPills.svelte | 37 | ||||
| -rw-r--r-- | frontend/src/lib/pills/FooterPill.svelte | 15 | ||||
| -rw-r--r-- | frontend/src/lib/pills/Pill.svelte | 75 | ||||
| -rw-r--r-- | frontend/src/lib/pills/TagPill.svelte | 44 |
5 files changed, 84 insertions, 117 deletions
diff --git a/frontend/src/lib/pills/AssociationPill.svelte b/frontend/src/lib/pills/AssociationPill.svelte deleted file mode 100644 index 85dbe39..0000000 --- a/frontend/src/lib/pills/AssociationPill.svelte +++ /dev/null @@ -1,30 +0,0 @@ -<script lang="ts"> - import Pill from './Pill.svelte'; - - type Association = 'artist' | 'circle' | 'world' | 'character'; - - export let name: string; - export let type: Association; -</script> - -<Pill {name}> - <span class={`${type} icon-xs`} slot="icon" /> -</Pill> - -<style lang="postcss"> - .artist { - @apply icon-[material-symbols--person] -mx-px; - } - - .character { - @apply icon-[material-symbols--face]; - } - - .circle { - @apply icon-[material-symbols--group] mx-px; - } - - .world { - @apply icon-[material-symbols--public]; - } -</style> diff --git a/frontend/src/lib/pills/ComicPills.svelte b/frontend/src/lib/pills/ComicPills.svelte deleted file mode 100644 index 671bbf2..0000000 --- a/frontend/src/lib/pills/ComicPills.svelte +++ /dev/null @@ -1,37 +0,0 @@ -<script lang="ts"> - import type { ComicFragment } from '$gql/graphql'; - import AssociationPill from '$lib/pills/AssociationPill.svelte'; - import TagPill from '$lib/pills/TagPill.svelte'; - - export let comic: ComicFragment; -</script> - -<div class="flex flex-col gap-1"> - {#if comic.artists.length || comic.circles.length} - <div class="flex flex-wrap gap-1"> - {#each comic.artists as { name } (name)} - <AssociationPill {name} type="artist" /> - {/each} - {#each comic.circles as { name } (name)} - <AssociationPill {name} type="circle" /> - {/each} - </div> - {/if} - {#if comic.characters.length || comic.worlds.length} - <div class="flex flex-wrap gap-1"> - {#each comic.worlds as { name } (name)} - <AssociationPill {name} type="world" /> - {/each} - {#each comic.characters as { name } (name)} - <AssociationPill {name} type="character" /> - {/each} - </div> - {/if} - {#if comic.tags.length} - <div class="flex flex-wrap gap-1"> - {#each comic.tags as { name, description } (name)} - <TagPill {name} {description} /> - {/each} - </div> - {/if} -</div> diff --git a/frontend/src/lib/pills/FooterPill.svelte b/frontend/src/lib/pills/FooterPill.svelte new file mode 100644 index 0000000..3da1811 --- /dev/null +++ b/frontend/src/lib/pills/FooterPill.svelte @@ -0,0 +1,15 @@ +<script lang="ts"> + import type { Snippet } from 'svelte'; + + interface Props { + text: string; + icon?: Snippet; + } + + let { text, icon }: Props = $props(); +</script> + +<div class="flex items-center rounded-sm p-0.5 text-zinc-300"> + {@render icon?.()} + <span>{text}</span> +</div> diff --git a/frontend/src/lib/pills/Pill.svelte b/frontend/src/lib/pills/Pill.svelte index 7aa9670..98d9b5a 100644 --- a/frontend/src/lib/pills/Pill.svelte +++ b/frontend/src/lib/pills/Pill.svelte @@ -1,40 +1,83 @@ -<script lang="ts" context="module"> - export type PillColour = 'pink' | 'blue' | 'violet' | 'amber' | 'zinc' | 'sky'; -</script> - <script lang="ts"> - export let name: string; - export let tooltip: string | null | undefined = undefined; - export let colour: PillColour = 'zinc'; + interface Props { + name: string; + tooltip?: string | null; + style: string; + highlight?: boolean; + } + + let { name, tooltip, style, highlight = false }: Props = $props(); </script> -<div class="flex items-center rounded border p-0.5 {colour}" title={tooltip}> - <slot name="icon" /> +<div class:highlight 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"> - .pink { + @reference "tailwindcss/theme"; + + div { + @apply border-zinc-700 bg-zinc-700/20 text-zinc-300; + } + + div.highlight { + @apply transition-colors hover:border-zinc-600 hover:bg-zinc-500/20 hover:text-zinc-200; + } + + .female { @apply border-pink-800 bg-pink-800/20 text-pink-200; } - .blue { + .female.highlight { + @apply hover:border-pink-700 hover:bg-pink-600/20 hover:text-pink-100; + } + + .male { @apply border-blue-800 bg-blue-800/20 text-blue-200; } - .violet { + .male.highlight { + @apply hover:border-blue-700 hover:bg-blue-600/20 hover:text-blue-100; + } + + .trans { @apply border-violet-800 bg-violet-800/20 text-violet-200; } - .amber { + .trans.highlight { + @apply hover:border-violet-600 hover:bg-violet-600/20 hover:text-violet-100; + } + + .mixed { @apply border-amber-800 bg-amber-800/20 text-amber-200; } - .sky { + .mixed.highlight { + @apply hover:border-amber-700 hover:bg-amber-600/20 hover:text-amber-100; + } + + .location { @apply border-sky-800 bg-sky-800/20 text-sky-200; } - .zinc { - @apply border-zinc-700 bg-zinc-700/20 text-zinc-300; + .location.highlight { + @apply hover:border-sky-700 hover:bg-sky-600/20 hover:text-sky-100; } </style> diff --git a/frontend/src/lib/pills/TagPill.svelte b/frontend/src/lib/pills/TagPill.svelte index 60221bd..bbd3c55 100644 --- a/frontend/src/lib/pills/TagPill.svelte +++ b/frontend/src/lib/pills/TagPill.svelte @@ -1,40 +1,16 @@ <script lang="ts"> - import Female from '$lib/icons/Female.svelte'; - import Location from '$lib/icons/Location.svelte'; - import Male from '$lib/icons/Male.svelte'; - import Transgender from '$lib/icons/Transgender.svelte'; - import { SvelteComponent } from 'svelte'; - import Pill, { type PillColour } from './Pill.svelte'; + import type { ComicTag } from '$gql/graphql'; + import { joinText } from '$lib/Utils'; + import Pill from './Pill.svelte'; - export let name: string; - export let description: string | undefined | null = undefined; - - let [namespace, tag] = name.split(':'); - - const styles: Record<string, PillColour> = { - female: 'pink', - male: 'blue', - trans: 'violet', - mixed: 'amber', - location: 'sky', - rest: 'zinc' - }; - - const icons: Record<string, typeof SvelteComponent<Record<string, unknown>>> = { - female: Female, - male: Male, - trans: Transgender, - location: Location - }; + interface Props extends Pick<ComicTag, 'name' | 'description'> { + highlight?: boolean; + } - const colour = styles[namespace] ?? styles.rest; - const icon = icons[namespace]; + let { name, description, highlight = false }: Props = $props(); - function formatTooltip() { - return [name, description].filter((v) => v).join('\n\n'); - } + let [namespace, tag] = name.split(':'); + let tooltip = joinText([name, description], '\n\n'); </script> -<Pill name={tag} tooltip={formatTooltip()} {colour}> - <svelte:component this={icon} slot="icon" /> -</Pill> +<Pill {highlight} name={tag} style={namespace} {tooltip}></Pill> |