65 lines
1.3 KiB
TypeScript
65 lines
1.3 KiB
TypeScript
"use client";
|
|
|
|
import React, { useMemo } from "react";
|
|
|
|
interface StateItem {
|
|
state: number | string;
|
|
text: string;
|
|
backgroundColor?: string;
|
|
textColor?: string;
|
|
}
|
|
|
|
interface PropsStateActive {
|
|
isBox?: boolean;
|
|
stateActive: number | string;
|
|
listState: StateItem[];
|
|
}
|
|
|
|
function StateActive({
|
|
isBox = true,
|
|
stateActive,
|
|
listState,
|
|
}: PropsStateActive) {
|
|
// memo trạng thái hiện tại
|
|
const current = useMemo(() => {
|
|
return listState.find((item) => item.state === stateActive);
|
|
}, [stateActive, listState]);
|
|
|
|
if (isBox) {
|
|
return (
|
|
<div
|
|
className="
|
|
w-fit rounded-full text-sm font-normal
|
|
"
|
|
style={{
|
|
color: current?.textColor ?? "#202939",
|
|
backgroundColor: current?.backgroundColor,
|
|
padding: current?.backgroundColor ? "6px 12px" : undefined,
|
|
}}
|
|
>
|
|
{current?.text ?? "---"}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="flex items-center gap-1.5 w-fit">
|
|
{/* DOT */}
|
|
<div
|
|
className="w-3 h-3 rounded-full"
|
|
style={{ backgroundColor: current?.backgroundColor }}
|
|
/>
|
|
|
|
{/* TEXT */}
|
|
<p
|
|
className="text-sm font-medium"
|
|
style={{ color: current?.textColor ?? "#23262f" }}
|
|
>
|
|
{current?.text ?? "---"}
|
|
</p>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default StateActive;
|