adilallo
47 lines
1.3 KiB
TypeScript
47 lines
1.3 KiB
TypeScript
"use client";
|
|
|
|
import { memo } from "react";
|
|
import type { DividerViewProps } from "./Divider.types";
|
|
|
|
const lineColor: Record<"content" | "menu", string> = {
|
|
content: "bg-[var(--color-border-default-secondary)]",
|
|
menu: "bg-[var(--color-border-default-tertiary)]",
|
|
};
|
|
|
|
/**
|
|
* Figma: "Utility / Divider" — horizontal Content (6894:22988), vertical Content
|
|
* (6894:22990), Menu horizontal (450:1940), Menu vertical (2002:30943).
|
|
*/
|
|
export const DividerView = memo(function DividerView({
|
|
orientation = "horizontal",
|
|
type: dividerType = "content",
|
|
className = "",
|
|
}: DividerViewProps) {
|
|
const color = lineColor[dividerType];
|
|
|
|
if (orientation === "vertical") {
|
|
return (
|
|
<div
|
|
className={`w-px shrink-0 self-stretch ${color} ${className}`}
|
|
data-figma-node={dividerType === "content" ? "6894:22990" : "2002:30943"}
|
|
aria-hidden="true"
|
|
/>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div
|
|
className={`flex w-full flex-col items-center ${className}`}
|
|
data-figma-node={dividerType === "content" ? "6894:22988" : "450:1940"}
|
|
>
|
|
<div
|
|
className={`h-px w-full shrink-0 ${color}`}
|
|
data-figma-node={dividerType === "content" ? "6894:22989" : "2002:30856"}
|
|
aria-hidden="true"
|
|
/>
|
|
</div>
|
|
);
|
|
});
|
|
|
|
DividerView.displayName = "DividerView";
|