Prompt

1import { cva, type VariantProps } from "class-variance-authority";
2import clsx from "clsx";
3import type * as React from "react";
4import { twMerge } from "tailwind-merge";
5 
6const promptsVariants = cva("flex", {
7  variants: {
8    size: {
9      xs: "gap-2",
10      sm: "gap-3",
11      default: "gap-4",
12      md: "gap-4",
13      lg: "gap-5",
14    },
15  },
16  defaultVariants: {
17    size: "default",
18  },
19});
20 
21const promptVariants = cva(
22  "flex flex-col justify-center bg-white border border-gray-200 rounded-lg hover:border-gray-300 hover:shadow-sm transition-all duration-150 cursor-pointer",
23  {
24    variants: {
25      size: {
26        xs: "px-3 py-2 gap-1",
27        sm: "px-4 py-2.5 gap-1.5",
28        default: "px-4 py-3 gap-2",
29        md: "px-5 py-3.5 gap-2",
30        lg: "px-6 py-4 gap-2.5",
31      },
32    },
33    defaultVariants: {
34      size: "default",
35    },
36  },
37);
38 
39const promptTitleVariants = cva("font-medium text-gray-900", {
40  variants: {
41    size: {
42      xs: "text-sm",
43      sm: "text-base",
44      default: "text-base",
45      md: "text-lg",
46      lg: "text-xl",
47    },
48  },
49  defaultVariants: {
50    size: "default",
51  },
52});
53 
54const promptDescriptionVariants = cva("text-gray-600", {
55  variants: {
56    size: {
57      xs: "text-xs",
58      sm: "text-sm",
59      default: "text-sm",
60      md: "text-base",
61      lg: "text-base",
62    },
63  },
64  defaultVariants: {
65    size: "default",
66  },
67});
68 
69export function Prompts({
70  className,
71  size,
72  ...props
73}: React.ComponentProps<"div"> & VariantProps<typeof promptsVariants>) {
74  return (
75    <div
76      data-slot="prompts"
77      className={twMerge(clsx(promptsVariants({ size }), className))}
78      {...props}
79    />
80  );
81}
82 
83export function Prompt({
84  className,
85  size = "default",
86  ...props
87}: React.ComponentProps<"div"> & VariantProps<typeof promptVariants>) {
88  return (
89    <div
90      data-slot="prompt"
91      data-size={size}
92      className={twMerge(clsx(promptVariants({ size, className })))}
93      {...props}
94    />
95  );
96}
97 
98export function PromptTitle({
99  className,
100  size,
101  ...props
102}: React.ComponentProps<"h3"> & VariantProps<typeof promptTitleVariants>) {
103  const computedClassName = size
104    ? twMerge(clsx(promptTitleVariants({ size, className })))
105    : twMerge(
106        clsx(
107          "font-medium text-gray-900",
108          "[div[data-size='xs']_&]:text-sm",
109          "[div[data-size='sm']_&]:text-base",
110          "[div[data-size='default']_&]:text-base",
111          "[div[data-size='md']_&]:text-lg",
112// … truncated