29 lines
958 B
TypeScript
29 lines
958 B
TypeScript
|
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>
|
||
|
|
);
|
||
|
|
}
|