Stan Runge
e24ee7f95d
All checks were successful
Deploy production / deploy (push) Successful in 1m19s
Owner-only tracker for learning the Cargill Bioindustrial plant in Gouda: schema plant (entries, links with confidence, pending refs), plant.apply_entries bulk import, overview with clusters and flow diagram, kind tabs, glossary, questions, detail pages and owner inline editing. Docs in docs/plant-tracker.md.
52 lines
1.6 KiB
Svelte
52 lines
1.6 KiB
Svelte
<script lang="ts">
|
|
// A small gradient tile with the kind's icon (colourful icons on a black-and-white page).
|
|
import { KIND_COLOR, KIND_LABEL, type PlantKind } from '#lib/plant.js';
|
|
import Workflow from 'lucide-svelte/icons/workflow';
|
|
import Package from 'lucide-svelte/icons/package';
|
|
import Building2 from 'lucide-svelte/icons/building-2';
|
|
import Wrench from 'lucide-svelte/icons/wrench';
|
|
import BookA from 'lucide-svelte/icons/book-a';
|
|
import CircleQuestionMark from 'lucide-svelte/icons/circle-question-mark';
|
|
import StickyNote from 'lucide-svelte/icons/sticky-note';
|
|
import UserRound from 'lucide-svelte/icons/user-round';
|
|
|
|
let { kind, size = 22 }: { kind: PlantKind; size?: number } = $props();
|
|
|
|
const ICONS = {
|
|
process_step: Workflow,
|
|
product: Package,
|
|
department: Building2,
|
|
equipment: Wrench,
|
|
glossary: BookA,
|
|
question: CircleQuestionMark,
|
|
note: StickyNote,
|
|
person_role: UserRound
|
|
} as const;
|
|
const Icon = $derived(ICONS[kind] ?? StickyNote);
|
|
const colors = $derived(KIND_COLOR[kind] ?? KIND_COLOR.note);
|
|
</script>
|
|
|
|
<span
|
|
class="kind-icon"
|
|
style:--from={colors[0]}
|
|
style:--to={colors[1]}
|
|
style:--size="{size}px"
|
|
title={KIND_LABEL[kind]?.one ?? kind}
|
|
aria-hidden="true"><Icon size={Math.round(size * 0.58)} strokeWidth={2.25} /></span
|
|
>
|
|
|
|
<style>
|
|
.kind-icon {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex-shrink: 0;
|
|
width: var(--size);
|
|
height: var(--size);
|
|
border-radius: calc(var(--size) * 0.3);
|
|
color: #fff;
|
|
background: linear-gradient(135deg, var(--from), var(--to));
|
|
box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.12);
|
|
}
|
|
</style>
|