astro-ui/lib/details/Details.astro at main · david1gp/astro-ui · GitHub

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
---
import Icon from "~ui/icon/Icon.astro"
import { classArr } from "~ui/utils/classArr"
import { classMerge } from "~ui/utils/classMerge"
import { mdiChevronDown } from "@adaptive-ds/mdi/mdiChevronDown.js"
import type { HTMLAttributes } from "astro/types"

interface Props {
  icon?: string
  title?: string
  subtitle?: string
  class?: string
  summaryClass?: string
  restProps?: HTMLAttributes<"details">
  summaryProps?: HTMLAttributes<"summary">
}
const p = Astro.props
const icon = p.icon
const title = p.title
const subtitle = p.subtitle
const hasSummary = Astro.slots.has("summary")
---

<details
  class={classMerge(
    "group",
    "bg-white dark:bg-gray-800",
    "rounded-lg border border-gray-200",
    "shadow-sm",
    "overflow-hidden",
    p.class,
  )}
  {...p.restProps}
>
  <summary
    class={classMerge(
      "flex flex-col sm:flex-row items-center justify-between gap-4",
      "p-4 sm:p-6",
      "cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors",
      p.summaryClass,
    )}
    {...p.summaryProps}
  >
    {
      !hasSummary && title && (
        <>
          {icon && <Icon path={icon} class="size-7 mt-1" />}
          <span class="flex-1">
            <h3 class={"text-xl font-semibold"}>{title}</h3>
            {subtitle && <span class={"text-muted-foreground mt-1"}>{subtitle}</span>}
          </span>
        </>
      )
    }
    <slot name="summary" />
    <Icon
      path={mdiChevronDown}
      class={classArr("size-7", "text-gray-400 dark:text-gray-600", "transition-transform group-open:rotate-180")}
    />
  </summary>
  <slot />
</details>