Description List

pnpm dlx shadcn@latest add @whereui/description-list

import {  DescriptionList,  DescriptionTerm,  DescriptionDetails,} from "@/components/ui/description-list"<DescriptionList>  <DescriptionTerm>ตำแหน่ง</DescriptionTerm>  <DescriptionDetails>นักวิเคราะห์งานบุคคล</DescriptionDetails></DescriptionList>

import * as React from "react"import { cn } from "cn"// รายการ ป้าย:ค่า สำหรับหน้ารายละเอียด — จอแคบเรียงแนวตั้ง ตั้งแต่ sm เป็นสองคอลัมน์function DescriptionList({  className,  ...props}: React.ComponentProps<"dl">) {  return (    <dl      data-slot="description-list"      className={cn(        "grid grid-cols-1 gap-x-6 gap-y-2 sm:grid-cols-[12rem_1fr] sm:gap-y-3",        className      )}      {...props}    />  )}function DescriptionTerm({  className,  ...props}: React.ComponentProps<"dt">) {  return (    <dt      data-slot="description-term"      className={cn("text-sm text-muted-foreground sm:py-0.5", className)}      {...props}    />  )}function DescriptionDetails({  className,  ...props}: React.ComponentProps<"dd">) {  return (    <dd      data-slot="description-details"      className={cn("m-0 text-sm text-foreground", className)}      {...props}    />  )}export { DescriptionList, DescriptionTerm, DescriptionDetails }