Inital template

src/components/ui/ServiceIcon.tsx

@@ -0,0 +1,27 @@
+import type { Service } from '../../api/types'
+import { SERVICES } from './services'
+
+const sizes = {
+  sm: 'size-8 rounded-md [&_svg]:size-4',
+  md: 'size-10 rounded-md [&_svg]:size-5',
+  lg: 'size-12 rounded-lg [&_svg]:size-6',
+}
+
+/** Coloured tile with a white icon — the canonical marker for a Stackship resource. */
+export function ServiceIcon({
+  service,
+  size = 'md',
+}: {
+  service: Service
+  size?: keyof typeof sizes
+}) {
+  const { icon: Icon, bg, label } = SERVICES[service]
+  return (
+    <span
+      className={`grid shrink-0 place-items-center text-white shadow-sm ${bg} ${sizes[size]}`}
+      title={label}
+    >
+      <Icon strokeWidth={1.75} />
+    </span>
+  )
+}