dekun
60 lines
1.8 KiB
TypeScript
60 lines
1.8 KiB
TypeScript
import React from "react";
|
|
import clsx from "clsx";
|
|
|
|
export interface HexagramObj {
|
|
change: boolean | null;
|
|
yang: boolean;
|
|
separate: boolean;
|
|
}
|
|
|
|
function Hexagram(props: { list: HexagramObj[] }) {
|
|
return (
|
|
<div className="flex h-52 w-56 shrink-0 flex-col-reverse gap-1.5 overflow-hidden rounded-md border bg-secondary py-3 shadow-inner dark:border-0 dark:shadow-none sm:h-60 sm:w-72">
|
|
{props.list.map((value, index) => {
|
|
return (
|
|
<div key={index} className="flex flex-col-reverse gap-1.5">
|
|
{value.separate && <div className="h-0.5 sm:h-1" />}
|
|
<Line change={value.change} yang={value.yang} />
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function Line(props: { change: boolean | null; yang: boolean }) {
|
|
let changeYang = props.change && props.yang;
|
|
const color = props.change ? "bg-red-400" : "bg-stone-400";
|
|
return (
|
|
<div className="flex h-[24px] w-full animate-[transform-x_0.3s_ease-out] items-center justify-center sm:h-[29px]">
|
|
{props.yang ? (
|
|
<div className={clsx("h-full w-4/5 sm:w-[83%]", color)}></div>
|
|
) : (
|
|
<div className="flex h-full w-4/5 justify-between sm:w-[83%]">
|
|
<div className={clsx("h-full w-[46%]", color)}></div>
|
|
<div className={clsx("h-full w-[46%]", color)}></div>
|
|
</div>
|
|
)}
|
|
{props.change ? <Change changeYang={changeYang} /> : null}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function Change(props: { changeYang: boolean | null }) {
|
|
return (
|
|
<div className="h-0 w-0">
|
|
<div className="relative -right-1 -top-3">
|
|
{props.changeYang ? (
|
|
<span className="text-sm text-muted-foreground">○</span>
|
|
) : (
|
|
<span className="relative -right-0.5 text-sm text-muted-foreground">
|
|
✕
|
|
</span>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default Hexagram;
|