init

components/Slot.tsx

@@ -0,0 +1,28 @@
+import type { ReactNode } from "react";
+
+const BORDERS = {
+  gold: "from-gold via-gold-dim to-gold",
+  danger: "from-heart via-heart-empty to-heart",
+};
+
+/**
+ * The cut-corner frame used everywhere — an "inventory slot".
+ * Two layers share the same `chamfer` shape: the outer one is the 1px
+ * gradient border, the inner one is the dark fill.
+ *
+ *   className       → outer element (sizing, corner size via [--cut:…])
+ *   innerClassName  → inner element (padding, layout of the contents)
+ */
+export function Slot({ children, className = "", innerClassName = "px-[18px] py-4", tone = "gold", as: Tag = "div" }: {
+  children: ReactNode;
+  className?: string;
+  innerClassName?: string;
+  tone?: keyof typeof BORDERS;
+  as?: "div" | "section" | "li";
+}) {
+  return (
+    <Tag className={`chamfer bg-linear-160 p-px ${BORDERS[tone]} ${className}`}>
+      <div className={`chamfer h-full bg-panel ${innerClassName}`}>{children}</div>
+    </Tag>
+  );
+}