Info List

1import { cn } from "@/lib/utils"
2import { Slot } from "@radix-ui/react-slot"
3 
4export function InfoList({ className, ...props }: React.ComponentProps<"ul">) {
5  return (
6    <ul
7      className={cn("flex flex-col gap-2", className)}
8      data-slot="info-list"
9      {...props}
10    />
11  )
12}
13 
14export function InfoListItem({
15  className,
16  ...props
17}: React.ComponentProps<"li">) {
18  return (
19    <li
20      className={cn(
21        "flex gap-4 has-[*[data-slot='header']]:flex-col",
22        className
23      )}
24      data-slot="info-list-item"
25      {...props}
26    />
27  )
28}
29 
30export function InfoListHeader({
31  className,
32  ...props
33}: React.ComponentProps<"header">) {
34  return (
35    <header
36      className={cn("flex gap-4", className)}
37      data-slot="info-list-header"
38      {...props}
39    />
40  )
41}
42 
43export function InfoListIcon({
44  className,
45  ...props
46}: React.ComponentProps<"span">) {
47  return (
48    <span
49      className={cn(
50        "flex h-[1lh] flex-none items-center [&>svg]:size-[1em]",
51        className
52      )}
53      data-slot="info-list-icon"
54      {...props}
55    />
56  )
57}
58 
59export function InfoListText({
60  className,
61  asChild,
62  ...props
63}: React.ComponentProps<"p"> & { asChild?: boolean }) {
64  const Comp = asChild ? Slot : "p"
65  return (
66    <Comp
67      className={cn("text-pretty", className)}
68      data-slot="info-list-text"
69      {...props}
70    />
71  )
72}