1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
|
import { useState } from "react";
import { cn } from "@/utils/ui";
import { HugeiconsIcon } from "@hugeicons/react";
import { ArrowDownIcon } from "@hugeicons/core-free-icons";
interface PropertyItemProps {
direction?: "row" | "column";
children: React.ReactNode;
className?: string;
}
export function PropertyItem({
direction = "row",
children,
className,
}: PropertyItemProps) {
return (
<div
className={cn(
"flex gap-2",
direction === "row"
? "items-center justify-between gap-6"
: "flex-col gap-1.5",
className,
)}
>
{children}
</div>
);
}
export function PropertyItemLabel({
children,
className,
}: {
children: React.ReactNode;
className?: string;
}) {
return (
<span className={cn("text-muted-foreground text-xs", className)}>
{children}
</span>
);
}
export function PropertyItemValue({
children,
className,
}: {
children: React.ReactNode;
className?: string;
}) {
return <div className={cn("flex-1 text-sm", className)}>{children}</div>;
}
interface PropertyGroupProps {
title: string;
children: React.ReactNode;
defaultExpanded?: boolean;
className?: string;
titleClassName?: string;
}
export function PropertyGroup({
title,
children,
defaultExpanded = true,
className,
titleClassName,
}: PropertyGroupProps) {
const [isExpanded, setIsExpanded] = useState(defaultExpanded);
return (
<PropertyItem direction="column" className={cn("gap-3", className)}>
<button
type="button"
className="flex items-center gap-1.5 cursor-pointer"
onClick={() => setIsExpanded(!isExpanded)}
>
<PropertyItemLabel className={cn(titleClassName)}>
{title}
</PropertyItemLabel>
<HugeiconsIcon
icon={ArrowDownIcon}
className={cn("size-3", !isExpanded && "-rotate-90")}
/>
</button>
{isExpanded && <PropertyItemValue>{children}</PropertyItemValue>}
</PropertyItem>
);
}
|
