update properties components

Author: davemooreuws

src/components/Properties.tsx

@@ -0,0 +1,88 @@
+'use client'
+
+import { useState } from 'react'
+import { Button } from './ui/button'
+import { MinusCircleIcon, PlusCircleIcon } from '@heroicons/react/24/outline'
+import { Tag } from './Tag'
+import { cn } from '@/lib/utils'
+
+export function Properties({
+  children,
+  nested,
+}: {
+  children: React.ReactNode
+  nested?: boolean
+}) {
+  const [open, setOpen] = useState(false)
+
+  const content = (
+    <ul
+      role="list"
+      className="m-0 max-w-[calc(theme(maxWidth.lg)-theme(spacing.8))] list-none divide-y divide-zinc-900/5 p-0 dark:divide-white/5"
+    >
+      {children}
+    </ul>
+  )
+
+  return nested ? (
+    <li>
+      <Button
+        onClick={() => setOpen(!open)}
+        variant="outline"
+        className="mt-4 flex items-center gap-2"
+      >
+        {open ? (
+          <MinusCircleIcon className="h-5 w-5" />
+        ) : (
+          <PlusCircleIcon className="h-5 w-5" />
+        )}
+        {open ? 'Hide' : 'Show'} accepted values
+      </Button>
+      <div className={cn('mt-4 rounded-lg border p-4', !open && 'sr-only')}>
+        {content}
+      </div>
+    </li>
+  ) : (
+    <div className={'my-6'}>{content}</div>
+  )
+}
+
+interface PropertyProps {
+  name: string
+  type: string
+  children: React.ReactNode
+  required: boolean
+}
+
+export function Property({ name, type, children, required }: PropertyProps) {
+  return (
+    <li className="m-0 px-0 py-4 first:pt-0 last:pb-0">
+      <dl className="m-0 flex flex-wrap items-center gap-x-3 gap-y-2">
+        <dt className="sr-only">Name</dt>
+        <dd>
+          <code>{name}</code>
+        </dd>
+        <dt className="sr-only">{required ? 'Required' : 'Optional'}</dt>
+        <dd>
+          {required ? (
+            <Tag color="amber" className="rounded-md py-0.5 uppercase">
+              Required
+            </Tag>
+          ) : (
+            <span className="mt-0.5 font-mono text-xs text-zinc-400 dark:text-zinc-500">
+              Optional
+            </span>
+          )}
+        </dd>
+        <dt className="sr-only">Type</dt>
+        <dd className="mt-0.5 flex font-mono text-xs text-zinc-400 dark:text-zinc-500">
+          {type}
+        </dd>
+        <dt className="sr-only">Description</dt>
+        <dd className="w-full flex-none [&>:first-child]:mt-0 [&>:last-child]:mb-0">
+          {children}
+        </dd>
+      </dl>
+    </li>
+  )
+}

src/components/Tag.tsx

@@ -1,3 +1,4 @@
+import { cn } from '@/lib/utils'
 import clsx from 'clsx'
 
 const variantStyles = {
@@ -43,18 +44,21 @@ const valueColorMap = {
 export function Tag({
   children,
   variant = 'medium',
-  color = valueColorMap[children] ?? 'emerald',
+  color = valueColorMap[children] ?? 'zinc',
+  className = '',
 }: {
   children: keyof typeof valueColorMap & (string | {})
   variant?: keyof typeof variantStyles
   color?: keyof typeof colorStyles
+  className?: string
 }) {
   return (
     <span
-      className={clsx(
+      className={cn(
         'font-mono text-[0.625rem] font-semibold leading-6',
         variantStyles[variant],
         colorStyles[color][variant],
+        className,
       )}
     >
       {children}

src/components/mdx.tsx

@@ -1,6 +1,10 @@
 import Link from 'next/link'
 import clsx from 'clsx'
 import { Table } from '@/components/ui/table'
+import { Tag } from './Tag'
+import { Button } from './ui/button'
+import { MinusCircleIcon, PlusCircleIcon } from '@heroicons/react/24/outline'
+import { useState } from 'react'
 
 export {
   TableHead as th,
@@ -92,51 +96,7 @@ export function Col({
   )
 }
 
-export function Properties({ children }: { children: React.ReactNode }) {
-  return (
-    <div className="my-6">
-      <ul
-        role="list"
-        className="m-0 max-w-[calc(theme(maxWidth.lg)-theme(spacing.8))] list-none divide-y divide-zinc-900/5 p-0 dark:divide-white/5"
-      >
-        {children}
-      </ul>
-    </div>
-  )
-}
-
-export function Property({
-  name,
-  children,
-  type,
-}: {
-  name: string
-  children: React.ReactNode
-  type?: string
-}) {
-  return (
-    <li className="m-0 px-0 py-4 first:pt-0 last:pb-0">
-      <dl className="m-0 flex flex-wrap items-center gap-x-3 gap-y-2">
-        <dt className="sr-only">Name</dt>
-        <dd>
-          <code>{name}</code>
-        </dd>
-        {type && (
-          <>
-            <dt className="sr-only">Type</dt>
-            <dd className="font-mono text-xs text-zinc-400 dark:text-zinc-500">
-              {type}
-            </dd>
-          </>
-        )}
-        <dt className="sr-only">Description</dt>
-        <dd className="w-full flex-none [&>:first-child]:mt-0 [&>:last-child]:mb-0">
-          {children}
-        </dd>
-      </dl>
-    </li>
-  )
-}
+export { Properties, Property } from './Properties'
 
 export { OSTabs } from '@/components/OSTabs'