Stan Runge
eff5a24985
All checks were successful
Deploy production / deploy (push) Successful in 1m7s
- hardware: slots, sections, usage, install/removal dates, images and a hidden flag on components and devices; setup_photos table; setup_overview view gains the new columns - data: hide the 2021 friends-PC build and the wrong 140mm / unknown fans (kept, not deleted); 7x SL-INF + 3 Kraken stock fans; mice, audio, desk extras; MacBook Pro 16 M2 Pro 1 TB; dates for every swap so the slider can rebuild the setup on any day - self-hosted product images in static/hardware (webp + thumbs) - prices and order details are owner-only (in a popover)
87 lines
2.9 KiB
Svelte
87 lines
2.9 KiB
Svelte
<script lang="ts">
|
|
import Box from 'lucide-svelte/icons/box';
|
|
import CircuitBoard from 'lucide-svelte/icons/circuit-board';
|
|
import Cloud from 'lucide-svelte/icons/cloud';
|
|
import Cpu from 'lucide-svelte/icons/cpu';
|
|
import Fan from 'lucide-svelte/icons/fan';
|
|
import Gamepad2 from 'lucide-svelte/icons/gamepad-2';
|
|
import Gpu from 'lucide-svelte/icons/gpu';
|
|
import HardDrive from 'lucide-svelte/icons/hard-drive';
|
|
import Headphones from 'lucide-svelte/icons/headphones';
|
|
import Keyboard from 'lucide-svelte/icons/keyboard';
|
|
import Laptop from 'lucide-svelte/icons/laptop';
|
|
import Lightbulb from 'lucide-svelte/icons/lightbulb';
|
|
import MemoryStick from 'lucide-svelte/icons/memory-stick';
|
|
import Monitor from 'lucide-svelte/icons/monitor';
|
|
import Mouse from 'lucide-svelte/icons/mouse';
|
|
import Package from 'lucide-svelte/icons/package';
|
|
import PcCase from 'lucide-svelte/icons/pc-case';
|
|
import Server from 'lucide-svelte/icons/server';
|
|
import Smartphone from 'lucide-svelte/icons/smartphone';
|
|
import Snowflake from 'lucide-svelte/icons/snowflake';
|
|
import Speaker from 'lucide-svelte/icons/speaker';
|
|
import Tablet from 'lucide-svelte/icons/tablet';
|
|
import Zap from 'lucide-svelte/icons/zap';
|
|
import Mic from 'lucide-svelte/icons/mic';
|
|
import RectangleHorizontal from 'lucide-svelte/icons/rectangle-horizontal';
|
|
import Webcam from 'lucide-svelte/icons/webcam';
|
|
import Armchair from 'lucide-svelte/icons/armchair';
|
|
import { CATEGORY_META, DEVICE_KIND_META } from './shared';
|
|
|
|
// A gradient tile with a white icon, for a part category or a device kind.
|
|
let {
|
|
category = undefined,
|
|
kind = undefined,
|
|
class: className = 'size-10'
|
|
}: { category?: string; kind?: string; class?: string } = $props();
|
|
|
|
const icons = {
|
|
case: PcCase,
|
|
cpu: Cpu,
|
|
motherboard: CircuitBoard,
|
|
ram: MemoryStick,
|
|
cpu_cooler: Snowflake,
|
|
gpu: Gpu,
|
|
psu: Zap,
|
|
storage: HardDrive,
|
|
fan: Fan,
|
|
lighting: Lightbulb,
|
|
monitor: Monitor,
|
|
mouse: Mouse,
|
|
keyboard: Keyboard,
|
|
headset: Headphones,
|
|
audio: Speaker,
|
|
controller: Gamepad2,
|
|
accessory: Package,
|
|
microphone: Mic,
|
|
mousepad: RectangleHorizontal,
|
|
webcam: Webcam,
|
|
chair: Armchair,
|
|
other: Box,
|
|
desktop: PcCase,
|
|
laptop: Laptop,
|
|
server: Server,
|
|
vm: Cloud,
|
|
phone: Smartphone,
|
|
tablet: Tablet
|
|
} as const;
|
|
const key = $derived(category ?? kind ?? 'other');
|
|
const meta = $derived(
|
|
(category ? CATEGORY_META[category] : kind ? DEVICE_KIND_META[kind] : undefined) ??
|
|
CATEGORY_META.other
|
|
);
|
|
const Icon = $derived(icons[key as keyof typeof icons] ?? Box);
|
|
const light = $derived(
|
|
key === 'case' || key === 'psu' || key === 'controller' || key === 'chair'
|
|
);
|
|
</script>
|
|
|
|
<span
|
|
class="flex shrink-0 items-center justify-center rounded-xl shadow-sm ring-1 ring-black/10 ring-inset {className}"
|
|
style:background-image="linear-gradient(135deg, {meta.from}, {meta.to})"
|
|
style:color={light ? '#111' : '#fff'}
|
|
aria-hidden="true"
|
|
>
|
|
<Icon class="size-[52%]" strokeWidth={2} />
|
|
</span>
|