HeroUI Disclosure Group

"use client"

import type { CSSProperties } from "react"
import { Apple, QrCode } from "lucide-react"
import { Button, Separator } from "@heroui/react"
import { DisclosureGroup, Disclosure } from "@/components/ui/heroui-disclosure-group"

const disclosureColors = {
  "--accent": "oklch(62.04% 0.195 253.83)",
  "--accent-hover": "oklch(55.6% 0.205 253.83)",
  "--accent-foreground": "oklch(99.11% 0 0)",
  "--heroui-disclosure-muted": "oklch(55.2% 0.016 285.938)",
  "--heroui-disclosure-border": "oklch(89.4% 0.004 286.32)",
  "--heroui-disclosure-surface": "oklch(100% 0 0)",
} as CSSProperties

const mutedText = {
  color: "oklch(45.2% 0.016 285.938)",
} as CSSProperties

export default function Default() {
  const qrCodeUrl =
    "https://heroui-assets.nyc3.cdn.digitaloceanspaces.com/images/qr-code-native.png"

  return (
    <div className="heroui-disclosure-demo w-full max-w-md" style={disclosureColors}>
      <div className="flex flex-col gap-4 bg-transparent p-4">
        <DisclosureGroup defaultExpandedKeys={["preview"]}>
          <Disclosure aria-label="Preview HeroUI Native" id="preview">
            <Disclosure.Heading>
              <Button slot="trigger" variant="secondary" className="w-full border-none">
                <div className="flex w-full items-center justify-start gap-2">
                  <QrCode className="size-4" />
                  Preview HeroUI Native
                </div>
                <Disclosure.Indicator style={mutedText} />
              </Button>
            </Disclosure.Heading>
            <Disclosure.Content>
              <Disclosure.Body className="mx-2 flex flex-col items-center gap-2 p-4 text-center">
                <p className="text-sm" style={mutedText}>
                  Scan this QR code with your camera app to preview the HeroUI native components.
                </p>
                <img
                  alt="Expo Go QR Code"
                  className="aspect-square w-full max-w-54 object-cover"
                  src={qrCodeUrl}
                />
                <p className="text-sm" style={mutedText}>Expo must be installed on your device.</p>
                <Button className="mt-4" variant="primary">
                  Preview on Expo Go
                </Button>
              </Disclosure.Body>
            </Disclosure.Content>
          </Disclosure>
          <Separator className="my-2" />
          <Disclosure id="download">
            <Disclosure.Heading aria-label="Download HeroUI Native">
              <Button slot="trigger" variant="tertiary" className="w-full border-none bg-transparent">
                <div className="flex w-full items-center justify-start gap-2">
                  <Apple className="size-4" />
                  Download App
                </div>
                <Disclosure.Indicator style={mutedText} />
              </Button>
            </Disclosure.Heading>
            <Disclosure.Content>
              <Disclosure.Body className="mx-2 flex flex-col items-center gap-2 p-4 text-center">
                <p className="text-sm" style={mutedText}>
                  Download the HeroUI native app to explore our mobile components directly on your
                  device.
                </p>
                <img
                  alt="App Store QR Code"
                  className="aspect-square w-full max-w-54 object-cover"
                  src={qrCodeUrl}
                />
                <p className="text-sm" style={mutedText}>Available on iOS and Android devices.</p>
                <Button className="mt-4" variant="primary">
                  <Apple className="size-4" />
                  Download on App Store
                </Button>
              </Disclosure.Body>
            </Disclosure.Content>
          </Disclosure>
        </DisclosureGroup>
      </div>
    </div>
  )
}