Expandable Dialog

1"use client";
2 
3import * as React from "react";
4import {
5  AnimatePresence,
6  LayoutGroup,
7  motion,
8  useReducedMotion,
9} from "motion/react";
10 
11import { cn } from "@/lib/utils";
12 
13export type ExpandableModalItem = {
14  id: string;
15  title: string;
16  description: string;
17  content: React.ReactNode;
18  image: string;
19  imageAlt?: string;
20  actionLabel?: string;
21};
22 
23export type ExpandableModalProps = Omit<
24  React.ComponentPropsWithoutRef<"div">,
25  "children" | "defaultValue" | "onChange" | "value"
26> & {
27  items?: readonly ExpandableModalItem[];
28  value?: ExpandableModalItem | null;
29  defaultValue?: ExpandableModalItem | null;
30  onValueChange?: (item: ExpandableModalItem | null) => void;
31  onAction?: (item: ExpandableModalItem) => void;
32  actionLabel?: string;
33  modalLabel?: string;
34  listClassName?: string;
35  itemClassName?: string;
36};
37 
38function svgDataUri(svg: string) {
39  return `data:image/svg+xml;utf8,${encodeURIComponent(svg)}`;
40}
41 
42const svgNamespace = ["http", "://www.w3.org/2000/svg"].join("");
43 
44const coverImages = {
45  analytics: svgDataUri(`
46    <svg xmlns="${svgNamespace}" viewBox="0 0 120 120">
47      <defs>
48        <linearGradient id="analytics-bg" x1="0" x2="1" y1="0" y2="1">
49          <stop offset="0" stop-color="#0f172a"/>
50          <stop offset="1" stop-color="#0f766e"/>
51        </linearGradient>
52      </defs>
53      <rect width="120" height="120" rx="24" fill="url(#analytics-bg)"/>
54      <rect x="24" y="26" width="72" height="68" rx="12" fill="#ecfeff" opacity=".92"/>
55      <path d="M36 76l14-16 13 8 21-27" fill="none" stroke="#0f766e" stroke-width="7" stroke-linecap="round" stroke-linejoin="round"/>
56      <circle cx="36" cy="76" r="5" fill="#14b8a6"/>
57      <circle cx="50" cy="60" r="5" fill="#14b8a6"/>
58      <circle cx="63" cy="68" r="5" fill="#14b8a6"/>
59      <circle cx="84" cy="41" r="5" fill="#14b8a6"/>
60    </svg>
61  `),
62  workflow: svgDataUri(`
63    <svg xmlns="${svgNamespace}" viewBox="0 0 120 120">
64      <defs>
65        <linearGradient id="workflow-bg" x1="0" x2="1" y1="0" y2="1">
66          <stop offset="0" stop-color="#312e81"/>
67          <stop offset="1" stop-color="#0369a1"/>
68        </linearGradient>
69      </defs>
70      <rect width="120" height="120" rx="24" fill="url(#workflow-bg)"/>
71      <rect x="25" y="31" width="32" height="23" rx="8" fill="#e0f2fe"/>
72      <rect x="63" y="31" width="32" height="23" rx="8" fill="#bfdbfe"/>
73      <rect x="25" y="67" width="32" height="23" rx="8" fill="#a7f3d0"/>
74// … truncated