Expandable

1'use client'
2 
3import { useState } from 'react'
4import {
5  Bug,
6  ChevronDown,
7  Megaphone,
8  Sparkles,
9  Zap,
10  type LucideIcon,
11} from 'lucide-react'
12 
13import { Button } from '@/components/ui/button'
14import { cn } from '@/lib/utils'
15 
16const highlights: { icon: LucideIcon; title: string; body: string }[] = [
17  {
18    icon: Sparkles,
19    title: 'Command palette',
20    body: 'Jump to anything with ⌘K — pages, settings, and actions.',
21  },
22  {
23    icon: Zap,
24    title: '3× faster boards',
25    body: 'Large workspaces now load in a fraction of the time.',
26  },
27  {
28    icon: Bug,
29    title: 'Filter fix',
30    body: 'Filters no longer reset when navigating between views.',
31  },
32]
33 
34export function Banner07() {
35  const [open, setOpen] = useState(false)
36 
37  return (
38    <div className="bg-card w-full overflow-hidden rounded-lg border shadow-sm">
39      <button
40        type="button"
41        onClick={() => setOpen((prev) => !prev)}
42        aria-expanded={open}
43        className="flex w-full items-center gap-3 px-4 py-3 text-left text-sm"
44      >
45        <span className="bg-primary/10 text-primary flex size-8 shrink-0 items-center justify-center rounded-full">
46          <Megaphone className="size-4" />
47        </span>
48        <span className="flex-1">
49          <span className="font-medium">Release 3.0 is here</span>
50          <span className="text-muted-foreground"> — 3 highlights</span>
51        </span>
52        <ChevronDown
53          className={cn(
54            'text-muted-foreground size-4 shrink-0 transition-transform',
55            open && 'rotate-180',
56          )}
57        />
58      </button>
59      <div
60        className={cn(
61          'grid transition-all duration-300',
62          open ? 'grid-rows-[1fr]' : 'grid-rows-[0fr]',
63        )}
64      >
65        <div className="overflow-hidden">
66          <div className="flex flex-col gap-3 border-t px-4 py-4">
67            {highlights.map((item) => {
68              const Icon = item.icon
69              return (
70                <div key={item.title} className="flex items-start gap-3">
71                  <span className="bg-muted text-foreground flex size-7 shrink-0 items-center justify-center rounded-md">
72                    <Icon className="size-3.5" />
73                  </span>
74                  <div className="flex flex-col gap-0.5">
75                    <p className="text-sm font-medium">{item.title}</p>
76                    <p className="text-muted-foreground text-sm">{item.body}</p>
77                  </div>
78// … truncated