@a5gard/asgard 0.0.1

package/.vscode/ntrsync/.vscode/ocrmnavigator.code-snippets

@@ -0,0 +1,3664 @@
+{
+  "loader_for_redirecting_bad_requests": {
+    "prefix": "loader-for-redirecting-bad-requiests",
+    "description": "Custom snippet from loader-for-redirecting-bad-requiests.snippet.tsx",
+    "scope": "typescript,typescriptreact",
+    "body": [
+      "export async function loader() {  return json({ error: \"GET not allowed\" }, { status: 405 })}"
+    ]
+  },
+  "action_for_redirecting_bad_requests": {
+    "prefix": "action-for-redirecting-bad-requests",
+    "description": "Custom snippet from action-for-redirecting-bad-requests.snippet.tsx",
+    "scope": "typescript,typescriptreact",
+    "body": [
+      "export async function action() {  return json({ error: \"POST not allowed\" }, { status: 405 })}"
+    ]
+  },
+  "submodules_cmds": {
+    "prefix": "submodules-cmds",
+    "description": "Custom snippet from submodules-cmds.snippet.tsx",
+    "scope": "typescript,typescriptreact",
+    "body": [
+      "cd apps/*",
+      "git init",
+      "git remote add origin https://github.com/8an3/crm-prod.git",
+      "git branch -m master main",
+      "git add .",
+      "git commit -m \"Initial commit for dev\"",
+      "git push -u origin main",
+      "Link Submodules Properly in the Main Repo",
+      "cd apps/*",
+      "git submodule init",
+      "git submodule update --remote --recursive",
+      "Push .gitmodules and the Updated Main Repo",
+      "cd F:/OpinionatedCRM",
+      "git add .gitmodules apps/*",
+      "git commit -m \"Added submodules for dev, cal, pdf, prod\"",
+      "git push origin main",
+      "Cloning the Monorepo with Submodules (for future use)",
+      "git clone --recurse-submodules https://github.com/8an3/crm.git"
+    ]
+  },
+  "fresh_vercel_server_also_needs_these_installed": {
+    "prefix": "fresh-vercel-server-also-needs-these-installed",
+    "description": "Custom snippet from fresh-vercel-server-also-needs-these-installed.snippet.tsx",
+    "scope": "typescript,typescriptreact",
+    "body": [
+      "pnpm i base32-decode",
+      "pnpm i jos",
+      "pnpm i webapi",
+      "serverDependenciesToBundle: [",
+      "    \"axios\",",
+      "    \"@azure/msal-react\",",
+      "    \"Path2D\",",
+      "    \"chalk\",",
+      "    'jose',",
+      "    \"crypto\",",
+      "    \"@pdfme\",",
+      "    \"remix-auth-totp\",",
+      "    \"@epic-web/totp\",",
+      "    \"base32-encode\",",
+      "    \"to-data-view\"",
+      "],"
+    ]
+  },
+  "nice_looking_text_classnames": {
+    "prefix": "nice-looking-text-classnames",
+    "description": "Custom snippet from nice-looking-text-classnames.snippet.tsx",
+    "scope": "typescript,typescriptreact",
+    "body": [
+      "<div className=\"prose\">",
+      "  <h1>Header 1</h1>",
+      "  <h2>Header 2</h2>",
+      "  <h3>Header 3</h3>",
+      "  <h4>Header 4</h4>",
+      "  <h5>Header 5</h5>",
+      "  <p>Paragraph text</p>",
+      "</div>",
+      "DO NOT USE BELOW, USE ABOVE INSTEAD",
+      "header 1",
+      "text-3xl font-bold leading-tight tracking-tighter md:text-4xl lg:leading-[1.1]",
+      "header 2",
+      "mt-3 text-muted-foreground text-thin text-center",
+      "header 3",
+      "font-semibold mb-4 mt-4",
+      "p",
+      "text-balance font-light text-foreground text-sm text-thin"
+    ]
+  },
+  "Error_Checking_Action": {
+    "prefix": "error-checking-action",
+    "description": "Custom snippet from error-checking-action.snippet.tsx",
+    "scope": "typescript,typescriptreact",
+    "body": [
+      "// needs to be contained in a <Form method='post' > or else it wont work no fetcher no anything",
+      "const phone = formPayload.phone;",
+      "const phoneRegex = /^[2-9]\\d{2}[2-9]\\d{2}\\d{4}$/;",
+      "const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\\.(ca|com)$/;",
+      "const errors = {",
+      "    username: formPayload.username ? null : \"Full name is required...\",",
+      "    year: formPayload.year.length === 4 ? null : \"Year needs to be a length of 4...\",        ",
+      "    email: formPayload.email ? null : \"Email is required...\",",
+      "    phone: phoneRegex.test(phone) ? null : \"Phone must be in the format 4164164164\",",
+      "    position: formPayload.userRole ? null : 'Position / Role is required...',",
+      "    dept: formPayload.dept ? null : 'Dept is required...',",
+      "    emailFormat: emailRegex.test(formPayload.email) ? null : 'Incorrect email format...',",
+      "    phoneLength: phone.replace(/\\D/g, \"\").length === 10 ? null : 'Incorrect phone # length...', ",
+      "};",
+      "const hasErrors = Object.values(errors).some((errorMessage) => errorMessage);",
+      "if (hasErrors) { return json(errors); }",
+      "{errors?.username ? (<p className=\"text-[#ff0202] flex items-center\">{errors.username}</p>) : null}",
+      "{errors?.email ? (<p className=\"text-[#ff0202] flex items-center\">{errors.email}</p>) : null}",
+      "{errors?.phone ? (<p className=\"text-[#ff0202] flex items-center\">{errors.phone}</p>) : null}",
+      "{errors?.position ? (<p className=\"text-[#ff0202] flex items-center\">{errors.position}</p>) : null}",
+      "{errors?.dept ? (<p className=\"text-[#ff0202] flex items-center\">{errors.dept}</p>) : null}",
+      "{errors?.phoneLength ? (<p className=\"text-[#ff0202] flex items-center\">{errors.phoneLength}</p>) : null}",
+      "{errors?.emailFormat ? (<p className=\"text-[#ff0202] flex items-center\">{errors.emailFormat}</p>) : null}"
+    ]
+  },
+  "map_function": {
+    "prefix": "map_function",
+    "description": "Custom snippet from map-function.snippet.tsx",
+    "scope": "typescript,typescriptreact",
+    "body": [
+      "{categories.map((item, index) => {",
+      "  return (",
+      "    <SelectItem key={index} value={item.value}>",
+      "      {item.name}",
+      "    </SelectItem>",
+      "  );",
+      "})}",
+      "                    <div className='grid gap-4'>",
+      "                      {customerCard.map((item, index) => {",
+      "                        return (",
+      "                          <div className=\"relative  mr-3\" key={index}>",
+      "                            <Input value={item.value} name={item.name} className='w-full' />",
+      "                            <label className=\" text-sm absolute left-3 rounded-full -top-3 px-2 bg-background transition-all peer-placeholder-shown:top-2.5 peer-placeholder-shown:text-gray-400 peer-focus:-top-3 peer-focus:text-blue-500\">",
+      "                              {item.placeholder}",
+      "                            </label>",
+      "                          </div>",
+      "                        );",
+      "                      })}",
+      "                      <Button",
+      "                        size=\"sm\"",
+      "                        variant=\"outline\"",
+      "                        className='ml-auto'",
+      "                        type='submit'",
+      "                        name='intent'",
+      "                        value='editProduct'",
+      "                      >",
+      "                        Save",
+      "                      </Button>",
+      "                    </div>"
+    ]
+  },
+  "cors": {
+    "prefix": "cors",
+    "description": "Custom snippet from cors.snippet.tsx",
+    "scope": "typescript,typescriptreact",
+    "body": [
+      "import { json, type LoaderFunction, redirect } from \"@remix-run/node\";",
+      "import { prisma } from \"~/libs\";",
+      "import { GetUser } from \"~/utils/loader.server\";",
+      "import { getSession } from \"~/sessions/auth-session.server\";",
+      "import { cors } from \"remix-utils\";",
+      "export async function loader({ request, params }: LoaderFunction) {",
+      "  console.log(\"loader was hit\");",
+      "  const session = await getSession(request.headers.get(\"Cookie\"));",
+      "  const email = session.get(\"email\");",
+      "  const user = await GetUser(email);",
+      "  if (!user) return redirect(\"/authportal/auth/login\");",
+      "  try {",
+      "    const salesData = await prisma.clientApts.findMany({",
+      "      where: { userId: user.id },",
+      "      orderBy: { createdAt: \"desc\" },",
+      "      // take: 20,",
+      "    });",
+      "    const Delivery = await prisma.clientApts.findMany({",
+      "      where: { apptStatus: \"Delivery\" },",
+      "      orderBy: { createdAt: \"desc\" },",
+      "    });",
+      "    const clientfiles = await prisma.clientfile.findMany({",
+      "      orderBy: { createdAt: \"desc\" },",
+      "      take: 20,",
+      "    });",
+      "    const data = { salesData, Delivery, clientfiles, user };",
+      "    console.log(data, \"laoder data\");",
+      "    return cors(request, json({ data }), {",
+      "      origin: \"http://localhost:3003\", // Replace with the Vite app's origin",
+      "      methods: [\"GET\", \"POST\", \"PUT\", \"DELETE\", \"OPTIONS\"], // Allowed methods",
+      "      headers: [\"Content-Type\", \"Authorization\"], // Allowed headers",
+      "      credentials: true, // Allow credentials",
+      "    });",
+      "  } catch (error) {",
+      "    console.error(\"Error in getUser route:\", error);",
+      "    return json({ error: \"Internal Server Error\" });",
+      "  }",
+      "}"
+    ]
+  },
+  "toggle_prev_state": {
+    "prefix": "toggle-prev-state",
+    "description": "Custom snippet from toggle-prev-state.snippet.tsx",
+    "scope": "typescript,typescriptreact",
+    "body": [
+      "(prev) => !prev"
+    ]
+  },
+  "links_function": {
+    "prefix": "links_function",
+    "body": [
+      "export const links: LinksFunction = () => {\r\n  return [\r\n    { rel: \"stylesheet\", href: \"/styles/page.css\" },\r\n    { rel: \"preload\", href: \"/images/hero.jpg\", as: \"image\" },\r\n  ];\r\n};"
+    ],
+    "description": "",
+    "scope": "jsx / tsx"
+  },
+  "headers": {
+    "prefix": "headers",
+    "description": "Custom snippet from headers.snippet.tsx",
+    "scope": "typescript,typescriptreact",
+    "body": [
+      "export const headers = ({ loaderHeaders, parentHeaders }) => {",
+      "  return {",
+      "    \"Cache-Control\": \"no-store\",",
+      "    \"Custom-Header\": \"value\",",
+      "  };",
+      "};"
+    ]
+  },
+  "action": {
+    "prefix": "action",
+    "body": [
+      "import { json, redirect, type LoaderArgs, type ActionArgs } from \"@remix-run/node\";\r\nimport { prisma } from \"~/libs\";\r\nimport { authSessionStorage } from \"~/sessions/auth-session.server\";\r\nimport eP from \"~/utils/ext.server\";\r\nimport axios from \"axios\";\r\n\r\nexport async function action({ request }: ActionArgs) {\r\n  const session = await authSessionStorage.getSession(request.headers.get(\"Cookie\"));\r\n  const email = session.get(\"email\");\r\n  const user = await eP.user.simple(email)\r\n  if (!user) { return redirect(process.env.LOGIN); }\r\n\r\n  const d = Object.fromEntries(await request.formData());\r\n  const intent = d.intent\r\n\r\n  try {\r\n    if (intent === 'createFunction') {\r\n      const result = await prisma.Function.create({\r\n        data: {\r\n          ...data\r\n        }\r\n      });\r\n      return json({ success: true, result });\r\n    } else if (intent === 'updateFunction') {\r\n      const result = await prisma.Function.update({\r\n        where: { id: String(id) },\r\n        data\r\n      });\r\n      return json({ success: true, result });\r\n    } else if (intent === 'deleteFunction') {\r\n      const result = await prisma.Function.delete ({\r\n        where: { id: String(id) },\r\n\r\n      });\r\n      return json({ success: true, result });\r\n    } else {\r\n      return json({ success: false, error: \"Invalid intent\" }, { status: 400 });\r\n    }\r\n\r\n  } catch (error) {\r\n    return json({\r\n      success: false,\r\n      error: error instanceof Error ? error.message : \"Unknown error\"\r\n    }, { status: 500 });\r\n  }\r\n}"
+    ],
+    "description": "",
+    "scope": "jsx / tsx"
+  },
+  "session_loader": {
+    "prefix": "session-loader",
+    "description": "Custom snippet from session-loader.snippet.tsx",
+    "scope": "typescript,typescriptreact",
+    "body": [
+      "import { type LoaderFunction, json, redirect } from \"@remix-run/node\";",
+      "import { getSession, commitSession } from \"~/sessions/auth-session.server\";",
+      "export async function loader({ request }: LoaderFunction) {",
+      "  const session = await getSession(request.headers.get(\"Cookie\"));",
+      "  const user = session.get(\"user\");",
+      "  if (!user) {",
+      "    return redirect(\"/login\", {",
+      "      headers: {",
+      "        \"Set-Cookie\": await commitSession(session),",
+      "      },",
+      "    });",
+      "  }",
+      "  return json({ user }, {",
+      "    headers: {",
+      "      \"Set-Cookie\": await commitSession(session),",
+      "    },",
+      "  });",
+      "}"
+    ]
+  },
+  "seo_handle": {
+    "prefix": "seo-handle",
+    "description": "Custom snippet from seo-handle.snippet.tsx",
+    "scope": "typescript,typescriptreact",
+    "body": [
+      "export const handle: SEOHandle = {",
+      "  getSitemapEntries: () => {",
+      "    return [",
+      "      { url: \"/home\", changefreq: \"daily\", priority: 1.0 },",
+      "      { url: \"/about\", changefreq: \"monthly\", priority: 0.8 },",
+      "    ];",
+      "  },",
+      "};"
+    ]
+  },
+  "handle_for_use_with_usematches": {
+    "prefix": "handle-for-use-with-usematches",
+    "description": "Custom snippet from handle-for-use-with-usematches.snippet.tsx",
+    "scope": "typescript,typescriptreact",
+    "body": [
+      "export const handle = {",
+      "  $1,",
+      "};"
+    ]
+  },
+  "error_boundary": {
+    "prefix": "error_boundary",
+    "body": [
+      "export function ErrorBoundary() {\r\n  const error = useRouteError();\r\n  \r\n  if (isRouteErrorResponse(error)) {\r\n    return (\r\n      <div className=\"error-container\">\r\n        <h1>\r\n          {error.status} {error.statusText}\r\n        </h1>\r\n        <p>{error.data}</p>\r\n      </div>\r\n    );\r\n  }\r\n  \r\n  return (\r\n    <div className=\"error-container\">\r\n      <h1>Something went wrong</h1>\r\n      <p>{error?.message || 'Unknown error occurred'}</p>\r\n    </div>\r\n  );\r\n}"
+    ],
+    "description": "",
+    "scope": "jsx / tsx"
+  },
+  "meta_function": {
+    "prefix": "meta_function",
+    "body": [
+      "export const meta: MetaFunction<typeof loader> = ({ data, params }) => {\r\n  return [\r\n    { title: \"Page Title\" },\r\n    { name: \"description\", content: \"Page description\" },\r\n    { name: \"keywords\", content: \"remix, react, typescript\" },\r\n    { property: \"og:title\", content: \"Page Title\" },\r\n    { property: \"og:description\", content: \"Page description\" },\r\n    { property: \"og:type\", content: \"website\" },\r\n  ];\r\n};"
+    ],
+    "description": "",
+    "scope": "jsx / tsx"
+  },
+  "headers_function": {
+    "prefix": "headers-function-static",
+    "description": "Custom snippet from headers-function.snippet.tsx",
+    "scope": "typescript,typescriptreact",
+    "body": [
+      "export const headers = ({ loaderHeaders, parentHeaders }) => {",
+      "  return {",
+      "    \"Content-Type\": \"application/json\",",
+      "  };",
+      "};export const headers = ({ loaderHeaders, parentHeaders }) => {",
+      "    return {",
+      "      \"Content-Type\": \"application/json\",",
+      "    };",
+      "  };"
+    ]
+  },
+  "client_only_with_out_remix_utils": {
+    "prefix": "client_only_with_out_remix-utils",
+    "description": "Custom snippet from client-only-with-out-remix-utils.snippet.tsx",
+    "scope": "typescript,typescriptreact",
+    "body": [
+      "import type { MetaFunction } from '@remix-run/cloudflare';",
+      "import React, { lazy, Suspense } from 'react';",
+      "import 'easymde/dist/easymde.min.css';",
+      "const SimpleMDE = lazy(async () => {",
+      "  const module = await import('react-simplemde-editor');",
+      "  return { default: module.default };",
+      "});",
+      "export const meta: MetaFunction = () => {",
+      "  return { title: 'Simple MDE Editor' };",
+      "};",
+      "export default function Index() {",
+      "  return (",
+      "    <div>",
+      "      <h1>Simple MDE</h1>",
+      "      <Suspense fallback={<div>Loading...</div>}>",
+      "        <SimpleMDE />",
+      "      </Suspense>",
+      "    </div>",
+      "  );",
+      "}"
+    ]
+  },
+  "client_only_with_remix_utils": {
+    "prefix": "client_only_with_remix_utils",
+    "description": "Custom snippet from client-only-with-remix-utils.snippet.tsx",
+    "scope": "typescript,typescriptreact",
+    "body": [
+      "import { ClientOnly } from 'remix-utils';",
+      "export default function MainApp() {",
+      "  return (",
+      "    <div className='h-screen justify-center bg-background'>",
+      "      <ClientOnly fallback={<p>Fallback component ...</p>}>",
+      "        {() => <App />}",
+      "      </ClientOnly>",
+      "    </div>",
+      "  );",
+      "}"
+    ]
+  },
+  "form_appearance": {
+    "prefix": "form_appearance",
+    "description": "Custom snippet from form-appearance.snippet.tsx",
+    "scope": "typescript,typescriptreact",
+    "body": [
+      "import { zodResolver } from \"@hookform/resolvers/zod\"",
+      "import { ChevronDown } from \"lucide-react\"",
+      "import { useForm } from \"react-hook-form\"",
+      "import { z } from \"zod\"",
+      "import { cn } from \"~/components/ui/utils\"",
+      "import { toast } from \"~/hooks/use-toast\"",
+      "import { Button, buttonVariants } from \"/components/ui/button\"",
+      "import {",
+      "  Form,",
+      "  FormControl,",
+      "  FormDescription,",
+      "  FormField,",
+      "  FormItem,",
+      "  FormLabel,",
+      "  FormMessage,",
+      "} from \"/components/ui/form\"",
+      "import { RadioGroup, RadioGroupItem } from \"/components/ui/radio-group\"",
+      "const appearanceFormSchema = z.object({",
+      "  theme: z.enum([\"light\", \"dark\"], {",
+      "    required_error: \"Please select a theme.\",",
+      "  }),",
+      "  font: z.enum([\"inter\", \"manrope\", \"system\"], {",
+      "    invalid_type_error: \"Select a font\",",
+      "    required_error: \"Please select a font.\",",
+      "  }),",
+      "})",
+      "type AppearanceFormValues = z.infer<typeof appearanceFormSchema>",
+      "// This can come from your database or API.",
+      "const defaultValues: Partial<AppearanceFormValues> = {",
+      "  theme: \"light\",",
+      "}",
+      "export function AppearanceForm() {",
+      "  const form = useForm<AppearanceFormValues>({",
+      "    resolver: zodResolver(appearanceFormSchema),",
+      "    defaultValues,",
+      "  })",
+      "  function onSubmit(data: AppearanceFormValues) {",
+      "    toast({",
+      "      title: \"You submitted the following values:\",",
+      "      description: (",
+      "        <pre className=\"mt-2 w-[340px] rounded-md bg-slate-950 p-4\">",
+      "          <code className=\"text-white\">{JSON.stringify(data, null, 2)}</code>",
+      "        </pre>",
+      "      ),",
+      "    })",
+      "  }",
+      "  return (",
+      "    <Form {...form}>",
+      "      <form onSubmit={form.handleSubmit(onSubmit)} className=\"space-y-8\">",
+      "        <FormField",
+      "          control={form.control}",
+      "          name=\"font\"",
+      "          render={({ field }) => (",
+      "            <FormItem>",
+      "              <FormLabel>Font</FormLabel>",
+      "              <div className=\"relative w-max\">",
+      "                <FormControl>",
+      "                  <select",
+      "                    className={cn(",
+      "                      buttonVariants({ variant: \"outline\" }),",
+      "                      \"w-[200px] appearance-none font-normal\"",
+      "                    )}",
+      "                    {...field}",
+      "                  >",
+      "                    <option value=\"inter\">Inter</option>",
+      "                    <option value=\"manrope\">Manrope</option>",
+      "                    <option value=\"system\">System</option>",
+      "                  </select>",
+      "                </FormControl>",
+      "                <ChevronDown className=\"absolute right-3 top-2.5 h-4 w-4 opacity-50\" />",
+      "              </div>",
+      "              <FormDescription>",
+      "                Set the font you want to use in the dashboard.",
+      "              </FormDescription>",
+      "              <FormMessage />",
+      "            </FormItem>",
+      "          )}",
+      "        />",
+      "        <FormField",
+      "          control={form.control}",
+      "          name=\"theme\"",
+      "          render={({ field }) => (",
+      "            <FormItem className=\"space-y-1\">",
+      "              <FormLabel>Theme</FormLabel>",
+      "              <FormDescription>",
+      "                Select the theme for the dashboard.",
+      "              </FormDescription>",
+      "              <FormMessage />",
+      "              <RadioGroup",
+      "                onValueChange={field.onChange}",
+      "                defaultValue={field.value}",
+      "                className=\"grid max-w-md grid-cols-2 gap-8 pt-2\"",
+      "              >",
+      "                <FormItem>",
+      "                  <FormLabel className=\"[&:has([data-state=checked])>div]:border-primary\">",
+      "                    <FormControl>",
+      "                      <RadioGroupItem value=\"light\" className=\"sr-only\" />",
+      "                    </FormControl>",
+      "                    <div className=\"items-center rounded-md border-2 border-muted p-1 hover:border-accent\">",
+      "                      <div className=\"space-y-2 rounded-sm bg-[#ecedef] p-2\">",
+      "                        <div className=\"space-y-2 rounded-md bg-white p-2 shadow-sm\">",
+      "                          <div className=\"h-2 w-[80px] rounded-lg bg-[#ecedef]\" />",
+      "                          <div className=\"h-2 w-[100px] rounded-lg bg-[#ecedef]\" />",
+      "                        </div>",
+      "                        <div className=\"flex items-center space-x-2 rounded-md bg-white p-2 shadow-sm\">",
+      "                          <div className=\"h-4 w-4 rounded-full bg-[#ecedef]\" />",
+      "                          <div className=\"h-2 w-[100px] rounded-lg bg-[#ecedef]\" />",
+      "                        </div>",
+      "                        <div className=\"flex items-center space-x-2 rounded-md bg-white p-2 shadow-sm\">",
+      "                          <div className=\"h-4 w-4 rounded-full bg-[#ecedef]\" />",
+      "                          <div className=\"h-2 w-[100px] rounded-lg bg-[#ecedef]\" />",
+      "                        </div>",
+      "                      </div>",
+      "                    </div>",
+      "                    <span className=\"block w-full p-2 text-center font-normal\">",
+      "                      Light",
+      "                    </span>",
+      "                  </FormLabel>",
+      "                </FormItem>",
+      "                <FormItem>",
+      "                  <FormLabel className=\"[&:has([data-state=checked])>div]:border-primary\">",
+      "                    <FormControl>",
+      "                      <RadioGroupItem value=\"dark\" className=\"sr-only\" />",
+      "                    </FormControl>",
+      "                    <div className=\"items-center rounded-md border-2 border-muted bg-popover p-1 hover:bg-accent hover:text-accent-foreground\">",
+      "                      <div className=\"space-y-2 rounded-sm bg-slate-950 p-2\">",
+      "                        <div className=\"space-y-2 rounded-md bg-slate-800 p-2 shadow-sm\">",
+      "                          <div className=\"h-2 w-[80px] rounded-lg bg-slate-400\" />",
+      "                          <div className=\"h-2 w-[100px] rounded-lg bg-slate-400\" />",
+      "                        </div>",
+      "                        <div className=\"flex items-center space-x-2 rounded-md bg-slate-800 p-2 shadow-sm\">",
+      "                          <div className=\"h-4 w-4 rounded-full bg-slate-400\" />",
+      "                          <div className=\"h-2 w-[100px] rounded-lg bg-slate-400\" />",
+      "                        </div>",
+      "                        <div className=\"flex items-center space-x-2 rounded-md bg-slate-800 p-2 shadow-sm\">",
+      "                          <div className=\"h-4 w-4 rounded-full bg-slate-400\" />",
+      "                          <div className=\"h-2 w-[100px] rounded-lg bg-slate-400\" />",
+      "                        </div>",
+      "                      </div>",
+      "                    </div>",
+      "                    <span className=\"block w-full p-2 text-center font-normal\">",
+      "                      Dark",
+      "                    </span>",
+      "                  </FormLabel>",
+      "                </FormItem>",
+      "              </RadioGroup>",
+      "            </FormItem>",
+      "          )}",
+      "        />",
+      "        <Button type=\"submit\">Update preferences</Button>",
+      "      </form>",
+      "    </Form>",
+      "  )",
+      "}"
+    ]
+  },
+  "cards_create_cookie": {
+    "prefix": "cards_create_cookie",
+    "description": "Custom snippet from cards-create-cookie.snippet.tsx",
+    "scope": "typescript,typescriptreact",
+    "body": [
+      "import { Button } from \"~/components/ui/button\"",
+      "import {",
+      "  Card,",
+      "  CardContent,",
+      "  CardDescription,",
+      "  CardFooter,",
+      "  CardHeader,",
+      "  CardTitle,",
+      "} from \"~/components/ui/card\"",
+      "import { Label } from \"~/components/ui/label\"",
+      "import { Switch } from \"~/components/ui/switch\"",
+      "export function DemoCookieSettings() {",
+      "  return (",
+      "    <Card>",
+      "      <CardHeader>",
+      "        <CardTitle>Cookie Settings</CardTitle>",
+      "        <CardDescription>Manage your cookie settings here.</CardDescription>",
+      "      </CardHeader>",
+      "      <CardContent className=\"grid gap-6\">",
+      "        <div className=\"flex items-center justify-between space-x-2\">",
+      "          <Label htmlFor=\"necessary\" className=\"flex flex-col space-y-1\">",
+      "            <span>Strictly Necessary</span>",
+      "            <span className=\"font-normal leading-snug text-muted-foreground\">",
+      "              These cookies are essential in order to use the website and use",
+      "              its features.",
+      "            </span>",
+      "          </Label>",
+      "          <Switch id=\"necessary\" defaultChecked />",
+      "        </div>",
+      "        <div className=\"flex items-center justify-between space-x-2\">",
+      "          <Label htmlFor=\"functional\" className=\"flex flex-col space-y-1\">",
+      "            <span>Functional Cookies</span>",
+      "            <span className=\"font-normal leading-snug text-muted-foreground\">",
+      "              These cookies allow the website to provide personalized",
+      "              functionality.",
+      "            </span>",
+      "          </Label>",
+      "          <Switch id=\"functional\" />",
+      "        </div>",
+      "        <div className=\"flex items-center justify-between space-x-2\">",
+      "          <Label htmlFor=\"performance\" className=\"flex flex-col space-y-1\">",
+      "            <span>Performance Cookies</span>",
+      "            <span className=\"font-normal leading-snug text-muted-foreground\">",
+      "              These cookies help to improve the performance of the website.",
+      "            </span>",
+      "          </Label>",
+      "          <Switch id=\"performance\" />",
+      "        </div>",
+      "      </CardContent>",
+      "      <CardFooter>",
+      "        <Button variant=\"outline\" className=\"w-full\">",
+      "          Save preferences",
+      "        </Button>",
+      "      </CardFooter>",
+      "    </Card>",
+      "  )",
+      "}"
+    ]
+  },
+  "cards_create_account": {
+    "prefix": "cards_create_account",
+    "description": "Custom snippet from cards-create-account.snippet.tsx",
+    "scope": "typescript,typescriptreact",
+    "body": [
+      "\"use client\"",
+      "import { Icons } from \"~/components/icons\"",
+      "import { Button } from \"~/registry/new-york/ui/button\"",
+      "import {",
+      "  Card,",
+      "  CardContent,",
+      "  CardDescription,",
+      "  CardFooter,",
+      "  CardHeader,",
+      "  CardTitle,",
+      "} from \"~/components/ui/card\"",
+      "import { Input } from \"~/components/ui/input\"",
+      "import { Label } from \"~/components/ui/label\"",
+      "export function DemoCreateAccount() {",
+      "  return (",
+      "    <Card>",
+      "      <CardHeader className=\"space-y-1\">",
+      "        <CardTitle className=\"text-2xl\">Create an account</CardTitle>",
+      "        <CardDescription>",
+      "          Enter your email below to create your account",
+      "        </CardDescription>",
+      "      </CardHeader>",
+      "      <CardContent className=\"grid gap-4\">",
+      "        <div className=\"grid grid-cols-2 gap-6\">",
+      "          <Button variant=\"outline\">",
+      "            <Icons.gitHub className=\"mr-2 h-4 w-4\" />",
+      "            Github",
+      "          </Button>",
+      "          <Button variant=\"outline\">",
+      "            <Icons.google className=\"mr-2 h-4 w-4\" />",
+      "            Google",
+      "          </Button>",
+      "        </div>",
+      "        <div className=\"relative\">",
+      "          <div className=\"absolute inset-0 flex items-center\">",
+      "            <span className=\"w-full border-t\" />",
+      "          </div>",
+      "          <div className=\"relative flex justify-center text-xs uppercase\">",
+      "            <span className=\"bg-background px-2 text-muted-foreground\">",
+      "              Or continue with",
+      "            </span>",
+      "          </div>",
+      "        </div>",
+      "        <div className=\"grid gap-2\">",
+      "          <Label htmlFor=\"email\">Email</Label>",
+      "          <Input id=\"email\" type=\"email\" placeholder=\"m@example.com\" />",
+      "        </div>",
+      "        <div className=\"grid gap-2\">",
+      "          <Label htmlFor=\"password\">Password</Label>",
+      "          <Input id=\"password\" type=\"password\" />",
+      "        </div>",
+      "      </CardContent>",
+      "      <CardFooter>",
+      "        <Button className=\"w-full\">Create account</Button>",
+      "      </CardFooter>",
+      "    </Card>",
+      "  )",
+      "}"
+    ]
+  },
+  "authenticator": {
+    "prefix": "authenticator",
+    "description": "import { commitSession, getSession, sessionStorage } from \"./session.server\";",
+    "scope": "import { prisma } from \"~/lib/prisma.server\";",
+    "body": [
+      "import { json, LoaderFunction, ActionFunction } from \"@remix-run/node\";",
+      "import { MobileGitHubService, noteObject } from \"~/utils/github.server\";",
+      "export async function authenticate(request: Request, returnTo?: string) {",
+      "    const session = await sessionStorage.getSession(request.headers.get(\"cookie\"));",
+      "    const sessionUser = await session.get(\"user\");",
+      "    if (sessionUser) {",
+      "        const dbUser = await prisma.user.findUnique({ where: { email: sessionUser.email } });",
+      "        if (!dbUser) {",
+      "            throw redirect(\"/login\", { headers: { \"Set-Cookie\": await sessionStorage.commitSession(session) }, });",
+      "        }",
+      "        const mergedUser = {",
+      "            id: sessionUser.id ? sessionUser.id : dbUser.id,",
+      "            email: sessionUser.email ? sessionUser.email : dbUser.email,",
+      "            username: sessionUser.username ? sessionUser.username : dbUser.username,",
+      "            githubId: sessionUser.githubId ? sessionUser.githubId : dbUser.githubId,",
+      "            url: sessionUser.url ? sessionUser.url : dbUser.url,",
+      "            branch: sessionUser.branch ? sessionUser.branch : dbUser.branch,",
+      "            repoId: sessionUser.repoId ? sessionUser.repoId : dbUser.repoId,",
+      "            name: sessionUser.name ? sessionUser.name : dbUser.name,",
+      "            owner: sessionUser.owner ? sessionUser.owner : dbUser.owner,",
+      "            private: sessionUser.private ? sessionUser.private : dbUser.private,",
+      "            autoSync: sessionUser.autoSync ? sessionUser.autoSync : dbUser.autoSync,",
+      "            accessToken: sessionUser.accessToken ? sessionUser.accessToken : dbUser.accessToken,",
+      "            refreshToken: sessionUser.refreshToken ? sessionUser.refreshToken : dbUser.refreshToken,",
+      "        };",
+      "        await session.set(\"user\", mergedUser);",
+      "        return {",
+      "            user: mergedUser,",
+      "            headers: { \"Set-Cookie\": await sessionStorage.commitSession(session) }",
+      "        };",
+      "    }",
+      "    if (returnTo) session.set(\"returnTo\", returnTo);",
+      "    throw redirect(\"/login\", {",
+      "        headers: { \"Set-Cookie\": await sessionStorage.commitSession(session) },",
+      "    });",
+      "}"
+    ]
+  },
+  "getHandlesync": {
+    "prefix": "get_handlesync",
+    "description": "gethandlesync",
+    "scope": "typescript,typescriptreact",
+    "body": [
+      "import { redirect } from \"@remix-run/node\";",
+      "import { commitSession, getSession, sessionStorage } from \"./session.server\";",
+      "import { prisma } from \"~/lib/prisma.server\";",
+      "import { json, LoaderFunction, ActionFunction } from \"@remix-run/node\";",
+      "import { MobileGitHubService, noteObject } from \"~/utils/github.server\";",
+      "export async function getHandleSync(request: Request) {",
+      "    const session = await sessionStorage.getSession(request.headers.get(\"cookie\"));",
+      "    const sessionUser = await session.get(\"user\");",
+      "    const dbUser = await prisma.user.findUnique({ where: { email: sessionUser.email } });",
+      "    if (!dbUser) { throw redirect(\"/login\", { headers: { \"Set-Cookie\": await sessionStorage.commitSession(session) } }); }",
+      "    const mergedUser = {",
+      "        id: sessionUser.id ? sessionUser.id : dbUser.id,",
+      "        email: sessionUser.email ? sessionUser.email : dbUser.email,",
+      "        username: sessionUser.username ? sessionUser.username : dbUser.username,",
+      "        githubId: sessionUser.githubId ? sessionUser.githubId : dbUser.githubId,",
+      "        url: sessionUser.url ? sessionUser.url : dbUser.url,",
+      "        branch: sessionUser.branch ? sessionUser.branch : dbUser.branch,",
+      "        repoId: sessionUser.repoId ? sessionUser.repoId : dbUser.repoId,",
+      "        name: sessionUser.name ? sessionUser.name : dbUser.name,",
+      "        owner: sessionUser.owner ? sessionUser.owner : dbUser.owner,",
+      "        private: sessionUser.private ? sessionUser.private : dbUser.private,",
+      "        autoSync: sessionUser.autoSync ? sessionUser.autoSync : dbUser.autoSync,",
+      "        accessToken: sessionUser.accessToken ? sessionUser.accessToken : dbUser.accessToken,",
+      "        refreshToken: sessionUser.refreshToken ? sessionUser.refreshToken : dbUser.refreshToken,",
+      "    };",
+      "    const accessToken = import.meta.env.VITE_ACCESS_TOKEN",
+      "    const githubService = new MobileGitHubService(accessToken);",
+      "    const notes = await prisma.note.findMany({ where: { User: { email: user.email } }, select: noteObject })",
+      "    return {",
+      "        user: mergedUser,",
+      "        accessToken,",
+      "        githubService,",
+      "        notes",
+      "    };",
+      "}"
+    ]
+  },
+  "Display_Date_with_options": {
+    "prefix": "Display_Date_with_options",
+    "description": "Description_for_new_snippet",
+    "scope": "javascript, typescript",
+    "body": [
+      "const options = { weekday: \"short\", year: \"numeric\", month: \"short\", day: \"numeric\", hour: \"2-digit\", minute: \"2-digit\" };\nnew Date(d).toLocaleDateString(\"en-US\", options)"
+    ]
+  },
+  "find_n_kill_process_on_port": {
+    "prefix": "find_n_kill_process_on_port",
+    "description": "Description_for_new_snippet",
+    "scope": "javascript, typescript",
+    "body": [
+      "taskkill /PID <PID> /F"
+    ]
+  },
+  "load_dynamic_data_into_meta_function": {
+    "prefix": "load_dynamic_data_into_meta_function",
+    "description": "client_site_meta_and_loader",
+    "scope": "javascript, typescript",
+    "body": [
+      "import  { type LoaderFunction, type MetaFunction, json } from '@remix-run/node';",
+      "import { dealerSelection, fullUserSelection } from '~/utils/loader.server';",
+      "import { prisma } from '~/libs';",
+      "",
+      "export async function loader({ request, params }: LoaderFunction) {",
+      "    const d = await prisma.dealer.findUnique({ where: { id: 1 }, select: { dealerName: true, metaDesc: true} });",
+      "    const URLS = { page: 'About Us' };",
+      "    return json({",
+      "        data: {",
+      "            d: d,",
+      "            URLS: URLS",
+      "        }",
+      "    });",
+      "}",
+      "",
+      "export const meta: MetaFunction<typeof loader> = ({ data }) => {",
+      "    const { d, URLS } = data;",
+      "    return [",
+      "        { title: `${URLS.page} - ${d.dealerName}` },",
+      "        { name: \"description\", keywords: \"Automotive Sales, dealership sales, automotive CRM, Service Center, Parts Department, Accessories Department, CRM, Dealership.\", content: d.metaDesc }",
+      "    ];",
+      "};",
+      ""
+    ]
+  },
+  "shad_forms": {
+    "prefix": "shad_forms",
+    "description": "Description_for_new_snippet",
+    "scope": "javascript, typescript",
+    "body": [
+      "import { Metadata } from \"next\"",
+      "import Image from \"next/image\"",
+      "",
+      "import { Separator } from \"~/registry/new-york/ui/separator\"",
+      "import { SidebarNav } from \"~/app/(app)/examples/forms/components/sidebar-nav\"",
+      "",
+      "export const metadata: Metadata = {",
+      "  title: \"Forms\",",
+      "  description: \"Advanced form example using react-hook-form and Zod.\",",
+      "}",
+      "",
+      "const sidebarNavItems = [",
+      "  {",
+      "    title: \"Profile\",",
+      "    href: \"/examples/forms\",",
+      "  },",
+      "  {",
+      "    title: \"Account\",",
+      "    href: \"/examples/forms/account\",",
+      "  },",
+      "  {",
+      "    title: \"Appearance\",",
+      "    href: \"/examples/forms/appearance\",",
+      "  },",
+      "  {",
+      "    title: \"Notifications\",",
+      "    href: \"/examples/forms/notifications\",",
+      "  },",
+      "  {",
+      "    title: \"Display\",",
+      "    href: \"/examples/forms/display\",",
+      "  },",
+      "]",
+      "",
+      "interface SettingsLayoutProps {",
+      "  children: React.ReactNode",
+      "}",
+      "",
+      "export default function SettingsLayout({ children }: SettingsLayoutProps) {",
+      "  return (",
+      "    <>",
+      "      <div className=\"md:hidden\">",
+      "        <Image",
+      "          src=\"/examples/forms-light.png\"",
+      "          width={1280}",
+      "          height={791}",
+      "          alt=\"Forms\"",
+      "          className=\"block dark:hidden\"",
+      "        />",
+      "        <Image",
+      "          src=\"/examples/forms-dark.png\"",
+      "          width={1280}",
+      "          height={791}",
+      "          alt=\"Forms\"",
+      "          className=\"hidden dark:block\"",
+      "        />",
+      "      </div>",
+      "      <div className=\"hidden space-y-6 p-10 pb-16 md:block\">",
+      "        <div className=\"space-y-0.5\">",
+      "          <h2 className=\"text-2xl font-bold tracking-tight\">Settings</h2>",
+      "          <p className=\"text-muted-foreground\">",
+      "            Manage your account settings and set e-mail preferences.",
+      "          </p>",
+      "        </div>",
+      "        <Separator className=\"my-6\" />",
+      "        <div className=\"flex flex-col space-y-8 lg:flex-row lg:space-x-12 lg:space-y-0\">",
+      "          <aside className=\"-mx-4 lg:w-1/5\">",
+      "            <SidebarNav items={sidebarNavItems} />",
+      "          </aside>",
+      "          <div className=\"flex-1 lg:max-w-2xl\">{children}</div>",
+      "        </div>",
+      "      </div>",
+      "    </>",
+      "  )",
+      "}"
+    ]
+  },
+  "working_roles_redirect": {
+    "prefix": "working_roles_redirect",
+    "description": "Description_for_new_snippet",
+    "scope": "javascript, typescript",
+    "body": [
+      "import { dealerFull } from \"~/utils/loader.server\"",
+      "import { useLoaderData } from \"@remix-run/react\"",
+      "import { json, redirect } from \"@remix-run/node\";",
+      "import { prisma } from \"~/libs\";",
+      "import { authSessionStorage, commitSession, destroySession, getSession, } from \"~/sessions/auth-session.server\";",
+      "",
+      "export async function loader({ request, params }: LoaderFunction) {",
+      "    const d = await prisma.dealer.findUnique({ where: { id: 1 }, select: dealerFull });",
+      "    const session = await getSession(request.headers.get(\"Cookie\"));",
+      "    const email = session.get(\"email\");",
+      "    const URLS = { page: 'Book Service' };",
+      "    const u = await GetUser(email)",
+      "    if (!u) { return redirect(process.env.LOGIN); }",
+      "    const hasPosition = (positions, roles) => {",
+      "        if (!positions || !Array.isArray(positions)) { return false; }",
+      "        return positions.some((pos) => pos.position && roles.includes(pos.position));",
+      "    };",
+      "",
+      "    const isDev = hasPosition(u.positions, [\"DEV\"]);",
+      "    const isManager = hasPosition(u.positions, [\"Manager\"]);",
+      "    const isAdmin = hasPosition(u.positions, [\"Administrator\"]);",
+      "",
+      "    if (!isDev && !isManager && !isAdmin) { return redirect('/portal/user/dashboard/settings'); }",
+      "    return json({ URLS, d, client, u });",
+      "}",
+      ""
+    ]
+  },
+  "eP_import": {
+    "prefix": "eP_import",
+    "description": "Description_for_new_snippet",
+    "scope": "javascript, typescript",
+    "body": [
+      "import eP from '~/utils/ext.server'",
+      "const clients = await eP.clientfile.all()"
+    ]
+  },
+  "filter": {
+    "prefix": "filter",
+    "description": "Description_for_new_snippet",
+    "scope": "javascript, typescript",
+    "body": [
+      "const filter = Highlight?.filter(h => h.model.model === modelH);"
+    ]
+  },
+  "shad_cards_example": {
+    "prefix": "shad_cards_example",
+    "description": "Description_for_new_snippet",
+    "scope": "javascript, typescript",
+    "body": [
+      "import { cn } from \"~/components/ui/utils\"",
+      "import React from 'react'",
+      "import { ChevronDownIcon } from \"@radix-ui/react-icons\"",
+      "import {  Avatar,  AvatarFallback,  AvatarImage,} from \"~/components/ui/avatar\"",
+      "import { Button } from \"~/components/ui/button\"",
+      "import {  Card,  CardContent,  CardDescription,  CardHeader,  CardTitle,} from \"~/components/ui/card\"",
+      "import {  Command,  CommandEmpty,  CommandGroup,  CommandInput,  CommandItem,  CommandList,} from \"~/components/ui/command\"",
+      "import {  Popover,  PopoverContent,  PopoverTrigger,} from \"~/components/ui/popover\"",
+      "import { Input } from \"~/components/ui/input\"",
+      "import {  Select,  SelectContent,  SelectItem,  SelectTrigger,  SelectValue,} from \"~/components/ui/select\"",
+      "import { Separator } from \"~/components/ui/separator\"",
+      "import { Textarea } from \"~/components/ui/textarea\"",
+      "import { Label } from \"~/components/ui/label\"",
+      "import { RadioGroup, RadioGroupItem } from \"~/components/ui/radio-group\"",
+      "import { Icons } from \"~/components/icons\"",
+      "import { BellIcon, EyeNoneIcon, PersonIcon } from \"@radix-ui/react-icons\"",
+      "import {  ChevronDownIcon,  CircleIcon,  PlusIcon,  StarIcon,} from \"@radix-ui/react-icons\"",
+      "import {  DropdownMenu,  DropdownMenuCheckboxItem,  DropdownMenuContent,  DropdownMenuItem,  DropdownMenuLabel,  DropdownMenuSeparator,  DropdownMenuTrigger,} from \"~/components/ui/dropdown-menu\"",
+      "import { Switch } from \"~/components/ui/switch\"",
+      "function DemoContainer({",
+      "  className,",
+      "  ...props",
+      "}: React.HTMLAttributes<HTMLDivElement>) {",
+      "  return (",
+      "    <div",
+      "      className={cn(",
+      "        \"flex items-center justify-center [&>div]:w-full\",",
+      "        className",
+      "      )}",
+      "      {...props}",
+      "    />",
+      "  )",
+      "}",
+      "export default function CardsPage() {",
+      "  return (",
+      "      <div className=\"hidden items-start justify-center gap-6 rounded-lg p-8 md:grid lg:grid-cols-2 xl:grid-cols-3\">",
+      "        <div className=\"col-span-2 grid items-start gap-6 lg:col-span-1\">",
+      "          <DemoContainer>",
+      "            <DemoCreateAccount />",
+      "          </DemoContainer>",
+      "          <DemoContainer>",
+      "            <DemoPaymentMethod />",
+      "          </DemoContainer>",
+      "        </div>",
+      "        <div className=\"col-span-2 grid items-start gap-6 lg:col-span-1\">",
+      "          <DemoContainer>",
+      "            <DemoTeamMembers />",
+      "          </DemoContainer>",
+      "          <DemoContainer>",
+      "            <DemoShareDocument />",
+      "          </DemoContainer>",
+      "          <DemoContainer>",
+      "            <DemoDatePicker />",
+      "          </DemoContainer>",
+      "          <DemoContainer>",
+      "            <DemoNotifications />",
+      "          </DemoContainer>",
+      "        </div>",
+      "        <div className=\"col-span-2 grid items-start gap-6 lg:col-span-2 lg:grid-cols-2 xl:col-span-1 xl:grid-cols-1\">",
+      "          <DemoContainer>",
+      "            <DemoReportAnIssue />",
+      "          </DemoContainer>",
+      "          <DemoContainer>",
+      "            <DemoGithub />",
+      "          </DemoContainer>",
+      "          <DemoContainer>",
+      "            <DemoCookieSettings />",
+      "          </DemoContainer>",
+      "        </div>",
+      "      </div>",
+      "  )",
+      "}",
+      "function DemoTeamMembers() {",
+      "  return (",
+      "    <Card>",
+      "      <CardHeader>",
+      "        <CardTitle>Team Members</CardTitle>",
+      "        <CardDescription>",
+      "          Invite your team members to collaborate.",
+      "        </CardDescription>",
+      "      </CardHeader>",
+      "      <CardContent className=\"grid gap-6\">",
+      "        <div className=\"flex items-center justify-between space-x-4\">",
+      "          <div className=\"flex items-center space-x-4\">",
+      "            <Avatar>",
+      "              <AvatarImage src=\"/avatars/01.png\" />",
+      "              <AvatarFallback>OM</AvatarFallback>",
+      "            </Avatar>",
+      "            <div>",
+      "              <p className=\"text-sm font-medium leading-none\">Sofia Davis</p>",
+      "              <p className=\"text-sm text-muted-foreground\">m@example.com</p>",
+      "            </div>",
+      "          </div>",
+      "          <Popover>",
+      "            <PopoverTrigger asChild>",
+      "              <Button variant=\"outline\" className=\"ml-auto\">",
+      "                Owner{\" \"}",
+      "                <ChevronDownIcon className=\"ml-2 h-4 w-4 text-muted-foreground\" />",
+      "              </Button>",
+      "            </PopoverTrigger>",
+      "            <PopoverContent className=\"p-0\" align=\"end\">",
+      "              <Command>",
+      "                <CommandInput placeholder=\"Select new role...\" />",
+      "                <CommandList>",
+      "                  <CommandEmpty>No roles found.</CommandEmpty>",
+      "                  <CommandGroup>",
+      "                    <CommandItem className=\"teamaspace-y-1 flex flex-col items-start px-4 py-2\">",
+      "                      <p>Viewer</p>",
+      "                      <p className=\"text-sm text-muted-foreground\">",
+      "                        Can view and comment.",
+      "                      </p>",
+      "                    </CommandItem>",
+      "                    <CommandItem className=\"teamaspace-y-1 flex flex-col items-start px-4 py-2\">",
+      "                      <p>Developer</p>",
+      "                      <p className=\"text-sm text-muted-foreground\">",
+      "                        Can view, comment and edit.",
+      "                      </p>",
+      "                    </CommandItem>",
+      "                    <CommandItem className=\"teamaspace-y-1 flex flex-col items-start px-4 py-2\">",
+      "                      <p>Billing</p>",
+      "                      <p className=\"text-sm text-muted-foreground\">",
+      "                        Can view, comment and manage billing.",
+      "                      </p>",
+      "                    </CommandItem>",
+      "                    <CommandItem className=\"teamaspace-y-1 flex flex-col items-start px-4 py-2\">",
+      "                      <p>Owner</p>",
+      "                      <p className=\"text-sm text-muted-foreground\">",
+      "                        Admin-level access to all resources.",
+      "                      </p>",
+      "                    </CommandItem>",
+      "                  </CommandGroup>",
+      "                </CommandList>",
+      "              </Command>",
+      "            </PopoverContent>",
+      "          </Popover>",
+      "        </div>",
+      "        <div className=\"flex items-center justify-between space-x-4\">",
+      "          <div className=\"flex items-center space-x-4\">",
+      "            <Avatar>",
+      "              <AvatarImage src=\"/avatars/02.png\" />",
+      "              <AvatarFallback>JL</AvatarFallback>",
+      "            </Avatar>",
+      "            <div>",
+      "              <p className=\"text-sm font-medium leading-none\">Jackson Lee</p>",
+      "              <p className=\"text-sm text-muted-foreground\">p@example.com</p>",
+      "            </div>",
+      "          </div>",
+      "          <Popover>",
+      "            <PopoverTrigger asChild>",
+      "              <Button variant=\"outline\" className=\"ml-auto\">",
+      "                Member{\" \"}",
+      "                <ChevronDownIcon className=\"ml-2 h-4 w-4 text-muted-foreground\" />",
+      "              </Button>",
+      "            </PopoverTrigger>",
+      "            <PopoverContent className=\"p-0\" align=\"end\">",
+      "              <Command>",
+      "                <CommandInput placeholder=\"Select new role...\" />",
+      "                <CommandList>",
+      "                  <CommandEmpty>No roles found.</CommandEmpty>",
+      "                  <CommandGroup className=\"p-1.5\">",
+      "                    <CommandItem className=\"teamaspace-y-1 flex flex-col items-start px-4 py-2\">",
+      "                      <p>Viewer</p>",
+      "                      <p className=\"text-sm text-muted-foreground\">",
+      "                        Can view and comment.",
+      "                      </p>",
+      "                    </CommandItem>",
+      "                    <CommandItem className=\"teamaspace-y-1 flex flex-col items-start px-4 py-2\">",
+      "                      <p>Developer</p>",
+      "                      <p className=\"text-sm text-muted-foreground\">",
+      "                        Can view, comment and edit.",
+      "                      </p>",
+      "                    </CommandItem>",
+      "                    <CommandItem className=\"teamaspace-y-1 flex flex-col items-start px-4 py-2\">",
+      "                      <p>Billing</p>",
+      "                      <p className=\"text-sm text-muted-foreground\">",
+      "                        Can view, comment and manage billing.",
+      "                      </p>",
+      "                    </CommandItem>",
+      "                    <CommandItem className=\"teamaspace-y-1 flex flex-col items-start px-4 py-2\">",
+      "                      <p>Owner</p>",
+      "                      <p className=\"text-sm text-muted-foreground\">",
+      "                        Admin-level access to all resources.",
+      "                      </p>",
+      "                    </CommandItem>",
+      "                  </CommandGroup>",
+      "                </CommandList>",
+      "              </Command>",
+      "            </PopoverContent>",
+      "          </Popover>",
+      "        </div>",
+      "      </CardContent>",
+      "    </Card>",
+      "  )",
+      "}",
+      "function DemoShareDocument() {",
+      "  return (",
+      "    <Card>",
+      "      <CardHeader>",
+      "        <CardTitle>Share this document</CardTitle>",
+      "        <CardDescription>",
+      "          Anyone with the link can view this document.",
+      "        </CardDescription>",
+      "      </CardHeader>",
+      "      <CardContent>",
+      "        <div className=\"flex space-x-2\">",
+      "          <Input value=\"http://example.com/link/to/document\" readOnly />",
+      "          <Button variant=\"secondary\" className=\"shrink-0\">",
+      "            Copy Link",
+      "          </Button>",
+      "        </div>",
+      "        <Separator className=\"my-4\" />",
+      "        <div className=\"space-y-4\">",
+      "          <h4 className=\"text-sm font-medium\">People with access</h4>",
+      "          <div className=\"grid gap-6\">",
+      "            <div className=\"flex items-center justify-between space-x-4\">",
+      "              <div className=\"flex items-center space-x-4\">",
+      "                <Avatar>",
+      "                  <AvatarImage src=\"/avatars/03.png\" />",
+      "                  <AvatarFallback>OM</AvatarFallback>",
+      "                </Avatar>",
+      "                <div>",
+      "                  <p className=\"text-sm font-medium leading-none\">",
+      "                    Olivia Martin",
+      "                  </p>",
+      "                  <p className=\"text-sm text-muted-foreground\">m@example.com</p>",
+      "                </div>",
+      "              </div>",
+      "              <Select defaultValue=\"edit\">",
+      "                <SelectTrigger className=\"ml-auto w-[110px]\">",
+      "                  <SelectValue placeholder=\"Select\" />",
+      "                </SelectTrigger>",
+      "                <SelectContent>",
+      "                  <SelectItem value=\"edit\">Can edit</SelectItem>",
+      "                  <SelectItem value=\"view\">Can view</SelectItem>",
+      "                </SelectContent>",
+      "              </Select>",
+      "            </div>",
+      "            <div className=\"flex items-center justify-between space-x-4\">",
+      "              <div className=\"flex items-center space-x-4\">",
+      "                <Avatar>",
+      "                  <AvatarImage src=\"/avatars/05.png\" />",
+      "                  <AvatarFallback>IN</AvatarFallback>",
+      "                </Avatar>",
+      "                <div>",
+      "                  <p className=\"text-sm font-medium leading-none\">",
+      "                    Isabella Nguyen",
+      "                  </p>",
+      "                  <p className=\"text-sm text-muted-foreground\">b@example.com</p>",
+      "                </div>",
+      "              </div>",
+      "              <Select defaultValue=\"view\">",
+      "                <SelectTrigger className=\"ml-auto w-[110px]\">",
+      "                  <SelectValue placeholder=\"Select\" />",
+      "                </SelectTrigger>",
+      "                <SelectContent>",
+      "                  <SelectItem value=\"edit\">Can edit</SelectItem>",
+      "                  <SelectItem value=\"view\">Can view</SelectItem>",
+      "                </SelectContent>",
+      "              </Select>",
+      "            </div>",
+      "            <div className=\"flex items-center justify-between space-x-4\">",
+      "              <div className=\"flex items-center space-x-4\">",
+      "                <Avatar>",
+      "                  <AvatarImage src=\"/avatars/01.png\" />",
+      "                  <AvatarFallback>SD</AvatarFallback>",
+      "                </Avatar>",
+      "                <div>",
+      "                  <p className=\"text-sm font-medium leading-none\">",
+      "                    Sofia Davis",
+      "                  </p>",
+      "                  <p className=\"text-sm text-muted-foreground\">p@example.com</p>",
+      "                </div>",
+      "              </div>",
+      "              <Select defaultValue=\"view\">",
+      "                <SelectTrigger className=\"ml-auto w-[110px]\">",
+      "                  <SelectValue placeholder=\"Select\" />",
+      "                </SelectTrigger>",
+      "                <SelectContent>",
+      "                  <SelectItem value=\"edit\">Can edit</SelectItem>",
+      "                  <SelectItem value=\"view\">Can view</SelectItem>",
+      "                </SelectContent>",
+      "              </Select>",
+      "            </div>",
+      "          </div>",
+      "        </div>",
+      "      </CardContent>",
+      "    </Card>",
+      "  )",
+      "}",
+      "function DemoReportAnIssue() {",
+      "  return (",
+      "    <Card>",
+      "      <CardHeader>",
+      "        <CardTitle>Report an issue</CardTitle>",
+      "        <CardDescription>",
+      "          What area are you having problems with?",
+      "        </CardDescription>",
+      "      </CardHeader>",
+      "      <CardContent className=\"grid gap-6\">",
+      "        <div className=\"grid grid-cols-2 gap-4\">",
+      "          <div className=\"grid gap-2\">",
+      "            <Label htmlFor=\"area\">Area</Label>",
+      "            <Select defaultValue=\"billing\">",
+      "              <SelectTrigger id=\"area\">",
+      "                <SelectValue placeholder=\"Select\" />",
+      "              </SelectTrigger>",
+      "              <SelectContent>",
+      "                <SelectItem value=\"team\">Team</SelectItem>",
+      "                <SelectItem value=\"billing\">Billing</SelectItem>",
+      "                <SelectItem value=\"account\">Account</SelectItem>",
+      "                <SelectItem value=\"deployments\">Deployments</SelectItem>",
+      "                <SelectItem value=\"support\">Support</SelectItem>",
+      "              </SelectContent>",
+      "            </Select>",
+      "          </div>",
+      "          <div className=\"grid gap-2\">",
+      "            <Label htmlFor=\"security-level\">Security Level</Label>",
+      "            <Select defaultValue=\"2\">",
+      "              <SelectTrigger",
+      "                id=\"security-level\"",
+      "                className=\"line-clamp-1 w-[160px] truncate\"",
+      "              >",
+      "                <SelectValue placeholder=\"Select level\" />",
+      "              </SelectTrigger>",
+      "              <SelectContent>",
+      "                <SelectItem value=\"1\">Severity 1 (Highest)</SelectItem>",
+      "                <SelectItem value=\"2\">Severity 2</SelectItem>",
+      "                <SelectItem value=\"3\">Severity 3</SelectItem>",
+      "                <SelectItem value=\"4\">Severity 4 (Lowest)</SelectItem>",
+      "              </SelectContent>",
+      "            </Select>",
+      "          </div>",
+      "        </div>",
+      "        <div className=\"grid gap-2\">",
+      "          <Label htmlFor=\"subject\">Subject</Label>",
+      "          <Input id=\"subject\" placeholder=\"I need help with...\" />",
+      "        </div>",
+      "        <div className=\"grid gap-2\">",
+      "          <Label htmlFor=\"description\">Description</Label>",
+      "          <Textarea",
+      "            id=\"description\"",
+      "            placeholder=\"Please include all information relevant to your issue.\"",
+      "          />",
+      "        </div>",
+      "      </CardContent>",
+      "      <CardFooter className=\"justify-between space-x-2\">",
+      "        <Button variant=\"ghost\">Cancel</Button>",
+      "        <Button>Submit</Button>",
+      "      </CardFooter>",
+      "    </Card>",
+      "  )",
+      "}",
+      "function DemoPaymentMethod() {",
+      "  return (",
+      "    <Card>",
+      "      <CardHeader>",
+      "        <CardTitle>Payment Method</CardTitle>",
+      "        <CardDescription>",
+      "          Add a new payment method to your account.",
+      "        </CardDescription>",
+      "      </CardHeader>",
+      "      <CardContent className=\"grid gap-6\">",
+      "        <RadioGroup defaultValue=\"card\" className=\"grid grid-cols-3 gap-4\">",
+      "          <div>",
+      "            <RadioGroupItem value=\"card\" id=\"card\" className=\"peer sr-only\" />",
+      "            <Label",
+      "              htmlFor=\"card\"",
+      "              className=\"flex flex-col items-center justify-between rounded-md border-2 border-muted bg-popover p-4 hover:bg-accent hover:text-accent-foreground peer-data-[state=checked]:border-primary [&:has([data-state=checked])]:border-primary\"",
+      "            >",
+      "              <svg",
+      "                xmlns=\"http://www.w3.org/2000/svg\"",
+      "                viewBox=\"0 0 24 24\"",
+      "                fill=\"none\"",
+      "                stroke=\"currentColor\"",
+      "                strokeLinecap=\"round\"",
+      "                strokeLinejoin=\"round\"",
+      "                strokeWidth=\"2\"",
+      "                className=\"mb-3 h-6 w-6\"",
+      "              >",
+      "                <rect width=\"20\" height=\"14\" x=\"2\" y=\"5\" rx=\"2\" />",
+      "                <path d=\"M2 10h20\" />",
+      "              </svg>",
+      "              Card",
+      "            </Label>",
+      "          </div>",
+      "          <div>",
+      "            <RadioGroupItem",
+      "              value=\"paypal\"",
+      "              id=\"paypal\"",
+      "              className=\"peer sr-only\"",
+      "            />",
+      "            <Label",
+      "              htmlFor=\"paypal\"",
+      "              className=\"flex flex-col items-center justify-between rounded-md border-2 border-muted bg-popover p-4 hover:bg-accent hover:text-accent-foreground peer-data-[state=checked]:border-primary [&:has([data-state=checked])]:border-primary\"",
+      "            >",
+      "              <Icons.paypal className=\"mb-3 h-6 w-6\" />",
+      "              Paypal",
+      "            </Label>",
+      "          </div>",
+      "          <div>",
+      "            <RadioGroupItem value=\"apple\" id=\"apple\" className=\"peer sr-only\" />",
+      "            <Label",
+      "              htmlFor=\"apple\"",
+      "              className=\"flex flex-col items-center justify-between rounded-md border-2 border-muted bg-popover p-4 hover:bg-accent hover:text-accent-foreground peer-data-[state=checked]:border-primary [&:has([data-state=checked])]:border-primary\"",
+      "            >",
+      "              <Icons.apple className=\"mb-3 h-6 w-6\" />",
+      "              Apple",
+      "            </Label>",
+      "          </div>",
+      "        </RadioGroup>",
+      "        <div className=\"grid gap-2\">",
+      "          <Label htmlFor=\"name\">Name</Label>",
+      "          <Input id=\"name\" placeholder=\"First Last\" />",
+      "        </div>",
+      "        <div className=\"grid gap-2\">",
+      "          <Label htmlFor=\"number\">Card number</Label>",
+      "          <Input id=\"number\" placeholder=\"\" />",
+      "        </div>",
+      "        <div className=\"grid grid-cols-3 gap-4\">",
+      "          <div className=\"grid gap-2\">",
+      "            <Label htmlFor=\"month\">Expires</Label>",
+      "            <Select>",
+      "              <SelectTrigger id=\"month\">",
+      "                <SelectValue placeholder=\"Month\" />",
+      "              </SelectTrigger>",
+      "              <SelectContent>",
+      "                <SelectItem value=\"1\">January</SelectItem>",
+      "                <SelectItem value=\"2\">February</SelectItem>",
+      "                <SelectItem value=\"3\">March</SelectItem>",
+      "                <SelectItem value=\"4\">April</SelectItem>",
+      "                <SelectItem value=\"5\">May</SelectItem>",
+      "                <SelectItem value=\"6\">June</SelectItem>",
+      "                <SelectItem value=\"7\">July</SelectItem>",
+      "                <SelectItem value=\"8\">August</SelectItem>",
+      "                <SelectItem value=\"9\">September</SelectItem>",
+      "                <SelectItem value=\"10\">October</SelectItem>",
+      "                <SelectItem value=\"11\">November</SelectItem>",
+      "                <SelectItem value=\"12\">December</SelectItem>",
+      "              </SelectContent>",
+      "            </Select>",
+      "          </div>",
+      "          <div className=\"grid gap-2\">",
+      "            <Label htmlFor=\"year\">Year</Label>",
+      "            <Select>",
+      "              <SelectTrigger id=\"year\">",
+      "                <SelectValue placeholder=\"Year\" />",
+      "              </SelectTrigger>",
+      "              <SelectContent>",
+      "                {Array.from({ length: 10 }, (_, i) => (",
+      "                  <SelectItem key={i} value={`${new Date().getFullYear() + i}`}>",
+      "                    {new Date().getFullYear() + i}",
+      "                  </SelectItem>",
+      "                ))}",
+      "              </SelectContent>",
+      "            </Select>",
+      "          </div>",
+      "          <div className=\"grid gap-2\">",
+      "            <Label htmlFor=\"cvc\">CVC</Label>",
+      "            <Input id=\"cvc\" placeholder=\"CVC\" />",
+      "          </div>",
+      "        </div>",
+      "      </CardContent>",
+      "      <CardFooter>",
+      "        <Button className=\"w-full\">Continue</Button>",
+      "      </CardFooter>",
+      "    </Card>",
+      "  )",
+      "}",
+      "function DemoNotifications() {",
+      "  return (",
+      "    <Card>",
+      "      <CardHeader className=\"pb-3\">",
+      "        <CardTitle>Notifications</CardTitle>",
+      "        <CardDescription>",
+      "          Choose what you want to be notified about.",
+      "        </CardDescription>",
+      "      </CardHeader>",
+      "      <CardContent className=\"grid gap-1\">",
+      "        <div className=\"-mx-2 flex items-start space-x-4 rounded-md p-2 transition-all hover:bg-accent hover:text-accent-foreground\">",
+      "          <BellIcon className=\"mt-px h-5 w-5\" />",
+      "          <div className=\"space-y-1\">",
+      "            <p className=\"text-sm font-medium leading-none\">Everything</p>",
+      "            <p className=\"text-sm text-muted-foreground\">",
+      "              Email digest, mentions & all activity.",
+      "            </p>",
+      "          </div>",
+      "        </div>",
+      "        <div className=\"-mx-2 flex items-start space-x-4 rounded-md bg-accent p-2 text-accent-foreground transition-all\">",
+      "          <PersonIcon className=\"mt-px h-5 w-5\" />",
+      "          <div className=\"space-y-1\">",
+      "            <p className=\"text-sm font-medium leading-none\">Available</p>",
+      "            <p className=\"text-sm text-muted-foreground\">",
+      "              Only mentions and comments.",
+      "            </p>",
+      "          </div>",
+      "        </div>",
+      "        <div className=\"-mx-2 flex items-start space-x-4 rounded-md p-2 transition-all hover:bg-accent hover:text-accent-foreground\">",
+      "          <EyeNoneIcon className=\"mt-px h-5 w-5\" />",
+      "          <div className=\"space-y-1\">",
+      "            <p className=\"text-sm font-medium leading-none\">Ignoring</p>",
+      "            <p className=\"text-sm text-muted-foreground\">",
+      "              Turn off all notifications.",
+      "            </p>",
+      "          </div>",
+      "        </div>",
+      "      </CardContent>",
+      "    </Card>",
+      "  )",
+      "}",
+      " function DemoGithub() {",
+      "  return (",
+      "    <Card>",
+      "      <CardHeader className=\"grid grid-cols-[1fr_110px] items-start gap-4 space-y-0\">",
+      "        <div className=\"space-y-1\">",
+      "          <CardTitle>shadcn/ui</CardTitle>",
+      "          <CardDescription>",
+      "            Beautifully designed components that you can copy and paste into",
+      "            your apps. Accessible. Customizable. Open Source.",
+      "          </CardDescription>",
+      "        </div>",
+      "        <div className=\"flex items-center space-x-1 rounded-md bg-secondary text-secondary-foreground\">",
+      "          <Button variant=\"secondary\" className=\"px-3 shadow-none\">",
+      "            <StarIcon className=\"mr-2 h-4 w-4\" />",
+      "            Star",
+      "          </Button>",
+      "          <Separator orientation=\"vertical\" className=\"h-[20px]\" />",
+      "          <DropdownMenu>",
+      "            <DropdownMenuTrigger asChild>",
+      "              <Button variant=\"secondary\" className=\"px-2 shadow-none\">",
+      "                <ChevronDownIcon className=\"h-4 w-4 text-secondary-foreground\" />",
+      "              </Button>",
+      "            </DropdownMenuTrigger>",
+      "            <DropdownMenuContent",
+      "              align=\"end\"",
+      "              alignOffset={-5}",
+      "              className=\"w-[200px]\"",
+      "              forceMount",
+      "            >",
+      "              <DropdownMenuLabel>Suggested Lists</DropdownMenuLabel>",
+      "              <DropdownMenuSeparator />",
+      "              <DropdownMenuCheckboxItem checked>",
+      "                Future Ideas",
+      "              </DropdownMenuCheckboxItem>",
+      "              <DropdownMenuCheckboxItem>My Stack</DropdownMenuCheckboxItem>",
+      "              <DropdownMenuCheckboxItem>Inspiration</DropdownMenuCheckboxItem>",
+      "              <DropdownMenuSeparator />",
+      "              <DropdownMenuItem>",
+      "                <PlusIcon className=\"mr-2 h-4 w-4\" /> Create List",
+      "              </DropdownMenuItem>",
+      "            </DropdownMenuContent>",
+      "          </DropdownMenu>",
+      "        </div>",
+      "      </CardHeader>",
+      "      <CardContent>",
+      "        <div className=\"flex space-x-4 text-sm text-muted-foreground\">",
+      "          <div className=\"flex items-center\">",
+      "            <CircleIcon className=\"mr-1 h-3 w-3 fill-sky-400 text-sky-400\" />",
+      "            TypeScript",
+      "          </div>",
+      "          <div className=\"flex items-center\">",
+      "            <StarIcon className=\"mr-1 h-3 w-3\" />",
+      "            20k",
+      "          </div>",
+      "          <div>Updated April 2023</div>",
+      "        </div>",
+      "      </CardContent>",
+      "    </Card>",
+      "  )",
+      "}",
+      "function DemoDatePicker() {",
+      "  return (",
+      "    <Card>",
+      "      <CardContent className=\"pt-6\">",
+      "        <div className=\"space-y-2\">",
+      "          <Label htmlFor=\"date\" className=\"shrink-0\">",
+      "            Pick a date",
+      "          </Label>",
+      "          <DatePickerWithRange className=\"[&>button]:w-[260px]\" />",
+      "        </div>",
+      "      </CardContent>",
+      "    </Card>",
+      "  )",
+      "}",
+      "function DemoCreateAccount() {",
+      "  return (",
+      "    <Card>",
+      "      <CardHeader className=\"space-y-1\">",
+      "        <CardTitle className=\"text-2xl\">Create an account</CardTitle>",
+      "        <CardDescription>",
+      "          Enter your email below to create your account",
+      "        </CardDescription>",
+      "      </CardHeader>",
+      "      <CardContent className=\"grid gap-4\">",
+      "        <div className=\"grid grid-cols-2 gap-6\">",
+      "          <Button variant=\"outline\">",
+      "            <Icons.gitHub className=\"mr-2 h-4 w-4\" />",
+      "            Github",
+      "          </Button>",
+      "          <Button variant=\"outline\">",
+      "            <Icons.google className=\"mr-2 h-4 w-4\" />",
+      "            Google",
+      "          </Button>",
+      "        </div>",
+      "        <div className=\"relative\">",
+      "          <div className=\"absolute inset-0 flex items-center\">",
+      "            <span className=\"w-full border-t\" />",
+      "          </div>",
+      "          <div className=\"relative flex justify-center text-xs uppercase\">",
+      "            <span className=\"bg-background px-2 text-muted-foreground\">",
+      "              Or continue with",
+      "            </span>",
+      "          </div>",
+      "        </div>",
+      "        <div className=\"grid gap-2\">",
+      "          <Label htmlFor=\"email\">Email</Label>",
+      "          <Input id=\"email\" type=\"email\" placeholder=\"m@example.com\" />",
+      "        </div>",
+      "        <div className=\"grid gap-2\">",
+      "          <Label htmlFor=\"password\">Password</Label>",
+      "          <Input id=\"password\" type=\"password\" />",
+      "        </div>",
+      "      </CardContent>",
+      "      <CardFooter>",
+      "        <Button className=\"w-full\">Create account</Button>",
+      "      </CardFooter>",
+      "    </Card>",
+      "  )",
+      "}",
+      "function DemoCookieSettings() {",
+      "  return (",
+      "    <Card>",
+      "      <CardHeader>",
+      "        <CardTitle>Cookie Settings</CardTitle>",
+      "        <CardDescription>Manage your cookie settings here.</CardDescription>",
+      "      </CardHeader>",
+      "      <CardContent className=\"grid gap-6\">",
+      "        <div className=\"flex items-center justify-between space-x-2\">",
+      "          <Label htmlFor=\"necessary\" className=\"flex flex-col space-y-1\">",
+      "            <span>Strictly Necessary</span>",
+      "            <span className=\"font-normal leading-snug text-muted-foreground\">",
+      "              These cookies are essential in order to use the website and use",
+      "              its features.",
+      "            </span>",
+      "          </Label>",
+      "          <Switch id=\"necessary\" defaultChecked />",
+      "        </div>",
+      "        <div className=\"flex items-center justify-between space-x-2\">",
+      "          <Label htmlFor=\"functional\" className=\"flex flex-col space-y-1\">",
+      "            <span>Functional Cookies</span>",
+      "            <span className=\"font-normal leading-snug text-muted-foreground\">",
+      "              These cookies allow the website to provide personalized",
+      "              functionality.",
+      "            </span>",
+      "          </Label>",
+      "          <Switch id=\"functional\" />",
+      "        </div>",
+      "        <div className=\"flex items-center justify-between space-x-2\">",
+      "          <Label htmlFor=\"performance\" className=\"flex flex-col space-y-1\">",
+      "            <span>Performance Cookies</span>",
+      "            <span className=\"font-normal leading-snug text-muted-foreground\">",
+      "              These cookies help to improve the performance of the website.",
+      "            </span>",
+      "          </Label>",
+      "          <Switch id=\"performance\" />",
+      "        </div>",
+      "      </CardContent>",
+      "      <CardFooter>",
+      "        <Button variant=\"outline\" className=\"w-full\">",
+      "          Save preferences",
+      "        </Button>",
+      "      </CardFooter>",
+      "    </Card>",
+      "  )",
+      "}",
+      "",
+      "",
+      "",
+      ""
+    ]
+  },
+  "draggable_responsive_dialog_drawer": {
+    "prefix": "draggable_responsive_dialog_drawer",
+    "body": [
+      "export default function MainFunction() {\r\n    const { isMobile } = useSidebar()\r\n    const [isDialogOpen, setIsDialogOpen] = useState(false);\r\n    // DRAGGING\r\n    const [position, setPosition] = useState({ x: -200, y: -450 });\r\n    const [isDragging, setIsDragging] = useState(false);\r\n    const dragRef = useRef<HTMLDivElement>(null);\r\n    const startPosRef = useRef<{ x: number; y: number } | null>(null);\r\n    const shadowPosRef = useRef<{ x: number; y: number }>({ x: -350, y: -850 });\r\n\r\n    const handleMouseMove = useCallback((e: MouseEvent) => {\r\n        if (!isDragging || !startPosRef.current) return;\r\n\r\n        const shadowX = e.clientX - (startPosRef.current?.x || 0);\r\n        const shadowY = e.clientY - (startPosRef.current?.y || 0);\r\n\r\n        shadowPosRef.current = { x: shadowX, y: shadowY };\r\n\r\n        if (dragRef.current) {\r\n            dragRef.current.style.transform = \\`translate($ {shadowX}px, $ {shadowY}px)\\`;\r\n        }\r\n    }, [isDragging]);\r\n\r\n    const handleMouseUp = useCallback(() => {\r\n        // Set final position when dragging ends\r\n        setPosition(shadowPosRef.current);\r\n\r\n        // Reset dragging state\r\n        setIsDragging(false);\r\n        startPosRef.current = null;\r\n\r\n        // Remove visual transform\r\n        if (dragRef.current) {\r\n            dragRef.current.style.transform = 'none';\r\n        }\r\n    }, []);\r\n\r\n    useEffect(() => {\r\n        // Only add listeners when dragging\r\n        if (isDragging) {\r\n            document.addEventListener('mousemove', handleMouseMove, { passive: true });\r\n            document.addEventListener('mouseup', handleMouseUp, { passive: true });\r\n        }\r\n\r\n        // Cleanup function\r\n        return () => {\r\n            document.removeEventListener('mousemove', handleMouseMove);\r\n            document.removeEventListener('mouseup', handleMouseUp);\r\n        };\r\n    }, [isDragging, handleMouseMove, handleMouseUp]);\r\n\r\n    const handleRef = useRef<HTMLButtonElement>(null);\r\n    const handleMouseDown = useCallback((e: React.MouseEvent) => {\r\n        // Ensure we're dragging from the handle\r\n        if (e.target !== handleRef.current) return;\r\n\r\n        e.preventDefault();\r\n\r\n        // Capture initial mouse position\r\n        startPosRef.current = {\r\n            x: e.clientX - position.x,\r\n            y: e.clientY - position.y\r\n        };\r\n\r\n        // Initialize shadow position to current position\r\n        shadowPosRef.current = { ...position };\r\n\r\n        setIsDragging(true);\r\n    }, [position.x, position.y]);\r\n\r\n    return (\r\n        <>\r\n            <OpenButton setIsDialogOpen={setIsDialogOpen} />\r\n            <ResponsiveDialogDrawer\r\n                setIsDialogOpen={setIsDialogOpen}\r\n                isDialogOpen={isDialogOpen}\r\n                isMobile={isMobile}\r\n                position={position}\r\n                isDragging={isDragging}\r\n                dragRef={dragRef}\r\n            />\r\n        </>\r\n    )\r\n}\r\nfunction OpenButton({ setIsDialogOpen }) {\r\n    return (\r\n        <ButtonStyled\r\n            primary={false}\r\n            className=\" mr-auto ml-3 w-[150px] text-xs h-7 \"\r\n            onClick={() => { setIsDialogOpen(true);  }} >\r\n           Open\r\n        </ButtonStyled>\r\n    )\r\n}\r\nfunction MoveButton({ handleMouseDown, handleRef }) {\r\n    return (\r\n        <Button\r\n            ref={handleRef}\r\n            size=\"icon\"\r\n            variant=\"ghost\"\r\n            type='button'\r\n            onMouseDown={handleMouseDown}\r\n            className=' cursor-move'\r\n        >\r\n            <Move />\r\n        </Button>\r\n    )\r\n}\r\nfunction ResponsiveDialogDrawer({ isDialogOpen, setIsDialogOpen, isMobile, position,   isDragging,   dragRef, }) {\r\n\r\n    if (isMobile === false) {\r\n        return (\r\n            <Dialog\r\n                open={isDialogOpen}\r\n                onOpenChange={setIsDialogOpen}\r\n                modal={false} >\r\n                <DialogContent\r\n                    onInteractOutside={(e) => { e.preventDefault(); }}\r\n                    ref={dragRef}\r\n                    className={cn(\r\n                        isDragging ? \"pointer-events-none\" : \"\",\r\n                        isMobile === false ?\r\n                            \"absolute z-[100] bg-background border border-border border-dashed text-foreground shadow-md max-h-[90vh] h-auto\" :\r\n                            \"w-full h-full fixed bottom-0 left-0 right-0 z-[100] bg-background border-none  border-dashed\"\r\n                    )}\r\n                    style={{\r\n                        ...(isMobile === false ? {\r\n                            transform: \\`translate($ {position.x}px, $ {position.y}px)\\`,\r\n                            transition: isDragging ? 'none' : 'transform 0.1s ease-out',\r\n                            willChange: 'transform',\r\n                            width: small ? '325px' : '750px'\r\n                        } : {\r\n                            transform: 'none',\r\n                            transition: 'none',\r\n                        })\r\n                    }}\r\n                >\r\n                    <Content />\r\n                </DialogContent>\r\n            </Dialog>\r\n        )\r\n    }\r\n\r\n    return (\r\n        <Drawer open={isDialogOpen} onOpenChange={setIsDialogOpen}>\r\n            <DrawerContent>\r\n                <Content />\r\n                <DrawerFooter className=\"pt-2\">\r\n                    <DrawerClose asChild>\r\n                        <Button variant=\"outline\">Cancel</Button>\r\n                    </DrawerClose>\r\n                </DrawerFooter>\r\n            </DrawerContent>\r\n        </Drawer>\r\n    )\r\n}\r\nfunction Content({ handleMouseDown, handleRef }) {\r\n    return (\r\n        <div className='grid grid-cols-1 gap-3' >\r\n            <div className=\"flex justify-between items-center  gap-1 p-2\">\r\n                <div>\r\n\r\n                </div>\r\n                <div className='flex items-center gap-1'>\r\n                    <MoveButton  handleRef={handleRef}  handleMouseDown={handleMouseDown}  />\r\n                    <Button\r\n                        size=\"icon\"\r\n                        variant=\"ghost\"\r\n                        type='button'\r\n                        onClick={() => setIsDialogOpen(false)}\r\n                    >\r\n                        <X />\r\n                    </Button>\r\n\r\n                </div>\r\n            </div>\r\n            <div className='grid grid-cols-1 gap-3' >\r\n                <div className=\"p-4 max-h-[75vh] h-auto  overflow-y-auto\">\r\n                 \r\n                </div>\r\n            </div>\r\n        </div>\r\n    )\r\n}"
+    ],
+    "description": "",
+    "scope": "jsx / tsx"
+  },
+  "calendar_with_time_presets": {
+    "prefix": "calendar_with_time_presets",
+    "description": "Description for calendar with time presets",
+    "scope": "javascript,typescript",
+    "body": [
+      "",
+      "import * as React from \"react\"",
+      "",
+      "import { Button } from \"~/components/ui/button\"",
+      "import { Calendar } from \"~/components/ui/calendar\"",
+      "import { Card, CardContent, CardFooter } from \"~/components/ui/card\"",
+      "",
+      "export function WithTimePresets() {",
+      "  const [date, setDate] = React.useState<Date | undefined>(",
+      "    new Date(2025, 5, 12)",
+      "  )",
+      "  const [selectedTime, setSelectedTime] = React.useState<string | null>(\"10:00\")",
+      "  const timeSlots = Array.from({ length: 37 }, (_, i) => {",
+      "    const totalMinutes = i * 15",
+      "    const hour = Math.floor(totalMinutes / 60) + 9",
+      "    const minute = totalMinutes % 60",
+      "    return `${hour.toString().padStart(2, \"0\")}:${minute.toString().padStart(2, \"0\")}`",
+      "  })",
+      "",
+      "  const bookedDates = Array.from(",
+      "    { length: 3 },",
+      "    (_, i) => new Date(2025, 5, 17 + i)",
+      "  )",
+      "",
+      "  return (",
+      "    <Card className=\"gap-0 p-0\">",
+      "      <CardContent className=\"relative p-0 md:pr-48\">",
+      "        <div className=\"p-6\">",
+      "          <Calendar",
+      "            mode=\"single\"",
+      "            selected={date}",
+      "            onSelect={setDate}",
+      "            defaultMonth={date}",
+      "            disabled={bookedDates}",
+      "            showOutsideDays={false}",
+      "            modifiers={{",
+      "              booked: bookedDates,",
+      "            }}",
+      "            modifiersClassNames={{",
+      "              booked: \"[&>button]:line-through opacity-100\",",
+      "            }}",
+      "            className=\"bg-transparent p-0 [--cell-size:--spacing(10)] md:[--cell-size:--spacing(12)]\"",
+      "            formatters={{",
+      "              formatWeekdayName: (date) => {",
+      "                return date.toLocaleString(\"en-US\", { weekday: \"short\" })",
+      "              },",
+      "            }}",
+      "          />",
+      "        </div>",
+      "        <div className=\"no-scrollbar inset-y-0 right-0 flex max-h-72 w-full scroll-pb-6 flex-col gap-4 overflow-y-auto border-t p-6 md:absolute md:max-h-none md:w-48 md:border-t-0 md:border-l\">",
+      "          <div className=\"grid gap-2\">",
+      "            {timeSlots.map((time) => (",
+      "              <Button",
+      "                key={time}",
+      "                variant={selectedTime === time ? \"default\" : \"outline\"}",
+      "                onClick={() => setSelectedTime(time)}",
+      "                className=\"w-full shadow-none\"",
+      "              >",
+      "                {time}",
+      "              </Button>",
+      "            ))}",
+      "          </div>",
+      "        </div>",
+      "      </CardContent>",
+      "      <CardFooter className=\"flex flex-col gap-4 border-t px-6 !py-5 md:flex-row\">",
+      "        <div className=\"text-sm\">",
+      "          {date && selectedTime ? (",
+      "            <>",
+      "              Your meeting is booked for{\" \"}",
+      "              <span className=\"font-medium\">",
+      "                {\" \"}",
+      "                {date?.toLocaleDateString(\"en-US\", {",
+      "                  weekday: \"long\",",
+      "                  day: \"numeric\",",
+      "                  month: \"long\",",
+      "                })}{\" \"}",
+      "              </span>",
+      "              at <span className=\"font-medium\">{selectedTime}</span>.",
+      "            </>",
+      "          ) : (",
+      "            <>Select a date and time for your meeting.</>",
+      "          )}",
+      "        </div>",
+      "        <Button",
+      "          disabled={!date || !selectedTime}",
+      "          className=\"w-full md:ml-auto md:w-auto\"",
+      "          variant=\"outline\"",
+      "        >",
+      "          Continue",
+      "        </Button>",
+      "      </CardFooter>",
+      "    </Card>",
+      "  )",
+      "}",
+      ""
+    ]
+  },
+  "dob": {
+    "prefix": "dob",
+    "description": "Description for dob",
+    "scope": "javascript,typescript",
+    "body": [
+      "\"use client\"",
+      "",
+      "import * as React from \"react\"",
+      "import { ChevronDownIcon } from \"lucide-react\"",
+      "",
+      "import { Button } from \"~/components/ui/button\"",
+      "import { Calendar } from \"~/components/ui/calendar\"",
+      "import { Label } from \"~/components/ui/label\"",
+      "import {",
+      "  Popover,",
+      "  PopoverContent,",
+      "  PopoverTrigger,",
+      "} from \"~/components/ui/popover\"",
+      "",
+      "export function DOB() {",
+      "  const [open, setOpen] = React.useState(false)",
+      "  const [date, setDate] = React.useState<Date | undefined>(undefined)",
+      "",
+      "  return (",
+      "    <div className=\"flex flex-col gap-3\">",
+      "      <Label htmlFor=\"date\" className=\"px-1\">",
+      "        Date of birth",
+      "      </Label>",
+      "      <Popover open={open} onOpenChange={setOpen}>",
+      "        <PopoverTrigger asChild>",
+      "          <Button",
+      "            variant=\"outline\"",
+      "            id=\"date\"",
+      "            className=\"w-48 justify-between font-normal\"",
+      "          >",
+      "            {date ? date.toLocaleDateString() : \"Select date\"}",
+      "            <ChevronDownIcon />",
+      "          </Button>",
+      "        </PopoverTrigger>",
+      "        <PopoverContent className=\"w-auto overflow-hidden p-0\" align=\"start\">",
+      "          <Calendar",
+      "            mode=\"single\"",
+      "            selected={date}",
+      "            captionLayout=\"dropdown\"",
+      "            onSelect={(date) => {",
+      "              setDate(date)",
+      "              setOpen(false)",
+      "            }}",
+      "          />",
+      "        </PopoverContent>",
+      "      </Popover>",
+      "    </div>",
+      "  )",
+      "}",
+      ""
+    ]
+  },
+  "with_presets": {
+    "prefix": "with_presets",
+    "description": "Description for with presets",
+    "scope": "javascript,typescript",
+    "body": [
+      "\"use client\"",
+      "",
+      "import * as React from \"react\"",
+      "import { addDays } from \"date-fns\"",
+      "",
+      "import { Button } from \"~/components/ui/button\"",
+      "import { Calendar } from \"~/components/ui/calendar\"",
+      "import { Card, CardContent, CardFooter } from \"~/components/ui/card\"",
+      "",
+      "export function WithPresets() {",
+      "  const [date, setDate] = React.useState<Date | undefined>(",
+      "    new Date(2025, 5, 12)",
+      "  )",
+      "",
+      "  return (",
+      "    <Card className=\"max-w-[300px] py-4\">",
+      "      <CardContent className=\"px-4\">",
+      "        <Calendar",
+      "          mode=\"single\"",
+      "          selected={date}",
+      "          onSelect={setDate}",
+      "          defaultMonth={date}",
+      "          className=\"bg-transparent p-0 [--cell-size:--spacing(9.5)]\"",
+      "        />",
+      "      </CardContent>",
+      "      <CardFooter className=\"flex flex-wrap gap-2 border-t px-4 !pt-4\">",
+      "        {[",
+      "          { label: \"Today\", value: 0 },",
+      "          { label: \"Tomorrow\", value: 1 },",
+      "          { label: \"In 3 days\", value: 3 },",
+      "          { label: \"In a week\", value: 7 },",
+      "          { label: \"In 2 weeks\", value: 14 },",
+      "        ].map((preset) => (",
+      "          <Button",
+      "            key={preset.value}",
+      "            variant=\"outline\"",
+      "            size=\"sm\"",
+      "            className=\"flex-1\"",
+      "            onClick={() => {",
+      "              const newDate = addDays(new Date(), preset.value)",
+      "              setDate(newDate)",
+      "            }}",
+      "          >",
+      "            {preset.label}",
+      "          </Button>",
+      "        ))}",
+      "      </CardFooter>",
+      "    </Card>",
+      "  )",
+      "}",
+      ""
+    ]
+  },
+  "sidebar_dialog": {
+    "prefix": "sidebar_dialog",
+    "description": "Description for sidebar dialog",
+    "scope": "javascript,typescript",
+    "body": [
+      "import * as React from \"react\"",
+      "import {",
+      "  Bell,",
+      "  Check,",
+      "  Globe,",
+      "  Home,",
+      "  Keyboard,",
+      "  Link,",
+      "  Lock,",
+      "  Menu,",
+      "  MessageCircle,",
+      "  Paintbrush,",
+      "  Settings,",
+      "  Video,",
+      "} from \"lucide-react\"",
+      "import {",
+      "  Breadcrumb,",
+      "  BreadcrumbItem,",
+      "  BreadcrumbLink,",
+      "  BreadcrumbList,",
+      "  BreadcrumbPage,",
+      "  BreadcrumbSeparator,",
+      "} from \"~/components/ui/breadcrumb\"",
+      "import { Button } from \"~/components/ui/button\"",
+      "import {",
+      "  Dialog,",
+      "  DialogContent,",
+      "  DialogDescription,",
+      "  DialogTitle,",
+      "  DialogTrigger,",
+      "} from \"~/components/ui/dialog\"",
+      "import {",
+      "  Sidebar,",
+      "  SidebarContent,",
+      "  SidebarGroup,",
+      "  SidebarGroupContent,",
+      "  SidebarMenu,",
+      "  SidebarMenuButton,",
+      "  SidebarMenuItem,",
+      "  SidebarProvider,",
+      "} from \"~/components/ui/sidebar\"",
+      "export default function Page() {",
+      "      const [open, setOpen] = useState(true)",
+      "    const data = {",
+      "  nav: [",
+      "    { name: \"Notifications\", icon: Bell },",
+      "    { name: \"Navigation\", icon: Menu },",
+      "    { name: \"Home\", icon: Home },",
+      "    { name: \"Appearance\", icon: Paintbrush },",
+      "    { name: \"Messages & media\", icon: MessageCircle },",
+      "    { name: \"Language & region\", icon: Globe },",
+      "    { name: \"Accessibility\", icon: Keyboard },",
+      "    { name: \"Mark as read\", icon: Check },",
+      "    { name: \"Audio & video\", icon: Video },",
+      "    { name: \"Connected accounts\", icon: Link },",
+      "    { name: \"Privacy & visibility\", icon: Lock },",
+      "    { name: \"Advanced\", icon: Settings },",
+      "  ],",
+      "}",
+      "",
+      "  return (",
+      "    <div className=\"flex h-svh items-center justify-center\">",
+      "    <Dialog open={open} onOpenChange={setOpen}>",
+      "      <DialogTrigger asChild>",
+      "        <Button size=\"sm\">Open Dialog</Button>",
+      "      </DialogTrigger>",
+      "      <DialogContent className=\"overflow-hidden p-0 md:max-h-[500px] md:max-w-[700px] lg:max-w-[800px]\">",
+      "        <DialogTitle className=\"sr-only\">Settings</DialogTitle>",
+      "        <DialogDescription className=\"sr-only\">",
+      "          Customize your settings here.",
+      "        </DialogDescription>",
+      "        <SidebarProvider className=\"items-start\">",
+      "          <Sidebar collapsible=\"none\" className=\"hidden md:flex\">",
+      "            <SidebarContent>",
+      "              <SidebarGroup>",
+      "                <SidebarGroupContent>",
+      "                  <SidebarMenu>",
+      "                    {data.nav.map((item) => (",
+      "                      <SidebarMenuItem key={item.name}>",
+      "                        <SidebarMenuButton",
+      "                          asChild",
+      "                          isActive={item.name === \"Messages & media\"}",
+      "                        >",
+      "                          <a href=\"#\">",
+      "                            <item.icon />",
+      "                            <span>{item.name}</span>",
+      "                          </a>",
+      "                        </SidebarMenuButton>",
+      "                      </SidebarMenuItem>",
+      "                    ))}",
+      "                  </SidebarMenu>",
+      "                </SidebarGroupContent>",
+      "              </SidebarGroup>",
+      "            </SidebarContent>",
+      "          </Sidebar>",
+      "          <main className=\"flex h-[480px] flex-1 flex-col overflow-hidden\">",
+      "            <header className=\"flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-12\">",
+      "              <div className=\"flex items-center gap-2 px-4\">",
+      "                <Breadcrumb>",
+      "                  <BreadcrumbList>",
+      "                    <BreadcrumbItem className=\"hidden md:block\">",
+      "                      <BreadcrumbLink href=\"#\">Settings</BreadcrumbLink>",
+      "                    </BreadcrumbItem>",
+      "                    <BreadcrumbSeparator className=\"hidden md:block\" />",
+      "                    <BreadcrumbItem>",
+      "                      <BreadcrumbPage>Messages & media</BreadcrumbPage>",
+      "                    </BreadcrumbItem>",
+      "                  </BreadcrumbList>",
+      "                </Breadcrumb>",
+      "              </div>",
+      "            </header>",
+      "            <div className=\"flex flex-1 flex-col gap-4 overflow-y-auto p-4 pt-0\">",
+      "              {Array.from({ length: 10 }).map((_, i) => (",
+      "                <div",
+      "                  key={i}",
+      "                  className=\"bg-muted/50 aspect-video max-w-3xl rounded-xl\"",
+      "                />",
+      "              ))}",
+      "            </div>",
+      "          </main>",
+      "        </SidebarProvider>",
+      "      </DialogContent>",
+      "    </Dialog>",
+      "",
+      "    </div>",
+      "  )",
+      "}"
+    ]
+  },
+  "login_page": {
+    "prefix": "login_page",
+    "description": "Description for login page",
+    "scope": "javascript,typescript",
+    "body": [
+      "import { GalleryVerticalEnd } from \"lucide-react\"",
+      "import { cn } from \"~/lib/utils\"",
+      "import { Button } from \"~/components/ui/button\"",
+      "import { Input } from \"~/components/ui/input\"",
+      "import { Label } from \"~/components/ui/label\"",
+      "",
+      "",
+      "",
+      "export default function LoginPage() {",
+      "  return (",
+      "    <div className=\"bg-background flex min-h-svh flex-col items-center justify-center gap-6 p-6 md:p-10\">",
+      "      <div className=\"w-full max-w-sm\">",
+      "   <div className={cn(\"flex flex-col gap-6\", className)} {...props}>",
+      "      <form>",
+      "        <div className=\"flex flex-col gap-6\">",
+      "          <div className=\"flex flex-col items-center gap-2\">",
+      "            <a",
+      "              href=\"#\"",
+      "              className=\"flex flex-col items-center gap-2 font-medium\"",
+      "            >",
+      "              <div className=\"flex size-8 items-center justify-center rounded-md\">",
+      "                <GalleryVerticalEnd className=\"size-6\" />",
+      "              </div>",
+      "              <span className=\"sr-only\">Acme Inc.</span>",
+      "            </a>",
+      "            <h1 className=\"text-xl font-bold\">Welcome to Acme Inc.</h1>",
+      "            <div className=\"text-center text-sm\">",
+      "              Don&apos;t have an account?{\" \"}",
+      "              <a href=\"#\" className=\"underline underline-offset-4\">",
+      "                Sign up",
+      "              </a>",
+      "            </div>",
+      "          </div>",
+      "          <div className=\"flex flex-col gap-6\">",
+      "            <div className=\"grid gap-3\">",
+      "              <Label htmlFor=\"email\">Email</Label>",
+      "              <Input",
+      "                id=\"email\"",
+      "                type=\"email\"",
+      "                placeholder=\"m@example.com\"",
+      "                required",
+      "              />",
+      "            </div>",
+      "            <Button type=\"submit\" className=\"w-full\">",
+      "              Login",
+      "            </Button>",
+      "          </div>",
+      "          <div className=\"after:border-border relative text-center text-sm after:absolute after:inset-0 after:top-1/2 after:z-0 after:flex after:items-center after:border-t\">",
+      "            <span className=\"bg-background text-muted-foreground relative z-10 px-2\">",
+      "              Or",
+      "            </span>",
+      "          </div>",
+      "          <div className=\"grid gap-4 sm:grid-cols-2\">",
+      "            <Button variant=\"outline\" type=\"button\" className=\"w-full\">",
+      "              <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">",
+      "                <path",
+      "                  d=\"M12.152 6.896c-.948 0-2.415-1.078-3.96-1.04-2.04.027-3.91 1.183-4.961 3.014-2.117 3.675-.546 9.103 1.519 12.09 1.013 1.454 2.208 3.09 3.792 3.039 1.52-.065 2.09-.987 3.935-.987 1.831 0 2.35.987 3.96.948 1.637-.026 2.676-1.48 3.676-2.948 1.156-1.688 1.636-3.325 1.662-3.415-.039-.013-3.182-1.221-3.22-4.857-.026-3.04 2.48-4.494 2.597-4.559-1.429-2.09-3.623-2.324-4.39-2.376-2-.156-3.675 1.09-4.61 1.09zM15.53 3.83c.843-1.012 1.4-2.427 1.245-3.83-1.207.052-2.662.805-3.532 1.818-.78.896-1.454 2.338-1.273 3.714 1.338.104 2.715-.688 3.559-1.701\"",
+      "                  fill=\"currentColor\"",
+      "                />",
+      "              </svg>",
+      "              Continue with Apple",
+      "            </Button>",
+      "            <Button variant=\"outline\" type=\"button\" className=\"w-full\">",
+      "              <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">",
+      "                <path",
+      "                  d=\"M12.48 10.92v3.28h7.84c-.24 1.84-.853 3.187-1.787 4.133-1.147 1.147-2.933 2.4-6.053 2.4-4.827 0-8.6-3.893-8.6-8.72s3.773-8.72 8.6-8.72c2.6 0 4.507 1.027 5.907 2.347l2.307-2.307C18.747 1.44 16.133 0 12.48 0 5.867 0 .307 5.387.307 12s5.56 12 12.173 12c3.573 0 6.267-1.173 8.373-3.36 2.16-2.16 2.84-5.213 2.84-7.667 0-.76-.053-1.467-.173-2.053H12.48z\"",
+      "                  fill=\"currentColor\"",
+      "                />",
+      "              </svg>",
+      "              Continue with Google",
+      "            </Button>",
+      "          </div>",
+      "        </div>",
+      "      </form>",
+      "      <div className=\"text-muted-foreground *:[a]:hover:text-primary text-center text-xs text-balance *:[a]:underline *:[a]:underline-offset-4\">",
+      "        By clicking continue, you agree to our <a href=\"#\">Terms of Service</a>{\" \"}",
+      "        and <a href=\"#\">Privacy Policy</a>.",
+      "      </div>",
+      "    </div>",
+      "      </div>",
+      "    </div>",
+      "  )",
+      "}",
+      ""
+    ]
+  },
+  "month_and_year_dropdown": {
+    "prefix": "month_and_year_dropdown",
+    "description": "Description for month and year dropdown",
+    "scope": "javascript,typescript",
+    "body": [
+      "\"use client\"",
+      "",
+      "import * as React from \"react\"",
+      "",
+      "import { Calendar } from \"~/components/ui/calendar\"",
+      "import { Label } from \"~/components/ui/label\"",
+      "import {",
+      "  Select,",
+      "  SelectContent,",
+      "  SelectItem,",
+      "  SelectTrigger,",
+      "  SelectValue,",
+      "} from \"~/components/ui/select\"",
+      "",
+      "export function MonthAndYearDropdown() {",
+      "  const [dropdown, setDropdown] =",
+      "    React.useState<React.ComponentProps<typeof Calendar>[\"captionLayout\"]>(",
+      "      \"dropdown\"",
+      "    )",
+      "  const [date, setDate] = React.useState<Date | undefined>(",
+      "    new Date(2025, 5, 12)",
+      "  )",
+      "",
+      "  return (",
+      "    <div className=\"flex flex-col gap-4\">",
+      "      <Calendar",
+      "        mode=\"single\"",
+      "        defaultMonth={date}",
+      "        selected={date}",
+      "        onSelect={setDate}",
+      "        captionLayout={dropdown}",
+      "        className=\"rounded-lg border shadow-sm\"",
+      "      />",
+      "      <div className=\"flex flex-col gap-3\">",
+      "        <Label htmlFor=\"dropdown\" className=\"px-1\">",
+      "          Dropdown",
+      "        </Label>",
+      "        <Select",
+      "          value={dropdown}",
+      "          onValueChange={(value) =>",
+      "            setDropdown(",
+      "              value as React.ComponentProps<typeof Calendar>[\"captionLayout\"]",
+      "            )",
+      "          }",
+      "        >",
+      "          <SelectTrigger",
+      "            id=\"dropdown\"",
+      "            size=\"sm\"",
+      "            className=\"bg-background w-full\"",
+      "          >",
+      "            <SelectValue placeholder=\"Dropdown\" />",
+      "          </SelectTrigger>",
+      "          <SelectContent align=\"center\">",
+      "            <SelectItem value=\"dropdown\">Month and Year</SelectItem>",
+      "            <SelectItem value=\"dropdown-months\">Month Only</SelectItem>",
+      "            <SelectItem value=\"dropdown-years\">Year Only</SelectItem>",
+      "          </SelectContent>",
+      "        </Select>",
+      "      </div>",
+      "    </div>",
+      "  )",
+      "}",
+      ""
+    ]
+  },
+  "sidebar": {
+    "prefix": "sidebar",
+    "description": "Description for sidebar",
+    "scope": "javascript,typescript",
+    "body": [
+      "",
+      "import { AppSidebar } from \"~/components/app-sidebar\"",
+      "import { Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator } from '~/components/ui/breadcrumb';",
+      "import { Separator } from \"~/components/ui/separator\"",
+      "import { SidebarInset, SidebarProvider, SidebarTrigger } from '~/components/ui/sidebar';",
+      "import { AudioWaveform, BookOpen, Bot, Command, Frame, GalleryVerticalEnd, Map, PieChart, Settings2, SquareTerminal } from 'lucide-react';",
+      "import { NavMain } from \"~/components/nav-main\"",
+      "import { NavProjects } from \"~/components/nav-projects\"",
+      "import { NavUser } from \"~/components/nav-user\"",
+      "import { TeamSwitcher } from \"~/components/team-switcher\"",
+      "import { Sidebar, SidebarContent, SidebarFooter, SidebarHeader, SidebarRail } from '~/components/ui/sidebar';",
+      "import { Folder, Forward, MoreHorizontal, Trash2 } from 'lucide-react';",
+      "import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger } from '~/components/ui/dropdown-menu';",
+      "import { SidebarGroup, SidebarGroupLabel, SidebarMenu, SidebarMenuAction, SidebarMenuButton, SidebarMenuItem, useSidebar } from '~/components/ui/sidebar';",
+      "import { ChevronRight } from 'lucide-react';",
+      "import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '~/components/ui/collapsible';",
+      "import { SidebarGroup, SidebarGroupLabel, SidebarMenu, SidebarMenuButton, SidebarMenuItem, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem } from '~/components/ui/sidebar';",
+      "import { BadgeCheck, Bell, ChevronsUpDown, CreditCard, LogOut, Sparkles, } from \"lucide-react\"",
+      "import { Avatar, AvatarFallback, AvatarImage, } from \"~/components/ui/avatar\"",
+      "import * as React from \"react\"",
+      "import { ChevronsUpDown, Plus } from \"lucide-react\"",
+      "import {    DropdownMenu,    DropdownMenuContent,    DropdownMenuItem,    DropdownMenuLabel,    DropdownMenuSeparator,    DropdownMenuShortcut,    DropdownMenuTrigger,} from \"~/components/ui/dropdown-menu\"",
+      "import {    SidebarMenu,    SidebarMenuButton,    SidebarMenuItem,    useSidebar,} from \"~/components/ui/sidebar\"",
+      "",
+      "",
+      "export function TeamSwitcher({",
+      "    teams,",
+      "}: {",
+      "    teams: {",
+      "        name: string",
+      "        logo: React.ElementType",
+      "        plan: string",
+      "    }[]",
+      "}) {",
+      "    const { isMobile } = useSidebar()",
+      "    const [activeTeam, setActiveTeam] = React.useState(teams[0])",
+      "    if (!activeTeam) {",
+      "        return null",
+      "    }",
+      "    return (",
+      "        <SidebarMenu>",
+      "            <SidebarMenuItem>",
+      "                <DropdownMenu>",
+      "                    <DropdownMenuTrigger asChild>",
+      "                        <SidebarMenuButton",
+      "                            size=\"lg\"",
+      "                            className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"",
+      "                        >",
+      "                            <div className=\"bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg\">",
+      "                                <activeTeam.logo className=\"size-4\" />",
+      "                            </div>",
+      "                            <div className=\"grid flex-1 text-left text-sm leading-tight\">",
+      "                                <span className=\"truncate font-medium\">{activeTeam.name}</span>",
+      "                                <span className=\"truncate text-xs\">{activeTeam.plan}</span>",
+      "                            </div>",
+      "                            <ChevronsUpDown className=\"ml-auto\" />",
+      "                        </SidebarMenuButton>",
+      "                    </DropdownMenuTrigger>",
+      "                    <DropdownMenuContent",
+      "                        className=\"w-(--radix-dropdown-menu-trigger-width) min-w-56 rounded-lg\"",
+      "                        align=\"start\"",
+      "                        side={isMobile ? \"bottom\" : \"right\"}",
+      "                        sideOffset={4}",
+      "                    >",
+      "                        <DropdownMenuLabel className=\"text-muted-foreground text-xs\">",
+      "                            Teams",
+      "                        </DropdownMenuLabel>",
+      "                        {teams.map((team, index) => (",
+      "                            <DropdownMenuItem",
+      "                                key={team.name}",
+      "                                onClick={() => setActiveTeam(team)}",
+      "                                className=\"gap-2 p-2\"",
+      "                            >",
+      "                                <div className=\"flex size-6 items-center justify-center rounded-md border\">",
+      "                                    <team.logo className=\"size-3.5 shrink-0\" />",
+      "                                </div>",
+      "                                {team.name}",
+      "                                <DropdownMenuShortcut>⌘{index + 1}</DropdownMenuShortcut>",
+      "                            </DropdownMenuItem>",
+      "                        ))}",
+      "                        <DropdownMenuSeparator />",
+      "                        <DropdownMenuItem className=\"gap-2 p-2\">",
+      "                            <div className=\"flex size-6 items-center justify-center rounded-md border bg-transparent\">",
+      "                                <Plus className=\"size-4\" />",
+      "                            </div>",
+      "                            <div className=\"text-muted-foreground font-medium\">Add team</div>",
+      "                        </DropdownMenuItem>",
+      "                    </DropdownMenuContent>",
+      "                </DropdownMenu>",
+      "            </SidebarMenuItem>",
+      "        </SidebarMenu>",
+      "    )",
+      "}",
+      "export function NavUser({",
+      "    user,",
+      "}: {",
+      "    user: {",
+      "        name: string",
+      "        email: string",
+      "        avatar: string",
+      "    }",
+      "}) {",
+      "    const { isMobile } = useSidebar()",
+      "    return (",
+      "        <SidebarMenu>",
+      "            <SidebarMenuItem>",
+      "                <DropdownMenu>",
+      "                    <DropdownMenuTrigger asChild>",
+      "                        <SidebarMenuButton",
+      "                            size=\"lg\"",
+      "                            className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"",
+      "                        >",
+      "                            <Avatar className=\"h-8 w-8 rounded-lg\">",
+      "                                <AvatarImage src={user.avatar} alt={user.name} />",
+      "                                <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>",
+      "                            </Avatar>",
+      "                            <div className=\"grid flex-1 text-left text-sm leading-tight\">",
+      "                                <span className=\"truncate font-medium\">{user.name}</span>",
+      "                                <span className=\"truncate text-xs\">{user.email}</span>",
+      "                            </div>",
+      "                            <ChevronsUpDown className=\"ml-auto size-4\" />",
+      "                        </SidebarMenuButton>",
+      "                    </DropdownMenuTrigger>",
+      "                    <DropdownMenuContent",
+      "                        className=\"w-(--radix-dropdown-menu-trigger-width) min-w-56 rounded-lg\"",
+      "                        side={isMobile ? \"bottom\" : \"right\"}",
+      "                        align=\"end\"",
+      "                        sideOffset={4}",
+      "                    >",
+      "                        <DropdownMenuLabel className=\"p-0 font-normal\">",
+      "                            <div className=\"flex items-center gap-2 px-1 py-1.5 text-left text-sm\">",
+      "                                <Avatar className=\"h-8 w-8 rounded-lg\">",
+      "                                    <AvatarImage src={user.avatar} alt={user.name} />",
+      "                                    <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>",
+      "                                </Avatar>",
+      "                                <div className=\"grid flex-1 text-left text-sm leading-tight\">",
+      "                                    <span className=\"truncate font-medium\">{user.name}</span>",
+      "                                    <span className=\"truncate text-xs\">{user.email}</span>",
+      "                                </div>",
+      "                            </div>",
+      "                        </DropdownMenuLabel>",
+      "                        <DropdownMenuSeparator />",
+      "                        <DropdownMenuGroup>",
+      "                            <DropdownMenuItem>",
+      "                                <Sparkles />",
+      "                                Upgrade to Pro",
+      "                            </DropdownMenuItem>",
+      "                        </DropdownMenuGroup>",
+      "                        <DropdownMenuSeparator />",
+      "                        <DropdownMenuGroup>",
+      "                            <DropdownMenuItem>",
+      "                                <BadgeCheck />",
+      "                                Account",
+      "                            </DropdownMenuItem>",
+      "                            <DropdownMenuItem>",
+      "                                <CreditCard />",
+      "                                Billing",
+      "                            </DropdownMenuItem>",
+      "                            <DropdownMenuItem>",
+      "                                <Bell />",
+      "                                Notifications",
+      "                            </DropdownMenuItem>",
+      "                        </DropdownMenuGroup>",
+      "                        <DropdownMenuSeparator />",
+      "                        <DropdownMenuItem>",
+      "                            <LogOut />",
+      "                            Log out",
+      "                        </DropdownMenuItem>",
+      "                    </DropdownMenuContent>",
+      "                </DropdownMenu>",
+      "            </SidebarMenuItem>",
+      "        </SidebarMenu>",
+      "    )",
+      "}",
+      "export function NavProjects({",
+      "    projects,",
+      "}: {",
+      "    projects: {",
+      "        name: string",
+      "        url: string",
+      "        icon: LucideIcon",
+      "    }[]",
+      "}) {",
+      "    const { isMobile } = useSidebar()",
+      "    return (",
+      "        <SidebarGroup className=\"group-data-[collapsible=icon]:hidden\">",
+      "            <SidebarGroupLabel>Projects</SidebarGroupLabel>",
+      "            <SidebarMenu>",
+      "                {projects.map((item) => (",
+      "                    <SidebarMenuItem key={item.name}>",
+      "                        <SidebarMenuButton asChild>",
+      "                            <a href={item.url}>",
+      "                                <item.icon />",
+      "                                <span>{item.name}</span>",
+      "                            </a>",
+      "                        </SidebarMenuButton>",
+      "                        <DropdownMenu>",
+      "                            <DropdownMenuTrigger asChild>",
+      "                                <SidebarMenuAction showOnHover>",
+      "                                    <MoreHorizontal />",
+      "                                    <span className=\"sr-only\">More</span>",
+      "                                </SidebarMenuAction>",
+      "                            </DropdownMenuTrigger>",
+      "                            <DropdownMenuContent",
+      "                                className=\"w-48 rounded-lg\"",
+      "                                side={isMobile ? \"bottom\" : \"right\"}",
+      "                                align={isMobile ? \"end\" : \"start\"}",
+      "                            >",
+      "                                <DropdownMenuItem>",
+      "                                    <Folder className=\"text-muted-foreground\" />",
+      "                                    <span>View Project</span>",
+      "                                </DropdownMenuItem>",
+      "                                <DropdownMenuItem>",
+      "                                    <Forward className=\"text-muted-foreground\" />",
+      "                                    <span>Share Project</span>",
+      "                                </DropdownMenuItem>",
+      "                                <DropdownMenuSeparator />",
+      "                                <DropdownMenuItem>",
+      "                                    <Trash2 className=\"text-muted-foreground\" />",
+      "                                    <span>Delete Project</span>",
+      "                                </DropdownMenuItem>",
+      "                            </DropdownMenuContent>",
+      "                        </DropdownMenu>",
+      "                    </SidebarMenuItem>",
+      "                ))}",
+      "                <SidebarMenuItem>",
+      "                    <SidebarMenuButton className=\"text-sidebar-foreground/70\">",
+      "                        <MoreHorizontal className=\"text-sidebar-foreground/70\" />",
+      "                        <span>More</span>",
+      "                    </SidebarMenuButton>",
+      "                </SidebarMenuItem>",
+      "            </SidebarMenu>",
+      "        </SidebarGroup>",
+      "    )",
+      "}",
+      "export function NavMain({",
+      "    items,",
+      "}: {",
+      "    items: {",
+      "        title: string",
+      "        url: string",
+      "        icon?: LucideIcon",
+      "        isActive?: boolean",
+      "        items?: {",
+      "            title: string",
+      "            url: string",
+      "        }[]",
+      "    }[]",
+      "}) {",
+      "    return (",
+      "        <SidebarGroup>",
+      "            <SidebarGroupLabel>Platform</SidebarGroupLabel>",
+      "            <SidebarMenu>",
+      "                {items.map((item) => (",
+      "                    <Collapsible",
+      "                        key={item.title}",
+      "                        asChild",
+      "                        defaultOpen={item.isActive}",
+      "                        className=\"group/collapsible\"",
+      "                    >",
+      "                        <SidebarMenuItem>",
+      "                            <CollapsibleTrigger asChild>",
+      "                                <SidebarMenuButton tooltip={item.title}>",
+      "                                    {item.icon && <item.icon />}",
+      "                                    <span>{item.title}</span>",
+      "                                    <ChevronRight className=\"ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90\" />",
+      "                                </SidebarMenuButton>",
+      "                            </CollapsibleTrigger>",
+      "                            <CollapsibleContent>",
+      "                                <SidebarMenuSub>",
+      "                                    {item.items?.map((subItem) => (",
+      "                                        <SidebarMenuSubItem key={subItem.title}>",
+      "                                            <SidebarMenuSubButton asChild>",
+      "                                                <a href={subItem.url}>",
+      "                                                    <span>{subItem.title}</span>",
+      "                                                </a>",
+      "                                            </SidebarMenuSubButton>",
+      "                                        </SidebarMenuSubItem>",
+      "                                    ))}",
+      "                                </SidebarMenuSub>",
+      "                            </CollapsibleContent>",
+      "                        </SidebarMenuItem>",
+      "                    </Collapsible>",
+      "                ))}",
+      "            </SidebarMenu>",
+      "        </SidebarGroup>",
+      "    )",
+      "}",
+      "const data = {",
+      "    user: {",
+      "        name: \"shadcn\",",
+      "        email: \"m@example.com\",",
+      "        avatar: \"/avatars/shadcn.jpg\",",
+      "    },",
+      "    teams: [",
+      "        {",
+      "            name: \"Acme Inc\",",
+      "            logo: GalleryVerticalEnd,",
+      "            plan: \"Enterprise\",",
+      "        },",
+      "        {",
+      "            name: \"Acme Corp.\",",
+      "            logo: AudioWaveform,",
+      "            plan: \"Startup\",",
+      "        },",
+      "        {",
+      "            name: \"Evil Corp.\",",
+      "            logo: Command,",
+      "            plan: \"Free\",",
+      "        },",
+      "    ],",
+      "    navMain: [",
+      "        {",
+      "            title: \"Playground\",",
+      "            url: \"#\",",
+      "            icon: SquareTerminal,",
+      "            isActive: true,",
+      "            items: [",
+      "                {",
+      "                    title: \"History\",",
+      "                    url: \"#\",",
+      "                },",
+      "                {",
+      "                    title: \"Starred\",",
+      "                    url: \"#\",",
+      "                },",
+      "                {",
+      "                    title: \"Settings\",",
+      "                    url: \"#\",",
+      "                },",
+      "            ],",
+      "        },",
+      "        {",
+      "            title: \"Models\",",
+      "            url: \"#\",",
+      "            icon: Bot,",
+      "            items: [",
+      "                {",
+      "                    title: \"Genesis\",",
+      "                    url: \"#\",",
+      "                },",
+      "                {",
+      "                    title: \"Explorer\",",
+      "                    url: \"#\",",
+      "                },",
+      "                {",
+      "                    title: \"Quantum\",",
+      "                    url: \"#\",",
+      "                },",
+      "            ],",
+      "        },",
+      "        {",
+      "            title: \"Documentation\",",
+      "            url: \"#\",",
+      "            icon: BookOpen,",
+      "            items: [",
+      "                {",
+      "                    title: \"Introduction\",",
+      "                    url: \"#\",",
+      "                },",
+      "                {",
+      "                    title: \"Get Started\",",
+      "                    url: \"#\",",
+      "                },",
+      "                {",
+      "                    title: \"Tutorials\",",
+      "                    url: \"#\",",
+      "                },",
+      "                {",
+      "                    title: \"Changelog\",",
+      "                    url: \"#\",",
+      "                },",
+      "            ],",
+      "        },",
+      "        {",
+      "            title: \"Settings\",",
+      "            url: \"#\",",
+      "            icon: Settings2,",
+      "            items: [",
+      "                {",
+      "                    title: \"General\",",
+      "                    url: \"#\",",
+      "                },",
+      "                {",
+      "                    title: \"Team\",",
+      "                    url: \"#\",",
+      "                },",
+      "                {",
+      "                    title: \"Billing\",",
+      "                    url: \"#\",",
+      "                },",
+      "                {",
+      "                    title: \"Limits\",",
+      "                    url: \"#\",",
+      "                },",
+      "            ],",
+      "        },",
+      "    ],",
+      "    projects: [",
+      "        {",
+      "            name: \"Design Engineering\",",
+      "            url: \"#\",",
+      "            icon: Frame,",
+      "        },",
+      "        {",
+      "            name: \"Sales & Marketing\",",
+      "            url: \"#\",",
+      "            icon: PieChart,",
+      "        },",
+      "        {",
+      "            name: \"Travel\",",
+      "            url: \"#\",",
+      "            icon: Map,",
+      "        },",
+      "    ],",
+      "}",
+      "export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {",
+      "    return (",
+      "        <Sidebar collapsible=\"icon\" {...props}>",
+      "            <SidebarHeader>",
+      "                <TeamSwitcher teams={data.teams} />",
+      "            </SidebarHeader>",
+      "            <SidebarContent>",
+      "                <NavMain items={data.navMain} />",
+      "                <NavProjects projects={data.projects} />",
+      "            </SidebarContent>",
+      "            <SidebarFooter>",
+      "                <NavUser user={data.user} />",
+      "            </SidebarFooter>",
+      "            <SidebarRail />",
+      "        </Sidebar>",
+      "    )",
+      "}",
+      "export default function Page() {",
+      "    return (",
+      "        <SidebarProvider>",
+      "            <AppSidebar />",
+      "            <SidebarInset>",
+      "                <header className=\"flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-12\">",
+      "                    <div className=\"flex items-center gap-2 px-4\">",
+      "                        <SidebarTrigger className=\"-ml-1\" />",
+      "                        <Separator",
+      "                            orientation=\"vertical\"",
+      "                            className=\"mr-2 data-[orientation=vertical]:h-4\"",
+      "                        />",
+      "                        <Breadcrumb>",
+      "                            <BreadcrumbList>",
+      "                                <BreadcrumbItem className=\"hidden md:block\">",
+      "                                    <BreadcrumbLink href=\"#\">",
+      "                                        Building Your Application",
+      "                                    </BreadcrumbLink>",
+      "                                </BreadcrumbItem>",
+      "                                <BreadcrumbSeparator className=\"hidden md:block\" />",
+      "                                <BreadcrumbItem>",
+      "                                    <BreadcrumbPage>Data Fetching</BreadcrumbPage>",
+      "                                </BreadcrumbItem>",
+      "                            </BreadcrumbList>",
+      "                        </Breadcrumb>",
+      "                    </div>",
+      "                </header>",
+      "                <div className=\"flex flex-1 flex-col gap-4 p-4 pt-0\">",
+      "                    <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">",
+      "                        <div className=\"bg-muted/50 aspect-video rounded-xl\" />",
+      "                        <div className=\"bg-muted/50 aspect-video rounded-xl\" />",
+      "                        <div className=\"bg-muted/50 aspect-video rounded-xl\" />",
+      "                    </div>",
+      "                    <div className=\"bg-muted/50 min-h-[100vh] flex-1 rounded-xl md:min-h-min\" />",
+      "                </div>",
+      "            </SidebarInset>",
+      "        </SidebarProvider>",
+      "    )",
+      "}",
+      "",
+      "",
+      ""
+    ]
+  },
+  "with_time_picker": {
+    "prefix": "with_time_picker",
+    "description": "Description for with time picker",
+    "scope": "javascript,typescript",
+    "body": [
+      "\"use client\"",
+      "",
+      "import * as React from \"react\"",
+      "import { Clock2Icon } from \"lucide-react\"",
+      "",
+      "import { Calendar } from \"~/components/ui/calendar\"",
+      "import { Card, CardContent, CardFooter } from \"~/components/ui/card\"",
+      "import { Input } from \"~/components/ui/input\"",
+      "import { Label } from \"~/components/ui/label\"",
+      "",
+      "export function WithTimePicker() {",
+      "  const [date, setDate] = React.useState<Date | undefined>(",
+      "    new Date(2025, 5, 12)",
+      "  )",
+      "",
+      "  return (",
+      "    <Card className=\"w-fit py-4\">",
+      "      <CardContent className=\"px-4\">",
+      "        <Calendar",
+      "          mode=\"single\"",
+      "          selected={date}",
+      "          onSelect={setDate}",
+      "          className=\"bg-transparent p-0\"",
+      "        />",
+      "      </CardContent>",
+      "      <CardFooter className=\"flex flex-col gap-6 border-t px-4 !pt-4\">",
+      "        <div className=\"flex w-full flex-col gap-3\">",
+      "          <Label htmlFor=\"time-from\">Start Time</Label>",
+      "          <div className=\"relative flex w-full items-center gap-2\">",
+      "            <Clock2Icon className=\"text-muted-foreground pointer-events-none absolute left-2.5 size-4 select-none\" />",
+      "            <Input",
+      "              id=\"time-from\"",
+      "              type=\"time\"",
+      "              step=\"1\"",
+      "              defaultValue=\"10:30:00\"",
+      "              className=\"appearance-none pl-8 [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none\"",
+      "            />",
+      "          </div>",
+      "        </div>",
+      "        <div className=\"flex w-full flex-col gap-3\">",
+      "          <Label htmlFor=\"time-to\">End Time</Label>",
+      "          <div className=\"relative flex w-full items-center gap-2\">",
+      "            <Clock2Icon className=\"text-muted-foreground pointer-events-none absolute left-2.5 size-4 select-none\" />",
+      "            <Input",
+      "              id=\"time-to\"",
+      "              type=\"time\"",
+      "              step=\"1\"",
+      "              defaultValue=\"12:30:00\"",
+      "              className=\"appearance-none pl-8 [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none\"",
+      "            />",
+      "          </div>",
+      "        </div>",
+      "      </CardFooter>",
+      "    </Card>",
+      "  )",
+      "}",
+      ""
+    ]
+  },
+  "calendar_chart_filter": {
+    "prefix": "calendar_chart_filter",
+    "description": "Description for calendar chart filter",
+    "scope": "javascript,typescript",
+    "body": [
+      "\"use client\"",
+      "",
+      "import * as React from \"react\"",
+      "import { CalendarIcon } from \"lucide-react\"",
+      "import { DateRange } from \"react-day-picker\"",
+      "import { Bar, BarChart, CartesianGrid, XAxis } from \"recharts\"",
+      "",
+      "import { Button } from \"~/components/ui/button\"",
+      "import { Calendar } from \"~/components/ui/calendar\"",
+      "import {",
+      "  Card,",
+      "  CardAction,",
+      "  CardContent,",
+      "  CardDescription,",
+      "  CardFooter,",
+      "  CardHeader,",
+      "  CardTitle,",
+      "} from \"~/components/ui/card\"",
+      "import {",
+      "  ChartConfig,",
+      "  ChartContainer,",
+      "  ChartTooltip,",
+      "  ChartTooltipContent,",
+      "} from \"~/components/ui/chart\"",
+      "import {",
+      "  Popover,",
+      "  PopoverContent,",
+      "  PopoverTrigger,",
+      "} from \"~/components/ui/popover\"",
+      "",
+      "const chartData = [",
+      "  { date: \"2025-06-01\", visitors: 178 },",
+      "  { date: \"2025-06-02\", visitors: 470 },",
+      "  { date: \"2025-06-03\", visitors: 103 },",
+      "  { date: \"2025-06-04\", visitors: 439 },",
+      "  { date: \"2025-06-05\", visitors: 88 },",
+      "  { date: \"2025-06-06\", visitors: 294 },",
+      "  { date: \"2025-06-07\", visitors: 323 },",
+      "  { date: \"2025-06-08\", visitors: 385 },",
+      "  { date: \"2025-06-09\", visitors: 438 },",
+      "  { date: \"2025-06-10\", visitors: 155 },",
+      "  { date: \"2025-06-11\", visitors: 92 },",
+      "  { date: \"2025-06-12\", visitors: 492 },",
+      "  { date: \"2025-06-13\", visitors: 81 },",
+      "  { date: \"2025-06-14\", visitors: 426 },",
+      "  { date: \"2025-06-15\", visitors: 307 },",
+      "  { date: \"2025-06-16\", visitors: 371 },",
+      "  { date: \"2025-06-17\", visitors: 475 },",
+      "  { date: \"2025-06-18\", visitors: 107 },",
+      "  { date: \"2025-06-19\", visitors: 341 },",
+      "  { date: \"2025-06-20\", visitors: 408 },",
+      "  { date: \"2025-06-21\", visitors: 169 },",
+      "  { date: \"2025-06-22\", visitors: 317 },",
+      "  { date: \"2025-06-23\", visitors: 480 },",
+      "  { date: \"2025-06-24\", visitors: 132 },",
+      "  { date: \"2025-06-25\", visitors: 141 },",
+      "  { date: \"2025-06-26\", visitors: 434 },",
+      "  { date: \"2025-06-27\", visitors: 448 },",
+      "  { date: \"2025-06-28\", visitors: 149 },",
+      "  { date: \"2025-06-29\", visitors: 103 },",
+      "  { date: \"2025-06-30\", visitors: 446 },",
+      "]",
+      "",
+      "const total = chartData.reduce((acc, curr) => acc + curr.visitors, 0)",
+      "",
+      "const chartConfig = {",
+      "  visitors: {",
+      "    label: \"Visitors\",",
+      "    color: \"var(--color-primary)\",",
+      "  },",
+      "} satisfies ChartConfig",
+      "",
+      "export function Calendar27() {",
+      "  const [range, setRange] = React.useState<DateRange | undefined>({",
+      "    from: new Date(2025, 5, 5),",
+      "    to: new Date(2025, 5, 20),",
+      "  })",
+      "  const filteredData = React.useMemo(() => {",
+      "    if (!range?.from && !range?.to) {",
+      "      return chartData",
+      "    }",
+      "",
+      "    return chartData.filter((item) => {",
+      "      const date = new Date(item.date)",
+      "      return date >= range.from! && date <= range.to!",
+      "    })",
+      "  }, [range])",
+      "",
+      "  return (",
+      "    <Card className=\"@container/card w-full max-w-xl\">",
+      "      <CardHeader className=\"flex flex-col border-b @md/card:grid\">",
+      "        <CardTitle>Web Analytics</CardTitle>",
+      "        <CardDescription>",
+      "          Showing total visitors for this month.",
+      "        </CardDescription>",
+      "        <CardAction className=\"mt-2 @md/card:mt-0\">",
+      "          <Popover>",
+      "            <PopoverTrigger asChild>",
+      "              <Button variant=\"outline\">",
+      "                <CalendarIcon />",
+      "                {range?.from && range?.to",
+      "                  ? `${range.from.toLocaleDateString()} - ${range.to.toLocaleDateString()}`",
+      "                  : \"June 2025\"}",
+      "              </Button>",
+      "            </PopoverTrigger>",
+      "            <PopoverContent className=\"w-auto overflow-hidden p-0\" align=\"end\">",
+      "              <Calendar",
+      "                className=\"w-full\"",
+      "                mode=\"range\"",
+      "                defaultMonth={range?.from}",
+      "                selected={range}",
+      "                onSelect={setRange}",
+      "                disableNavigation",
+      "                startMonth={range?.from}",
+      "                fixedWeeks",
+      "                showOutsideDays",
+      "                disabled={{",
+      "                  after: new Date(2025, 5, 31),",
+      "                }}",
+      "              />",
+      "            </PopoverContent>",
+      "          </Popover>",
+      "        </CardAction>",
+      "      </CardHeader>",
+      "      <CardContent className=\"px-4\">",
+      "        <ChartContainer",
+      "          config={chartConfig}",
+      "          className=\"aspect-auto h-[250px] w-full\"",
+      "        >",
+      "          <BarChart",
+      "            accessibilityLayer",
+      "            data={filteredData}",
+      "            margin={{",
+      "              left: 12,",
+      "              right: 12,",
+      "            }}",
+      "          >",
+      "            <CartesianGrid vertical={false} />",
+      "            <XAxis",
+      "              dataKey=\"date\"",
+      "              tickLine={false}",
+      "              axisLine={false}",
+      "              tickMargin={8}",
+      "              minTickGap={20}",
+      "              tickFormatter={(value) => {",
+      "                const date = new Date(value)",
+      "                return date.toLocaleDateString(\"en-US\", {",
+      "                  day: \"numeric\",",
+      "                })",
+      "              }}",
+      "            />",
+      "            <ChartTooltip",
+      "              content={",
+      "                <ChartTooltipContent",
+      "                  className=\"w-[150px]\"",
+      "                  nameKey=\"visitors\"",
+      "                  labelFormatter={(value) => {",
+      "                    return new Date(value).toLocaleDateString(\"en-US\", {",
+      "                      month: \"short\",",
+      "                      day: \"numeric\",",
+      "                      year: \"numeric\",",
+      "                    })",
+      "                  }}",
+      "                />",
+      "              }",
+      "            />",
+      "            <Bar dataKey=\"visitors\" fill={`var(--color-visitors)`} radius={4} />",
+      "          </BarChart>",
+      "        </ChartContainer>",
+      "      </CardContent>",
+      "      <CardFooter className=\"border-t\">",
+      "        <div className=\"text-sm\">",
+      "          You had{\" \"}",
+      "          <span className=\"font-semibold\">{total.toLocaleString()}</span>{\" \"}",
+      "          visitors for the month of June.",
+      "        </div>",
+      "      </CardFooter>",
+      "    </Card>",
+      "  )",
+      "}",
+      ""
+    ]
+  },
+  "calendar_with_event_slots": {
+    "prefix": "calendar_with_event_slots",
+    "description": "Description for calendar with event slots",
+    "scope": "javascript,typescript",
+    "body": [
+      "\"use client\"",
+      "",
+      "import * as React from \"react\"",
+      "import { formatDateRange } from \"little-date\"",
+      "import { PlusIcon } from \"lucide-react\"",
+      "",
+      "import { Button } from \"~/components/ui/button\"",
+      "import { Calendar } from \"~/components/ui/calendar\"",
+      "import { Card, CardContent, CardFooter } from \"~/components/ui/card\"",
+      "",
+      "const events = [",
+      "  {",
+      "    title: \"Team Sync Meeting\",",
+      "    from: \"2025-06-12T09:00:00\",",
+      "    to: \"2025-06-12T10:00:00\",",
+      "  },",
+      "  {",
+      "    title: \"Design Review\",",
+      "    from: \"2025-06-12T11:30:00\",",
+      "    to: \"2025-06-12T12:30:00\",",
+      "  },",
+      "  {",
+      "    title: \"Client Presentation\",",
+      "    from: \"2025-06-12T14:00:00\",",
+      "    to: \"2025-06-12T15:00:00\",",
+      "  },",
+      "]",
+      "",
+      "export function Calendar31() {",
+      "  const [date, setDate] = React.useState<Date | undefined>(",
+      "    new Date(2025, 5, 12)",
+      "  )",
+      "",
+      "  return (",
+      "    <Card className=\"w-fit py-4\">",
+      "      <CardContent className=\"px-4\">",
+      "        <Calendar",
+      "          mode=\"single\"",
+      "          selected={date}",
+      "          onSelect={setDate}",
+      "          className=\"bg-transparent p-0\"",
+      "          required",
+      "        />",
+      "      </CardContent>",
+      "      <CardFooter className=\"flex flex-col items-start gap-3 border-t px-4 !pt-4\">",
+      "        <div className=\"flex w-full items-center justify-between px-1\">",
+      "          <div className=\"text-sm font-medium\">",
+      "            {date?.toLocaleDateString(\"en-US\", {",
+      "              day: \"numeric\",",
+      "              month: \"long\",",
+      "              year: \"numeric\",",
+      "            })}",
+      "          </div>",
+      "          <Button",
+      "            variant=\"ghost\"",
+      "            size=\"icon\"",
+      "            className=\"size-6\"",
+      "            title=\"Add Event\"",
+      "          >",
+      "            <PlusIcon />",
+      "            <span className=\"sr-only\">Add Event</span>",
+      "          </Button>",
+      "        </div>",
+      "        <div className=\"flex w-full flex-col gap-2\">",
+      "          {events.map((event) => (",
+      "            <div",
+      "              key={event.title}",
+      "              className=\"bg-muted after:bg-primary/70 relative rounded-md p-2 pl-6 text-sm after:absolute after:inset-y-2 after:left-2 after:w-1 after:rounded-full\"",
+      "            >",
+      "              <div className=\"font-medium\">{event.title}</div>",
+      "              <div className=\"text-muted-foreground text-xs\">",
+      "                {formatDateRange(new Date(event.from), new Date(event.to))}",
+      "              </div>",
+      "            </div>",
+      "          ))}",
+      "        </div>",
+      "      </CardFooter>",
+      "    </Card>",
+      "  )",
+      "}",
+      ""
+    ]
+  },
+  "save_on_key_down": {
+    "prefix": "save_on_key_down",
+    "body": [
+      "const nav = useNavigate()\r\n\r\n  const handleCancel = () => {\r\n    nav('/DevStack/extension/snippets/home')\r\n  };\r\n\r\n  const handleKeyDown = (e) => {\r\n    // Save with Ctrl+S or Cmd+S\r\n    if ((e.ctrlKey || e.metaKey) && e.key === 's') {\r\n      e.preventDefault();\r\n      handleSubmit();\r\n    }\r\n\r\n    // Cancel with Escape\r\n    if (e.key === 'Escape') {\r\n      handleCancel();\r\n    }\r\n  };\r\n\r\n  useEffect(() => {\r\n    document.addEventListener('keydown', handleKeyDown);\r\n    return () => document.removeEventListener('keydown', handleKeyDown);\r\n  }, [formData]);"
+    ],
+    "description": "",
+    "scope": "jsx / tsx"
+  },
+  "A_simple_email_only_login_page": {
+    "prefix": "a_simple_email_only_login_page",
+    "body": [
+      "import { GalleryVerticalEnd } from \"lucide-react\"\n\nimport { cn } from \"~/lib/utils\"\nimport { Button } from \"~/components/ui/button\"\nimport { Input } from \"~/components/ui/input\"\nimport { Label } from \"~/components/ui/label\"\n\nexport function LoginForm({  className,  ...props}) {\n  return (\n  <div className=\"bg-background flex min-h-svh flex-col items-center justify-center gap-6 p-6 md:p-10\">\n      <div className=\"w-full max-w-sm\">\n    <div className={cn(\"flex flex-col gap-6\", className)} {...props}>\n      <form>\n        <div className=\"flex flex-col gap-6\">\n          <div className=\"flex flex-col items-center gap-2\">\n            <a\n              href=\"#\"\n              className=\"flex flex-col items-center gap-2 font-medium\"\n            >\n              <div className=\"flex size-8 items-center justify-center rounded-md\">\n                <GalleryVerticalEnd className=\"size-6\" />\n              </div>\n              <span className=\"sr-only\">Acme Inc.</span>\n            </a>\n            <h1 className=\"text-xl font-bold\">Welcome to Acme Inc.</h1>\n            <div className=\"text-center text-sm\">\n              Don&apos;t have an account?{\" \"}\n              <a href=\"#\" className=\"underline underline-offset-4\">\n                Sign up\n              </a>\n            </div>\n          </div>\n          <div className=\"flex flex-col gap-6\">\n            <div className=\"grid gap-3\">\n              <Label htmlFor=\"email\">Email</Label>\n              <Input\n                id=\"email\"\n                type=\"email\"\n                placeholder=\"m@example.com\"\n                required\n              />\n            </div>\n            <Button type=\"submit\" className=\"w-full\">\n              Login\n            </Button>\n          </div>\n          <div className=\"after:border-border relative text-center text-sm after:absolute after:inset-0 after:top-1/2 after:z-0 after:flex after:items-center after:border-t\">\n            <span className=\"bg-background text-muted-foreground relative z-10 px-2\">\n              Or\n            </span>\n          </div>\n          <div className=\"grid gap-4 sm:grid-cols-2\">\n            <Button variant=\"outline\" type=\"button\" className=\"w-full\">\n              <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n                <path\n                  d=\"M12.152 6.896c-.948 0-2.415-1.078-3.96-1.04-2.04.027-3.91 1.183-4.961 3.014-2.117 3.675-.546 9.103 1.519 12.09 1.013 1.454 2.208 3.09 3.792 3.039 1.52-.065 2.09-.987 3.935-.987 1.831 0 2.35.987 3.96.948 1.637-.026 2.676-1.48 3.676-2.948 1.156-1.688 1.636-3.325 1.662-3.415-.039-.013-3.182-1.221-3.22-4.857-.026-3.04 2.48-4.494 2.597-4.559-1.429-2.09-3.623-2.324-4.39-2.376-2-.156-3.675 1.09-4.61 1.09zM15.53 3.83c.843-1.012 1.4-2.427 1.245-3.83-1.207.052-2.662.805-3.532 1.818-.78.896-1.454 2.338-1.273 3.714 1.338.104 2.715-.688 3.559-1.701\"\n                  fill=\"currentColor\"\n                />\n              </svg>\n              Continue with Apple\n            </Button>\n            <Button variant=\"outline\" type=\"button\" className=\"w-full\">\n              <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n                <path\n                  d=\"M12.48 10.92v3.28h7.84c-.24 1.84-.853 3.187-1.787 4.133-1.147 1.147-2.933 2.4-6.053 2.4-4.827 0-8.6-3.893-8.6-8.72s3.773-8.72 8.6-8.72c2.6 0 4.507 1.027 5.907 2.347l2.307-2.307C18.747 1.44 16.133 0 12.48 0 5.867 0 .307 5.387.307 12s5.56 12 12.173 12c3.573 0 6.267-1.173 8.373-3.36 2.16-2.16 2.84-5.213 2.84-7.667 0-.76-.053-1.467-.173-2.053H12.48z\"\n                  fill=\"currentColor\"\n                />\n              </svg>\n              Continue with Google\n            </Button>\n          </div>\n        </div>\n      </form>\n      <div className=\"text-muted-foreground *:[a]:hover:text-primary text-center text-xs text-balance *:[a]:underline *:[a]:underline-offset-4\">\n        By clicking continue, you agree to our <a href=\"#\">Terms of Service</a>{\" \"}\n        and <a href=\"#\">Privacy Policy</a>.\n      </div>\n    </div>\n     </div>\n    </div>\n  )\n}"
+    ],
+    "description": "shadcn login page",
+    "scope": "jsx / tsx"
+  },
+  "simple_calendar": {
+    "prefix": "simple_calendar",
+    "body": [
+      "\"use client\"\r\n\r\nimport * as React from \"react\"\r\n\r\nimport { Calendar } from \"@/components/ui/calendar\"\r\n\r\nexport function Calendar01() {\r\n  const [date, setDate] = React.useState<Date | undefined>(\r\n    new Date(2025, 5, 12)\r\n  )\r\n\r\n  return (\r\n    <Calendar\r\n      mode=\"single\"\r\n      defaultMonth={date}\r\n      selected={date}\r\n      onSelect={setDate}\r\n      className=\"rounded-lg border shadow-sm\"\r\n    />\r\n  )\r\n}"
+    ],
+    "description": "",
+    "scope": "jsx / tsx"
+  },
+  "multiple_months_with_single_selection": {
+    "prefix": "multiple_months_with_single_selection",
+    "body": [
+      "\"use client\"\r\n\r\nimport * as React from \"react\"\r\n\r\nimport { Calendar } from \"@/components/ui/calendar\"\r\n\r\nexport function Calendar02() {\r\n  const [date, setDate] = React.useState<Date | undefined>(\r\n    new Date(2025, 5, 12)\r\n  )\r\n\r\n  return (\r\n    <Calendar\r\n      mode=\"single\"\r\n      defaultMonth={date}\r\n      numberOfMonths={2}\r\n      selected={date}\r\n      onSelect={setDate}\r\n      className=\"rounded-lg border shadow-sm\"\r\n    />\r\n  )\r\n}"
+    ],
+    "description": "",
+    "scope": "jsx / tsx"
+  },
+  "multiple_months_with_multiple_selection": {
+    "prefix": "multiple_months_with_multiple_selection",
+    "body": [
+      "\"use client\"\r\n\r\nimport * as React from \"react\"\r\n\r\nimport { Calendar } from \"@/components/ui/calendar\"\r\n\r\nexport function Calendar03() {\r\n  const [dates, setDates] = React.useState<Date[]>([\r\n    new Date(2025, 5, 12),\r\n    new Date(2025, 6, 24),\r\n  ])\r\n\r\n  return (\r\n    <Calendar\r\n      mode=\"multiple\"\r\n      numberOfMonths={2}\r\n      defaultMonth={dates[0]}\r\n      required\r\n      selected={dates}\r\n      onSelect={setDates}\r\n      max={5}\r\n      className=\"rounded-lg border shadow-sm\"\r\n    />\r\n  )\r\n}"
+    ],
+    "description": "",
+    "scope": "jsx / tsx"
+  },
+  "Single month with range selection": {
+    "prefix": "single_month_with_range_selection",
+    "body": [
+      "\"use client\"\n\nimport * as React from \"react\"\nimport { type DateRange } from \"react-day-picker\"\n\nimport { Calendar } from \"@/components/ui/calendar\"\n\nexport function Calendar04() {\n  const [dateRange, setDateRange] = React.useState<DateRange | undefined>({\n    from: new Date(2025, 5, 9),\n    to: new Date(2025, 5, 26),\n  })\n\n  return (\n    <Calendar\n      mode=\"range\"\n      defaultMonth={dateRange?.from}\n      selected={dateRange}\n      onSelect={setDateRange}\n      className=\"rounded-lg border shadow-sm\"\n    />\n  )\n}"
+    ],
+    "description": "",
+    "scope": ""
+  },
+  "Multiple months with range selection": {
+    "prefix": "multiple_months_with_range_selection",
+    "body": [
+      "\"use client\"\r\n\r\nimport * as React from \"react\"\r\nimport { type DateRange } from \"react-day-picker\"\r\n\r\nimport { Calendar } from \"@/components/ui/calendar\"\r\n\r\nexport function Calendar05() {\r\n  const [dateRange, setDateRange] = React.useState<DateRange | undefined>({\r\n    from: new Date(2025, 5, 12),\r\n    to: new Date(2025, 6, 15),\r\n  })\r\n\r\n  return (\r\n    <Calendar\r\n      mode=\"range\"\r\n      defaultMonth={dateRange?.from}\r\n      selected={dateRange}\r\n      onSelect={setDateRange}\r\n      numberOfMonths={2}\r\n      className=\"rounded-lg border shadow-sm\"\r\n    />\r\n  )\r\n}"
+    ],
+    "description": "",
+    "scope": "jsx / tsx"
+  },
+  "range_selection_with_minimum_days": {
+    "prefix": "range_selection_with_minimum_days",
+    "body": [
+      "\"use client\"\r\n\r\nimport * as React from \"react\"\r\nimport { type DateRange } from \"react-day-picker\"\r\n\r\nimport { Calendar } from \"@/components/ui/calendar\"\r\n\r\nexport function Calendar06() {\r\n  const [dateRange, setDateRange] = React.useState<DateRange | undefined>({\r\n    from: new Date(2025, 5, 12),\r\n    to: new Date(2025, 5, 26),\r\n  })\r\n\r\n  return (\r\n    <div className=\"flex min-w-0 flex-col gap-2\">\r\n      <Calendar\r\n        mode=\"range\"\r\n        defaultMonth={dateRange?.from}\r\n        selected={dateRange}\r\n        onSelect={setDateRange}\r\n        numberOfMonths={1}\r\n        min={5}\r\n        className=\"rounded-lg border shadow-sm\"\r\n      />\r\n      <div className=\"text-muted-foreground text-center text-xs\">\r\n        A minimum of 5 days is required\r\n      </div>\r\n    </div>\r\n  )\r\n}"
+    ],
+    "description": "",
+    "scope": "jsx / tsx"
+  },
+  "range_selection_with_minimum_and_maximum_days": {
+    "prefix": "range_selection_with_minimum_and_maximum_days",
+    "body": [
+      "\"use client\"\r\n\r\nimport * as React from \"react\"\r\nimport { type DateRange } from \"react-day-picker\"\r\n\r\nimport { Calendar } from \"@/components/ui/calendar\"\r\n\r\nexport function Calendar07() {\r\n  const [dateRange, setDateRange] = React.useState<DateRange | undefined>({\r\n    from: new Date(2025, 5, 18),\r\n    to: new Date(2025, 6, 7),\r\n  })\r\n\r\n  return (\r\n    <div className=\"flex min-w-0 flex-col gap-2\">\r\n      <Calendar\r\n        mode=\"range\"\r\n        defaultMonth={dateRange?.from}\r\n        selected={dateRange}\r\n        onSelect={setDateRange}\r\n        numberOfMonths={2}\r\n        min={2}\r\n        max={20}\r\n        className=\"rounded-lg border shadow-sm\"\r\n      />\r\n      <div className=\"text-muted-foreground text-center text-xs\">\r\n        Your stay must be between 2 and 20 nights\r\n      </div>\r\n    </div>\r\n  )\r\n}"
+    ],
+    "description": "",
+    "scope": "jsx / tsx"
+  },
+  "calendar_with_disabled_days": {
+    "prefix": "calendar_with_disabled_days",
+    "body": [
+      "\"use client\"\r\n\r\nimport * as React from \"react\"\r\n\r\nimport { Calendar } from \"@/components/ui/calendar\"\r\n\r\nexport function Calendar08() {\r\n  const [date, setDate] = React.useState<Date | undefined>(\r\n    new Date(2025, 5, 12)\r\n  )\r\n\r\n  return (\r\n    <Calendar\r\n      mode=\"single\"\r\n      defaultMonth={date}\r\n      selected={date}\r\n      onSelect={setDate}\r\n      disabled={{\r\n        before: new Date(2025, 5, 12),\r\n      }}\r\n      className=\"rounded-lg border shadow-sm\"\r\n    />\r\n  )\r\n}"
+    ],
+    "description": "",
+    "scope": "jsx / tsx"
+  },
+  "calendar_with_disabled_weekends": {
+    "prefix": "calendar_with_disabled_weekends",
+    "body": [
+      "\"use client\"\r\n\r\nimport * as React from \"react\"\r\nimport { type DateRange } from \"react-day-picker\"\r\n\r\nimport { Calendar } from \"@/components/ui/calendar\"\r\n\r\nexport function Calendar09() {\r\n  const [dateRange, setDateRange] = React.useState<DateRange | undefined>({\r\n    from: new Date(2025, 5, 17),\r\n    to: new Date(2025, 5, 20),\r\n  })\r\n\r\n  return (\r\n    <Calendar\r\n      mode=\"range\"\r\n      defaultMonth={dateRange?.from}\r\n      selected={dateRange}\r\n      onSelect={setDateRange}\r\n      numberOfMonths={2}\r\n      disabled={{ dayOfWeek: [0, 6] }}\r\n      className=\"rounded-lg border shadow-sm\"\r\n      excludeDisabled\r\n    />\r\n  )\r\n}"
+    ],
+    "description": "",
+    "scope": "jsx / tsx"
+  },
+  "today_button": {
+    "prefix": "today_button",
+    "body": [
+      "\"use client\"\r\n\r\nimport * as React from \"react\"\r\n\r\nimport { Button } from \"@/components/ui/button\"\r\nimport { Calendar } from \"@/components/ui/calendar\"\r\nimport {\r\n  Card,\r\n  CardAction,\r\n  CardContent,\r\n  CardDescription,\r\n  CardHeader,\r\n  CardTitle,\r\n} from \"@/components/ui/card\"\r\n\r\nexport function Calendar10() {\r\n  const [date, setDate] = React.useState<Date | undefined>(\r\n    new Date(2025, 5, 12)\r\n  )\r\n  const [month, setMonth] = React.useState<Date | undefined>(new Date())\r\n\r\n  return (\r\n    <Card>\r\n      <CardHeader>\r\n        <CardTitle>Appointment</CardTitle>\r\n        <CardDescription>Find a date</CardDescription>\r\n        <CardAction>\r\n          <Button\r\n            size=\"sm\"\r\n            variant=\"outline\"\r\n            onClick={() => {\r\n              setMonth(new Date())\r\n              setDate(new Date())\r\n            }}\r\n          >\r\n            Today\r\n          </Button>\r\n        </CardAction>\r\n      </CardHeader>\r\n      <CardContent>\r\n        <Calendar\r\n          mode=\"single\"\r\n          month={month}\r\n          onMonthChange={setMonth}\r\n          selected={date}\r\n          onSelect={setDate}\r\n          className=\"bg-transparent p-0\"\r\n        />\r\n      </CardContent>\r\n    </Card>\r\n  )\r\n}"
+    ],
+    "description": "",
+    "scope": "jsx / tsx"
+  },
+  "start_and_end_of_month": {
+    "prefix": "start_and_end_of_month",
+    "body": [
+      "\"use client\"\r\n\r\nimport * as React from \"react\"\r\nimport { type DateRange } from \"react-day-picker\"\r\n\r\nimport { Calendar } from \"@/components/ui/calendar\"\r\n\r\nexport function Calendar11() {\r\n  const [dateRange, setDateRange] = React.useState<DateRange | undefined>({\r\n    from: new Date(2025, 5, 17),\r\n    to: new Date(2025, 5, 20),\r\n  })\r\n\r\n  return (\r\n    <div className=\"flex min-w-0 flex-col gap-2\">\r\n      <Calendar\r\n        mode=\"range\"\r\n        selected={dateRange}\r\n        onSelect={setDateRange}\r\n        numberOfMonths={2}\r\n        startMonth={new Date(2025, 5, 1)}\r\n        endMonth={new Date(2025, 6, 31)}\r\n        disableNavigation\r\n        className=\"rounded-lg border shadow-sm\"\r\n      />\r\n      <div className=\"text-muted-foreground text-center text-xs\">\r\n        We are open in June and July only.\r\n      </div>\r\n    </div>\r\n  )\r\n}"
+    ],
+    "description": "",
+    "scope": "jsx / tsx"
+  },
+  "localized_calendar": {
+    "prefix": "localized_calendar",
+    "body": [
+      "\"use client\"\r\n\r\nimport * as React from \"react\"\r\nimport { type DateRange } from \"react-day-picker\"\r\nimport { enUS, es } from \"react-day-picker/locale\"\r\n\r\nimport { Calendar } from \"@/components/ui/calendar\"\r\nimport {\r\n  Card,\r\n  CardAction,\r\n  CardContent,\r\n  CardDescription,\r\n  CardHeader,\r\n  CardTitle,\r\n} from \"@/components/ui/card\"\r\nimport {\r\n  Select,\r\n  SelectContent,\r\n  SelectItem,\r\n  SelectTrigger,\r\n  SelectValue,\r\n} from \"@/components/ui/select\"\r\n\r\nconst localizedStrings = {\r\n  en: {\r\n    title: \"Book an appointment\",\r\n    description: \"Select the dates for your appointment\",\r\n  },\r\n  es: {\r\n    title: \"Reserva una cita\",\r\n    description: \"Selecciona las fechas para tu cita\",\r\n  },\r\n} as const\r\n\r\nexport function Calendar12() {\r\n  const [locale, setLocale] =\r\n    React.useState<keyof typeof localizedStrings>(\"es\")\r\n  const [dateRange, setDateRange] = React.useState<DateRange | undefined>({\r\n    from: new Date(2025, 8, 9),\r\n    to: new Date(2025, 8, 17),\r\n  })\r\n\r\n  return (\r\n    <Card>\r\n      <CardHeader className=\"border-b\">\r\n        <CardTitle>{localizedStrings[locale].title}</CardTitle>\r\n        <CardDescription>\r\n          {localizedStrings[locale].description}\r\n        </CardDescription>\r\n        <CardAction>\r\n          <Select\r\n            value={locale}\r\n            onValueChange={(value) =>\r\n              setLocale(value as keyof typeof localizedStrings)\r\n            }\r\n          >\r\n            <SelectTrigger className=\"w-[100px]\">\r\n              <SelectValue placeholder=\"Language\" />\r\n            </SelectTrigger>\r\n            <SelectContent align=\"end\">\r\n              <SelectItem value=\"es\">Español</SelectItem>\r\n              <SelectItem value=\"en\">English</SelectItem>\r\n            </SelectContent>\r\n          </Select>\r\n        </CardAction>\r\n      </CardHeader>\r\n      <CardContent>\r\n        <Calendar\r\n          mode=\"range\"\r\n          selected={dateRange}\r\n          onSelect={setDateRange}\r\n          defaultMonth={dateRange?.from}\r\n          numberOfMonths={2}\r\n          locale={locale === \"es\" ? es : enUS}\r\n          className=\"bg-transparent p-0\"\r\n          buttonVariant=\"outline\"\r\n        />\r\n      </CardContent>\r\n    </Card>\r\n  )\r\n}"
+    ],
+    "description": "",
+    "scope": "jsx / tsx"
+  },
+  "with_month_and_year_dropdown": {
+    "prefix": "with_month_and_year_dropdown",
+    "body": [
+      "\"use client\"\r\n\r\nimport * as React from \"react\"\r\n\r\nimport { Calendar } from \"@/components/ui/calendar\"\r\nimport { Label } from \"@/components/ui/label\"\r\nimport {\r\n  Select,\r\n  SelectContent,\r\n  SelectItem,\r\n  SelectTrigger,\r\n  SelectValue,\r\n} from \"@/components/ui/select\"\r\n\r\nexport function Calendar13() {\r\n  const [dropdown, setDropdown] =\r\n    React.useState<React.ComponentProps<typeof Calendar>[\"captionLayout\"]>(\r\n      \"dropdown\"\r\n    )\r\n  const [date, setDate] = React.useState<Date | undefined>(\r\n    new Date(2025, 5, 12)\r\n  )\r\n\r\n  return (\r\n    <div className=\"flex flex-col gap-4\">\r\n      <Calendar\r\n        mode=\"single\"\r\n        defaultMonth={date}\r\n        selected={date}\r\n        onSelect={setDate}\r\n        captionLayout={dropdown}\r\n        className=\"rounded-lg border shadow-sm\"\r\n      />\r\n      <div className=\"flex flex-col gap-3\">\r\n        <Label htmlFor=\"dropdown\" className=\"px-1\">\r\n          Dropdown\r\n        </Label>\r\n        <Select\r\n          value={dropdown}\r\n          onValueChange={(value) =>\r\n            setDropdown(\r\n              value as React.ComponentProps<typeof Calendar>[\"captionLayout\"]\r\n            )\r\n          }\r\n        >\r\n          <SelectTrigger\r\n            id=\"dropdown\"\r\n            size=\"sm\"\r\n            className=\"bg-background w-full\"\r\n          >\r\n            <SelectValue placeholder=\"Dropdown\" />\r\n          </SelectTrigger>\r\n          <SelectContent align=\"center\">\r\n            <SelectItem value=\"dropdown\">Month and Year</SelectItem>\r\n            <SelectItem value=\"dropdown-months\">Month Only</SelectItem>\r\n            <SelectItem value=\"dropdown-years\">Year Only</SelectItem>\r\n          </SelectContent>\r\n        </Select>\r\n      </div>\r\n    </div>\r\n  )\r\n}"
+    ],
+    "description": "",
+    "scope": "jsx / tsx"
+  },
+  "one_dashboard_page_tsx": {
+    "prefix": "one/dashboard/page.tsx",
+    "body": [
+      "import { AppSidebar } from \"@/components/app-sidebar\"\r\nimport { ChartAreaInteractive } from \"@/components/chart-area-interactive\"\r\nimport { DataTable } from \"@/components/data-table\"\r\nimport { SectionCards } from \"@/components/section-cards\"\r\nimport { SiteHeader } from \"@/components/site-header\"\r\nimport {\r\n  SidebarInset,\r\n  SidebarProvider,\r\n} from \"@/components/ui/sidebar\"\r\n\r\nimport data from \"./data.json\"\r\n\r\nexport default function Page() {\r\n  return (\r\n    <SidebarProvider\r\n      style={\r\n        {\r\n          \"--sidebar-width\": \"calc(var(--spacing) * 72)\",\r\n          \"--header-height\": \"calc(var(--spacing) * 12)\",\r\n        } as React.CSSProperties\r\n      }\r\n    >\r\n      <AppSidebar variant=\"inset\" />\r\n      <SidebarInset>\r\n        <SiteHeader />\r\n        <div className=\"flex flex-1 flex-col\">\r\n          <div className=\"@container/main flex flex-1 flex-col gap-2\">\r\n            <div className=\"flex flex-col gap-4 py-4 md:gap-6 md:py-6\">\r\n              <SectionCards />\r\n              <div className=\"px-4 lg:px-6\">\r\n                <ChartAreaInteractive />\r\n              </div>\r\n              <DataTable data={data} />\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </SidebarInset>\r\n    </SidebarProvider>\r\n  )\r\n}"
+    ],
+    "description": "",
+    "scope": "jsx / tsx"
+  },
+  "one_dashboard_data_json": {
+    "prefix": "one_dashboard_data_json",
+    "body": [
+      "[\r\n  {\r\n    \"id\": 1,\r\n    \"header\": \"Cover page\",\r\n    \"type\": \"Cover page\",\r\n    \"status\": \"In Process\",\r\n    \"target\": \"18\",\r\n    \"limit\": \"5\",\r\n    \"reviewer\": \"Eddie Lake\"\r\n  },\r\n  {\r\n    \"id\": 2,\r\n    \"header\": \"Table of contents\",\r\n    \"type\": \"Table of contents\",\r\n    \"status\": \"Done\",\r\n    \"target\": \"29\",\r\n    \"limit\": \"24\",\r\n    \"reviewer\": \"Eddie Lake\"\r\n  },\r\n  {\r\n    \"id\": 3,\r\n    \"header\": \"Executive summary\",\r\n    \"type\": \"Narrative\",\r\n    \"status\": \"Done\",\r\n    \"target\": \"10\",\r\n    \"limit\": \"13\",\r\n    \"reviewer\": \"Eddie Lake\"\r\n  },\r\n  {\r\n    \"id\": 4,\r\n    \"header\": \"Technical approach\",\r\n    \"type\": \"Narrative\",\r\n    \"status\": \"Done\",\r\n    \"target\": \"27\",\r\n    \"limit\": \"23\",\r\n    \"reviewer\": \"Jamik Tashpulatov\"\r\n  },\r\n  {\r\n    \"id\": 5,\r\n    \"header\": \"Design\",\r\n    \"type\": \"Narrative\",\r\n    \"status\": \"In Process\",\r\n    \"target\": \"2\",\r\n    \"limit\": \"16\",\r\n    \"reviewer\": \"Jamik Tashpulatov\"\r\n  },\r\n  {\r\n    \"id\": 6,\r\n    \"header\": \"Capabilities\",\r\n    \"type\": \"Narrative\",\r\n    \"status\": \"In Process\",\r\n    \"target\": \"20\",\r\n    \"limit\": \"8\",\r\n    \"reviewer\": \"Jamik Tashpulatov\"\r\n  },\r\n  {\r\n    \"id\": 7,\r\n    \"header\": \"Integration with existing systems\",\r\n    \"type\": \"Narrative\",\r\n    \"status\": \"In Process\",\r\n    \"target\": \"19\",\r\n    \"limit\": \"21\",\r\n    \"reviewer\": \"Jamik Tashpulatov\"\r\n  },\r\n  {\r\n    \"id\": 8,\r\n    \"header\": \"Innovation and Advantages\",\r\n    \"type\": \"Narrative\",\r\n    \"status\": \"Done\",\r\n    \"target\": \"25\",\r\n    \"limit\": \"26\",\r\n    \"reviewer\": \"Assign reviewer\"\r\n  },\r\n  {\r\n    \"id\": 9,\r\n    \"header\": \"Overview of EMR's Innovative Solutions\",\r\n    \"type\": \"Technical content\",\r\n    \"status\": \"Done\",\r\n    \"target\": \"7\",\r\n    \"limit\": \"23\",\r\n    \"reviewer\": \"Assign reviewer\"\r\n  },\r\n  {\r\n    \"id\": 10,\r\n    \"header\": \"Advanced Algorithms and Machine Learning\",\r\n    \"type\": \"Narrative\",\r\n    \"status\": \"Done\",\r\n    \"target\": \"30\",\r\n    \"limit\": \"28\",\r\n    \"reviewer\": \"Assign reviewer\"\r\n  },\r\n  {\r\n    \"id\": 11,\r\n    \"header\": \"Adaptive Communication Protocols\",\r\n    \"type\": \"Narrative\",\r\n    \"status\": \"Done\",\r\n    \"target\": \"9\",\r\n    \"limit\": \"31\",\r\n    \"reviewer\": \"Assign reviewer\"\r\n  },\r\n  {\r\n    \"id\": 12,\r\n    \"header\": \"Advantages Over Current Technologies\",\r\n    \"type\": \"Narrative\",\r\n    \"status\": \"Done\",\r\n    \"target\": \"12\",\r\n    \"limit\": \"0\",\r\n    \"reviewer\": \"Assign reviewer\"\r\n  },\r\n  {\r\n    \"id\": 13,\r\n    \"header\": \"Past Performance\",\r\n    \"type\": \"Narrative\",\r\n    \"status\": \"Done\",\r\n    \"target\": \"22\",\r\n    \"limit\": \"33\",\r\n    \"reviewer\": \"Assign reviewer\"\r\n  },\r\n  {\r\n    \"id\": 14,\r\n    \"header\": \"Customer Feedback and Satisfaction Levels\",\r\n    \"type\": \"Narrative\",\r\n    \"status\": \"Done\",\r\n    \"target\": \"15\",\r\n    \"limit\": \"34\",\r\n    \"reviewer\": \"Assign reviewer\"\r\n  },\r\n  {\r\n    \"id\": 15,\r\n    \"header\": \"Implementation Challenges and Solutions\",\r\n    \"type\": \"Narrative\",\r\n    \"status\": \"Done\",\r\n    \"target\": \"3\",\r\n    \"limit\": \"35\",\r\n    \"reviewer\": \"Assign reviewer\"\r\n  },\r\n  {\r\n    \"id\": 16,\r\n    \"header\": \"Security Measures and Data Protection Policies\",\r\n    \"type\": \"Narrative\",\r\n    \"status\": \"In Process\",\r\n    \"target\": \"6\",\r\n    \"limit\": \"36\",\r\n    \"reviewer\": \"Assign reviewer\"\r\n  },\r\n  {\r\n    \"id\": 17,\r\n    \"header\": \"Scalability and Future Proofing\",\r\n    \"type\": \"Narrative\",\r\n    \"status\": \"Done\",\r\n    \"target\": \"4\",\r\n    \"limit\": \"37\",\r\n    \"reviewer\": \"Assign reviewer\"\r\n  },\r\n  {\r\n    \"id\": 18,\r\n    \"header\": \"Cost-Benefit Analysis\",\r\n    \"type\": \"Plain language\",\r\n    \"status\": \"Done\",\r\n    \"target\": \"14\",\r\n    \"limit\": \"38\",\r\n    \"reviewer\": \"Assign reviewer\"\r\n  },\r\n  {\r\n    \"id\": 19,\r\n    \"header\": \"User Training and Onboarding Experience\",\r\n    \"type\": \"Narrative\",\r\n    \"status\": \"Done\",\r\n    \"target\": \"17\",\r\n    \"limit\": \"39\",\r\n    \"reviewer\": \"Assign reviewer\"\r\n  },\r\n  {\r\n    \"id\": 20,\r\n    \"header\": \"Future Development Roadmap\",\r\n    \"type\": \"Narrative\",\r\n    \"status\": \"Done\",\r\n    \"target\": \"11\",\r\n    \"limit\": \"40\",\r\n    \"reviewer\": \"Assign reviewer\"\r\n  },\r\n  {\r\n    \"id\": 21,\r\n    \"header\": \"System Architecture Overview\",\r\n    \"type\": \"Technical content\",\r\n    \"status\": \"In Process\",\r\n    \"target\": \"24\",\r\n    \"limit\": \"18\",\r\n    \"reviewer\": \"Maya Johnson\"\r\n  },\r\n  {\r\n    \"id\": 22,\r\n    \"header\": \"Risk Management Plan\",\r\n    \"type\": \"Narrative\",\r\n    \"status\": \"Done\",\r\n    \"target\": \"15\",\r\n    \"limit\": \"22\",\r\n    \"reviewer\": \"Carlos Rodriguez\"\r\n  },\r\n  {\r\n    \"id\": 23,\r\n    \"header\": \"Compliance Documentation\",\r\n    \"type\": \"Legal\",\r\n    \"status\": \"In Process\",\r\n    \"target\": \"31\",\r\n    \"limit\": \"27\",\r\n    \"reviewer\": \"Sarah Chen\"\r\n  },\r\n  {\r\n    \"id\": 24,\r\n    \"header\": \"API Documentation\",\r\n    \"type\": \"Technical content\",\r\n    \"status\": \"Done\",\r\n    \"target\": \"8\",\r\n    \"limit\": \"12\",\r\n    \"reviewer\": \"Raj Patel\"\r\n  },\r\n  {\r\n    \"id\": 25,\r\n    \"header\": \"User Interface Mockups\",\r\n    \"type\": \"Visual\",\r\n    \"status\": \"In Process\",\r\n    \"target\": \"19\",\r\n    \"limit\": \"25\",\r\n    \"reviewer\": \"Leila Ahmadi\"\r\n  },\r\n  {\r\n    \"id\": 26,\r\n    \"header\": \"Database Schema\",\r\n    \"type\": \"Technical content\",\r\n    \"status\": \"Done\",\r\n    \"target\": \"22\",\r\n    \"limit\": \"20\",\r\n    \"reviewer\": \"Thomas Wilson\"\r\n  },\r\n  {\r\n    \"id\": 27,\r\n    \"header\": \"Testing Methodology\",\r\n    \"type\": \"Technical content\",\r\n    \"status\": \"In Process\",\r\n    \"target\": \"17\",\r\n    \"limit\": \"14\",\r\n    \"reviewer\": \"Assign reviewer\"\r\n  },\r\n  {\r\n    \"id\": 28,\r\n    \"header\": \"Deployment Strategy\",\r\n    \"type\": \"Narrative\",\r\n    \"status\": \"Done\",\r\n    \"target\": \"26\",\r\n    \"limit\": \"30\",\r\n    \"reviewer\": \"Eddie Lake\"\r\n  },\r\n  {\r\n    \"id\": 29,\r\n    \"header\": \"Budget Breakdown\",\r\n    \"type\": \"Financial\",\r\n    \"status\": \"In Process\",\r\n    \"target\": \"13\",\r\n    \"limit\": \"16\",\r\n    \"reviewer\": \"Jamik Tashpulatov\"\r\n  },\r\n  {\r\n    \"id\": 30,\r\n    \"header\": \"Market Analysis\",\r\n    \"type\": \"Research\",\r\n    \"status\": \"Done\",\r\n    \"target\": \"29\",\r\n    \"limit\": \"32\",\r\n    \"reviewer\": \"Sophia Martinez\"\r\n  },\r\n  {\r\n    \"id\": 31,\r\n    \"header\": \"Competitor Comparison\",\r\n    \"type\": \"Research\",\r\n    \"status\": \"In Process\",\r\n    \"target\": \"21\",\r\n    \"limit\": \"19\",\r\n    \"reviewer\": \"Assign reviewer\"\r\n  },\r\n  {\r\n    \"id\": 32,\r\n    \"header\": \"Maintenance Plan\",\r\n    \"type\": \"Technical content\",\r\n    \"status\": \"Done\",\r\n    \"target\": \"16\",\r\n    \"limit\": \"23\",\r\n    \"reviewer\": \"Alex Thompson\"\r\n  },\r\n  {\r\n    \"id\": 33,\r\n    \"header\": \"User Personas\",\r\n    \"type\": \"Research\",\r\n    \"status\": \"In Process\",\r\n    \"target\": \"27\",\r\n    \"limit\": \"24\",\r\n    \"reviewer\": \"Nina Patel\"\r\n  },\r\n  {\r\n    \"id\": 34,\r\n    \"header\": \"Accessibility Compliance\",\r\n    \"type\": \"Legal\",\r\n    \"status\": \"Done\",\r\n    \"target\": \"18\",\r\n    \"limit\": \"21\",\r\n    \"reviewer\": \"Assign reviewer\"\r\n  },\r\n  {\r\n    \"id\": 35,\r\n    \"header\": \"Performance Metrics\",\r\n    \"type\": \"Technical content\",\r\n    \"status\": \"In Process\",\r\n    \"target\": \"23\",\r\n    \"limit\": \"26\",\r\n    \"reviewer\": \"David Kim\"\r\n  },\r\n  {\r\n    \"id\": 36,\r\n    \"header\": \"Disaster Recovery Plan\",\r\n    \"type\": \"Technical content\",\r\n    \"status\": \"Done\",\r\n    \"target\": \"14\",\r\n    \"limit\": \"17\",\r\n    \"reviewer\": \"Jamik Tashpulatov\"\r\n  },\r\n  {\r\n    \"id\": 37,\r\n    \"header\": \"Third-party Integrations\",\r\n    \"type\": \"Technical content\",\r\n    \"status\": \"In Process\",\r\n    \"target\": \"25\",\r\n    \"limit\": \"28\",\r\n    \"reviewer\": \"Eddie Lake\"\r\n  },\r\n  {\r\n    \"id\": 38,\r\n    \"header\": \"User Feedback Summary\",\r\n    \"type\": \"Research\",\r\n    \"status\": \"Done\",\r\n    \"target\": \"20\",\r\n    \"limit\": \"15\",\r\n    \"reviewer\": \"Assign reviewer\"\r\n  },\r\n  {\r\n    \"id\": 39,\r\n    \"header\": \"Localization Strategy\",\r\n    \"type\": \"Narrative\",\r\n    \"status\": \"In Process\",\r\n    \"target\": \"12\",\r\n    \"limit\": \"19\",\r\n    \"reviewer\": \"Maria Garcia\"\r\n  },\r\n  {\r\n    \"id\": 40,\r\n    \"header\": \"Mobile Compatibility\",\r\n    \"type\": \"Technical content\",\r\n    \"status\": \"Done\",\r\n    \"target\": \"28\",\r\n    \"limit\": \"31\",\r\n    \"reviewer\": \"James Wilson\"\r\n  },\r\n  {\r\n    \"id\": 41,\r\n    \"header\": \"Data Migration Plan\",\r\n    \"type\": \"Technical content\",\r\n    \"status\": \"In Process\",\r\n    \"target\": \"19\",\r\n    \"limit\": \"22\",\r\n    \"reviewer\": \"Assign reviewer\"\r\n  },\r\n  {\r\n    \"id\": 42,\r\n    \"header\": \"Quality Assurance Protocols\",\r\n    \"type\": \"Technical content\",\r\n    \"status\": \"Done\",\r\n    \"target\": \"30\",\r\n    \"limit\": \"33\",\r\n    \"reviewer\": \"Priya Singh\"\r\n  },\r\n  {\r\n    \"id\": 43,\r\n    \"header\": \"Stakeholder Analysis\",\r\n    \"type\": \"Research\",\r\n    \"status\": \"In Process\",\r\n    \"target\": \"11\",\r\n    \"limit\": \"14\",\r\n    \"reviewer\": \"Eddie Lake\"\r\n  },\r\n  {\r\n    \"id\": 44,\r\n    \"header\": \"Environmental Impact Assessment\",\r\n    \"type\": \"Research\",\r\n    \"status\": \"Done\",\r\n    \"target\": \"24\",\r\n    \"limit\": \"27\",\r\n    \"reviewer\": \"Assign reviewer\"\r\n  },\r\n  {\r\n    \"id\": 45,\r\n    \"header\": \"Intellectual Property Rights\",\r\n    \"type\": \"Legal\",\r\n    \"status\": \"In Process\",\r\n    \"target\": \"17\",\r\n    \"limit\": \"20\",\r\n    \"reviewer\": \"Sarah Johnson\"\r\n  },\r\n  {\r\n    \"id\": 46,\r\n    \"header\": \"Customer Support Framework\",\r\n    \"type\": \"Narrative\",\r\n    \"status\": \"Done\",\r\n    \"target\": \"22\",\r\n    \"limit\": \"25\",\r\n    \"reviewer\": \"Jamik Tashpulatov\"\r\n  },\r\n  {\r\n    \"id\": 47,\r\n    \"header\": \"Version Control Strategy\",\r\n    \"type\": \"Technical content\",\r\n    \"status\": \"In Process\",\r\n    \"target\": \"15\",\r\n    \"limit\": \"18\",\r\n    \"reviewer\": \"Assign reviewer\"\r\n  },\r\n  {\r\n    \"id\": 48,\r\n    \"header\": \"Continuous Integration Pipeline\",\r\n    \"type\": \"Technical content\",\r\n    \"status\": \"Done\",\r\n    \"target\": \"26\",\r\n    \"limit\": \"29\",\r\n    \"reviewer\": \"Michael Chen\"\r\n  },\r\n  {\r\n    \"id\": 49,\r\n    \"header\": \"Regulatory Compliance\",\r\n    \"type\": \"Legal\",\r\n    \"status\": \"In Process\",\r\n    \"target\": \"13\",\r\n    \"limit\": \"16\",\r\n    \"reviewer\": \"Assign reviewer\"\r\n  },\r\n  {\r\n    \"id\": 50,\r\n    \"header\": \"User Authentication System\",\r\n    \"type\": \"Technical content\",\r\n    \"status\": \"Done\",\r\n    \"target\": \"28\",\r\n    \"limit\": \"31\",\r\n    \"reviewer\": \"Eddie Lake\"\r\n  },\r\n  {\r\n    \"id\": 51,\r\n    \"header\": \"Data Analytics Framework\",\r\n    \"type\": \"Technical content\",\r\n    \"status\": \"In Process\",\r\n    \"target\": \"21\",\r\n    \"limit\": \"24\",\r\n    \"reviewer\": \"Jamik Tashpulatov\"\r\n  },\r\n  {\r\n    \"id\": 52,\r\n    \"header\": \"Cloud Infrastructure\",\r\n    \"type\": \"Technical content\",\r\n    \"status\": \"Done\",\r\n    \"target\": \"16\",\r\n    \"limit\": \"19\",\r\n    \"reviewer\": \"Assign reviewer\"\r\n  },\r\n  {\r\n    \"id\": 53,\r\n    \"header\": \"Network Security Measures\",\r\n    \"type\": \"Technical content\",\r\n    \"status\": \"In Process\",\r\n    \"target\": \"29\",\r\n    \"limit\": \"32\",\r\n    \"reviewer\": \"Lisa Wong\"\r\n  },\r\n  {\r\n    \"id\": 54,\r\n    \"header\": \"Project Timeline\",\r\n    \"type\": \"Planning\",\r\n    \"status\": \"Done\",\r\n    \"target\": \"14\",\r\n    \"limit\": \"17\",\r\n    \"reviewer\": \"Eddie Lake\"\r\n  },\r\n  {\r\n    \"id\": 55,\r\n    \"header\": \"Resource Allocation\",\r\n    \"type\": \"Planning\",\r\n    \"status\": \"In Process\",\r\n    \"target\": \"27\",\r\n    \"limit\": \"30\",\r\n    \"reviewer\": \"Assign reviewer\"\r\n  },\r\n  {\r\n    \"id\": 56,\r\n    \"header\": \"Team Structure and Roles\",\r\n    \"type\": \"Planning\",\r\n    \"status\": \"Done\",\r\n    \"target\": \"20\",\r\n    \"limit\": \"23\",\r\n    \"reviewer\": \"Jamik Tashpulatov\"\r\n  },\r\n  {\r\n    \"id\": 57,\r\n    \"header\": \"Communication Protocols\",\r\n    \"type\": \"Planning\",\r\n    \"status\": \"In Process\",\r\n    \"target\": \"15\",\r\n    \"limit\": \"18\",\r\n    \"reviewer\": \"Assign reviewer\"\r\n  },\r\n  {\r\n    \"id\": 58,\r\n    \"header\": \"Success Metrics\",\r\n    \"type\": \"Planning\",\r\n    \"status\": \"Done\",\r\n    \"target\": \"30\",\r\n    \"limit\": \"33\",\r\n    \"reviewer\": \"Eddie Lake\"\r\n  },\r\n  {\r\n    \"id\": 59,\r\n    \"header\": \"Internationalization Support\",\r\n    \"type\": \"Technical content\",\r\n    \"status\": \"In Process\",\r\n    \"target\": \"23\",\r\n    \"limit\": \"26\",\r\n    \"reviewer\": \"Jamik Tashpulatov\"\r\n  },\r\n  {\r\n    \"id\": 60,\r\n    \"header\": \"Backup and Recovery Procedures\",\r\n    \"type\": \"Technical content\",\r\n    \"status\": \"Done\",\r\n    \"target\": \"18\",\r\n    \"limit\": \"21\",\r\n    \"reviewer\": \"Assign reviewer\"\r\n  },\r\n  {\r\n    \"id\": 61,\r\n    \"header\": \"Monitoring and Alerting System\",\r\n    \"type\": \"Technical content\",\r\n    \"status\": \"In Process\",\r\n    \"target\": \"25\",\r\n    \"limit\": \"28\",\r\n    \"reviewer\": \"Daniel Park\"\r\n  },\r\n  {\r\n    \"id\": 62,\r\n    \"header\": \"Code Review Guidelines\",\r\n    \"type\": \"Technical content\",\r\n    \"status\": \"Done\",\r\n    \"target\": \"12\",\r\n    \"limit\": \"15\",\r\n    \"reviewer\": \"Eddie Lake\"\r\n  },\r\n  {\r\n    \"id\": 63,\r\n    \"header\": \"Documentation Standards\",\r\n    \"type\": \"Technical content\",\r\n    \"status\": \"In Process\",\r\n    \"target\": \"27\",\r\n    \"limit\": \"30\",\r\n    \"reviewer\": \"Jamik Tashpulatov\"\r\n  },\r\n  {\r\n    \"id\": 64,\r\n    \"header\": \"Release Management Process\",\r\n    \"type\": \"Planning\",\r\n    \"status\": \"Done\",\r\n    \"target\": \"22\",\r\n    \"limit\": \"25\",\r\n    \"reviewer\": \"Assign reviewer\"\r\n  },\r\n  {\r\n    \"id\": 65,\r\n    \"header\": \"Feature Prioritization Matrix\",\r\n    \"type\": \"Planning\",\r\n    \"status\": \"In Process\",\r\n    \"target\": \"19\",\r\n    \"limit\": \"22\",\r\n    \"reviewer\": \"Emma Davis\"\r\n  },\r\n  {\r\n    \"id\": 66,\r\n    \"header\": \"Technical Debt Assessment\",\r\n    \"type\": \"Technical content\",\r\n    \"status\": \"Done\",\r\n    \"target\": \"24\",\r\n    \"limit\": \"27\",\r\n    \"reviewer\": \"Eddie Lake\"\r\n  },\r\n  {\r\n    \"id\": 67,\r\n    \"header\": \"Capacity Planning\",\r\n    \"type\": \"Planning\",\r\n    \"status\": \"In Process\",\r\n    \"target\": \"21\",\r\n    \"limit\": \"24\",\r\n    \"reviewer\": \"Jamik Tashpulatov\"\r\n  },\r\n  {\r\n    \"id\": 68,\r\n    \"header\": \"Service Level Agreements\",\r\n    \"type\": \"Legal\",\r\n    \"status\": \"Done\",\r\n    \"target\": \"26\",\r\n    \"limit\": \"29\",\r\n    \"reviewer\": \"Assign reviewer\"\r\n  }\r\n]"
+    ],
+    "description": "",
+    "scope": "jsx / tsx"
+  },
+  "one_components_app-sidebar_tsx": {
+    "prefix": "one_components_app-sidebar_tsx",
+    "body": [
+      "\"use client\"\r\n\r\nimport * as React from \"react\"\r\nimport {\r\n  IconCamera,\r\n  IconChartBar,\r\n  IconDashboard,\r\n  IconDatabase,\r\n  IconFileAi,\r\n  IconFileDescription,\r\n  IconFileWord,\r\n  IconFolder,\r\n  IconHelp,\r\n  IconInnerShadowTop,\r\n  IconListDetails,\r\n  IconReport,\r\n  IconSearch,\r\n  IconSettings,\r\n  IconUsers,\r\n} from \"@tabler/icons-react\"\r\n\r\nimport { NavDocuments } from \"@/components/nav-documents\"\r\nimport { NavMain } from \"@/components/nav-main\"\r\nimport { NavSecondary } from \"@/components/nav-secondary\"\r\nimport { NavUser } from \"@/components/nav-user\"\r\nimport {\r\n  Sidebar,\r\n  SidebarContent,\r\n  SidebarFooter,\r\n  SidebarHeader,\r\n  SidebarMenu,\r\n  SidebarMenuButton,\r\n  SidebarMenuItem,\r\n} from \"@/components/ui/sidebar\"\r\n\r\nconst data = {\r\n  user: {\r\n    name: \"shadcn\",\r\n    email: \"m@example.com\",\r\n    avatar: \"/avatars/shadcn.jpg\",\r\n  },\r\n  navMain: [\r\n    {\r\n      title: \"Dashboard\",\r\n      url: \"#\",\r\n      icon: IconDashboard,\r\n    },\r\n    {\r\n      title: \"Lifecycle\",\r\n      url: \"#\",\r\n      icon: IconListDetails,\r\n    },\r\n    {\r\n      title: \"Analytics\",\r\n      url: \"#\",\r\n      icon: IconChartBar,\r\n    },\r\n    {\r\n      title: \"Projects\",\r\n      url: \"#\",\r\n      icon: IconFolder,\r\n    },\r\n    {\r\n      title: \"Team\",\r\n      url: \"#\",\r\n      icon: IconUsers,\r\n    },\r\n  ],\r\n  navClouds: [\r\n    {\r\n      title: \"Capture\",\r\n      icon: IconCamera,\r\n      isActive: true,\r\n      url: \"#\",\r\n      items: [\r\n        {\r\n          title: \"Active Proposals\",\r\n          url: \"#\",\r\n        },\r\n        {\r\n          title: \"Archived\",\r\n          url: \"#\",\r\n        },\r\n      ],\r\n    },\r\n    {\r\n      title: \"Proposal\",\r\n      icon: IconFileDescription,\r\n      url: \"#\",\r\n      items: [\r\n        {\r\n          title: \"Active Proposals\",\r\n          url: \"#\",\r\n        },\r\n        {\r\n          title: \"Archived\",\r\n          url: \"#\",\r\n        },\r\n      ],\r\n    },\r\n    {\r\n      title: \"Prompts\",\r\n      icon: IconFileAi,\r\n      url: \"#\",\r\n      items: [\r\n        {\r\n          title: \"Active Proposals\",\r\n          url: \"#\",\r\n        },\r\n        {\r\n          title: \"Archived\",\r\n          url: \"#\",\r\n        },\r\n      ],\r\n    },\r\n  ],\r\n  navSecondary: [\r\n    {\r\n      title: \"Settings\",\r\n      url: \"#\",\r\n      icon: IconSettings,\r\n    },\r\n    {\r\n      title: \"Get Help\",\r\n      url: \"#\",\r\n      icon: IconHelp,\r\n    },\r\n    {\r\n      title: \"Search\",\r\n      url: \"#\",\r\n      icon: IconSearch,\r\n    },\r\n  ],\r\n  documents: [\r\n    {\r\n      name: \"Data Library\",\r\n      url: \"#\",\r\n      icon: IconDatabase,\r\n    },\r\n    {\r\n      name: \"Reports\",\r\n      url: \"#\",\r\n      icon: IconReport,\r\n    },\r\n    {\r\n      name: \"Word Assistant\",\r\n      url: \"#\",\r\n      icon: IconFileWord,\r\n    },\r\n  ],\r\n}\r\n\r\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\r\n  return (\r\n    <Sidebar collapsible=\"offcanvas\" {...props}>\r\n      <SidebarHeader>\r\n        <SidebarMenu>\r\n          <SidebarMenuItem>\r\n            <SidebarMenuButton\r\n              asChild\r\n              className=\"data-[slot=sidebar-menu-button]:!p-1.5\"\r\n            >\r\n              <a href=\"#\">\r\n                <IconInnerShadowTop className=\"!size-5\" />\r\n                <span className=\"text-base font-semibold\">Acme Inc.</span>\r\n              </a>\r\n            </SidebarMenuButton>\r\n          </SidebarMenuItem>\r\n        </SidebarMenu>\r\n      </SidebarHeader>\r\n      <SidebarContent>\r\n        <NavMain items={data.navMain} />\r\n        <NavDocuments items={data.documents} />\r\n        <NavSecondary items={data.navSecondary} className=\"mt-auto\" />\r\n      </SidebarContent>\r\n      <SidebarFooter>\r\n        <NavUser user={data.user} />\r\n      </SidebarFooter>\r\n    </Sidebar>\r\n  )\r\n}"
+    ],
+    "description": "",
+    "scope": "jsx / tsx"
+  },
+  "one_components_chart-area-interactive_tsx": {
+    "prefix": "one_components_chart-area-interactive_tsx",
+    "body": [
+      "\"use client\"\r\n\r\nimport * as React from \"react\"\r\nimport { Area, AreaChart, CartesianGrid, XAxis } from \"recharts\"\r\n\r\nimport { useIsMobile } from \"@/hooks/use-mobile\"\r\nimport {\r\n  Card,\r\n  CardAction,\r\n  CardContent,\r\n  CardDescription,\r\n  CardHeader,\r\n  CardTitle,\r\n} from \"@/components/ui/card\"\r\nimport {\r\n  ChartConfig,\r\n  ChartContainer,\r\n  ChartTooltip,\r\n  ChartTooltipContent,\r\n} from \"@/components/ui/chart\"\r\nimport {\r\n  Select,\r\n  SelectContent,\r\n  SelectItem,\r\n  SelectTrigger,\r\n  SelectValue,\r\n} from \"@/components/ui/select\"\r\nimport {\r\n  ToggleGroup,\r\n  ToggleGroupItem,\r\n} from \"@/components/ui/toggle-group\"\r\n\r\nexport const description = \"An interactive area chart\"\r\n\r\nconst chartData = [\r\n  { date: \"2024-04-01\", desktop: 222, mobile: 150 },\r\n  { date: \"2024-04-02\", desktop: 97, mobile: 180 },\r\n  { date: \"2024-04-03\", desktop: 167, mobile: 120 },\r\n  { date: \"2024-04-04\", desktop: 242, mobile: 260 },\r\n  { date: \"2024-04-05\", desktop: 373, mobile: 290 },\r\n  { date: \"2024-04-06\", desktop: 301, mobile: 340 },\r\n  { date: \"2024-04-07\", desktop: 245, mobile: 180 },\r\n  { date: \"2024-04-08\", desktop: 409, mobile: 320 },\r\n  { date: \"2024-04-09\", desktop: 59, mobile: 110 },\r\n  { date: \"2024-04-10\", desktop: 261, mobile: 190 },\r\n  { date: \"2024-04-11\", desktop: 327, mobile: 350 },\r\n  { date: \"2024-04-12\", desktop: 292, mobile: 210 },\r\n  { date: \"2024-04-13\", desktop: 342, mobile: 380 },\r\n  { date: \"2024-04-14\", desktop: 137, mobile: 220 },\r\n  { date: \"2024-04-15\", desktop: 120, mobile: 170 },\r\n  { date: \"2024-04-16\", desktop: 138, mobile: 190 },\r\n  { date: \"2024-04-17\", desktop: 446, mobile: 360 },\r\n  { date: \"2024-04-18\", desktop: 364, mobile: 410 },\r\n  { date: \"2024-04-19\", desktop: 243, mobile: 180 },\r\n  { date: \"2024-04-20\", desktop: 89, mobile: 150 },\r\n  { date: \"2024-04-21\", desktop: 137, mobile: 200 },\r\n  { date: \"2024-04-22\", desktop: 224, mobile: 170 },\r\n  { date: \"2024-04-23\", desktop: 138, mobile: 230 },\r\n  { date: \"2024-04-24\", desktop: 387, mobile: 290 },\r\n  { date: \"2024-04-25\", desktop: 215, mobile: 250 },\r\n  { date: \"2024-04-26\", desktop: 75, mobile: 130 },\r\n  { date: \"2024-04-27\", desktop: 383, mobile: 420 },\r\n  { date: \"2024-04-28\", desktop: 122, mobile: 180 },\r\n  { date: \"2024-04-29\", desktop: 315, mobile: 240 },\r\n  { date: \"2024-04-30\", desktop: 454, mobile: 380 },\r\n  { date: \"2024-05-01\", desktop: 165, mobile: 220 },\r\n  { date: \"2024-05-02\", desktop: 293, mobile: 310 },\r\n  { date: \"2024-05-03\", desktop: 247, mobile: 190 },\r\n  { date: \"2024-05-04\", desktop: 385, mobile: 420 },\r\n  { date: \"2024-05-05\", desktop: 481, mobile: 390 },\r\n  { date: \"2024-05-06\", desktop: 498, mobile: 520 },\r\n  { date: \"2024-05-07\", desktop: 388, mobile: 300 },\r\n  { date: \"2024-05-08\", desktop: 149, mobile: 210 },\r\n  { date: \"2024-05-09\", desktop: 227, mobile: 180 },\r\n  { date: \"2024-05-10\", desktop: 293, mobile: 330 },\r\n  { date: \"2024-05-11\", desktop: 335, mobile: 270 },\r\n  { date: \"2024-05-12\", desktop: 197, mobile: 240 },\r\n  { date: \"2024-05-13\", desktop: 197, mobile: 160 },\r\n  { date: \"2024-05-14\", desktop: 448, mobile: 490 },\r\n  { date: \"2024-05-15\", desktop: 473, mobile: 380 },\r\n  { date: \"2024-05-16\", desktop: 338, mobile: 400 },\r\n  { date: \"2024-05-17\", desktop: 499, mobile: 420 },\r\n  { date: \"2024-05-18\", desktop: 315, mobile: 350 },\r\n  { date: \"2024-05-19\", desktop: 235, mobile: 180 },\r\n  { date: \"2024-05-20\", desktop: 177, mobile: 230 },\r\n  { date: \"2024-05-21\", desktop: 82, mobile: 140 },\r\n  { date: \"2024-05-22\", desktop: 81, mobile: 120 },\r\n  { date: \"2024-05-23\", desktop: 252, mobile: 290 },\r\n  { date: \"2024-05-24\", desktop: 294, mobile: 220 },\r\n  { date: \"2024-05-25\", desktop: 201, mobile: 250 },\r\n  { date: \"2024-05-26\", desktop: 213, mobile: 170 },\r\n  { date: \"2024-05-27\", desktop: 420, mobile: 460 },\r\n  { date: \"2024-05-28\", desktop: 233, mobile: 190 },\r\n  { date: \"2024-05-29\", desktop: 78, mobile: 130 },\r\n  { date: \"2024-05-30\", desktop: 340, mobile: 280 },\r\n  { date: \"2024-05-31\", desktop: 178, mobile: 230 },\r\n  { date: \"2024-06-01\", desktop: 178, mobile: 200 },\r\n  { date: \"2024-06-02\", desktop: 470, mobile: 410 },\r\n  { date: \"2024-06-03\", desktop: 103, mobile: 160 },\r\n  { date: \"2024-06-04\", desktop: 439, mobile: 380 },\r\n  { date: \"2024-06-05\", desktop: 88, mobile: 140 },\r\n  { date: \"2024-06-06\", desktop: 294, mobile: 250 },\r\n  { date: \"2024-06-07\", desktop: 323, mobile: 370 },\r\n  { date: \"2024-06-08\", desktop: 385, mobile: 320 },\r\n  { date: \"2024-06-09\", desktop: 438, mobile: 480 },\r\n  { date: \"2024-06-10\", desktop: 155, mobile: 200 },\r\n  { date: \"2024-06-11\", desktop: 92, mobile: 150 },\r\n  { date: \"2024-06-12\", desktop: 492, mobile: 420 },\r\n  { date: \"2024-06-13\", desktop: 81, mobile: 130 },\r\n  { date: \"2024-06-14\", desktop: 426, mobile: 380 },\r\n  { date: \"2024-06-15\", desktop: 307, mobile: 350 },\r\n  { date: \"2024-06-16\", desktop: 371, mobile: 310 },\r\n  { date: \"2024-06-17\", desktop: 475, mobile: 520 },\r\n  { date: \"2024-06-18\", desktop: 107, mobile: 170 },\r\n  { date: \"2024-06-19\", desktop: 341, mobile: 290 },\r\n  { date: \"2024-06-20\", desktop: 408, mobile: 450 },\r\n  { date: \"2024-06-21\", desktop: 169, mobile: 210 },\r\n  { date: \"2024-06-22\", desktop: 317, mobile: 270 },\r\n  { date: \"2024-06-23\", desktop: 480, mobile: 530 },\r\n  { date: \"2024-06-24\", desktop: 132, mobile: 180 },\r\n  { date: \"2024-06-25\", desktop: 141, mobile: 190 },\r\n  { date: \"2024-06-26\", desktop: 434, mobile: 380 },\r\n  { date: \"2024-06-27\", desktop: 448, mobile: 490 },\r\n  { date: \"2024-06-28\", desktop: 149, mobile: 200 },\r\n  { date: \"2024-06-29\", desktop: 103, mobile: 160 },\r\n  { date: \"2024-06-30\", desktop: 446, mobile: 400 },\r\n]\r\n\r\nconst chartConfig = {\r\n  visitors: {\r\n    label: \"Visitors\",\r\n  },\r\n  desktop: {\r\n    label: \"Desktop\",\r\n    color: \"var(--primary)\",\r\n  },\r\n  mobile: {\r\n    label: \"Mobile\",\r\n    color: \"var(--primary)\",\r\n  },\r\n} satisfies ChartConfig\r\n\r\nexport function ChartAreaInteractive() {\r\n  const isMobile = useIsMobile()\r\n  const [timeRange, setTimeRange] = React.useState(\"90d\")\r\n\r\n  React.useEffect(() => {\r\n    if (isMobile) {\r\n      setTimeRange(\"7d\")\r\n    }\r\n  }, [isMobile])\r\n\r\n  const filteredData = chartData.filter((item) => {\r\n    const date = new Date(item.date)\r\n    const referenceDate = new Date(\"2024-06-30\")\r\n    let daysToSubtract = 90\r\n    if (timeRange === \"30d\") {\r\n      daysToSubtract = 30\r\n    } else if (timeRange === \"7d\") {\r\n      daysToSubtract = 7\r\n    }\r\n    const startDate = new Date(referenceDate)\r\n    startDate.setDate(startDate.getDate() - daysToSubtract)\r\n    return date >= startDate\r\n  })\r\n\r\n  return (\r\n    <Card className=\"@container/card\">\r\n      <CardHeader>\r\n        <CardTitle>Total Visitors</CardTitle>\r\n        <CardDescription>\r\n          <span className=\"hidden @[540px]/card:block\">\r\n            Total for the last 3 months\r\n          </span>\r\n          <span className=\"@[540px]/card:hidden\">Last 3 months</span>\r\n        </CardDescription>\r\n        <CardAction>\r\n          <ToggleGroup\r\n            type=\"single\"\r\n            value={timeRange}\r\n            onValueChange={setTimeRange}\r\n            variant=\"outline\"\r\n            className=\"hidden *:data-[slot=toggle-group-item]:!px-4 @[767px]/card:flex\"\r\n          >\r\n            <ToggleGroupItem value=\"90d\">Last 3 months</ToggleGroupItem>\r\n            <ToggleGroupItem value=\"30d\">Last 30 days</ToggleGroupItem>\r\n            <ToggleGroupItem value=\"7d\">Last 7 days</ToggleGroupItem>\r\n          </ToggleGroup>\r\n          <Select value={timeRange} onValueChange={setTimeRange}>\r\n            <SelectTrigger\r\n              className=\"flex w-40 **:data-[slot=select-value]:block **:data-[slot=select-value]:truncate @[767px]/card:hidden\"\r\n              size=\"sm\"\r\n              aria-label=\"Select a value\"\r\n            >\r\n              <SelectValue placeholder=\"Last 3 months\" />\r\n            </SelectTrigger>\r\n            <SelectContent className=\"rounded-xl\">\r\n              <SelectItem value=\"90d\" className=\"rounded-lg\">\r\n                Last 3 months\r\n              </SelectItem>\r\n              <SelectItem value=\"30d\" className=\"rounded-lg\">\r\n                Last 30 days\r\n              </SelectItem>\r\n              <SelectItem value=\"7d\" className=\"rounded-lg\">\r\n                Last 7 days\r\n              </SelectItem>\r\n            </SelectContent>\r\n          </Select>\r\n        </CardAction>\r\n      </CardHeader>\r\n      <CardContent className=\"px-2 pt-4 sm:px-6 sm:pt-6\">\r\n        <ChartContainer\r\n          config={chartConfig}\r\n          className=\"aspect-auto h-[250px] w-full\"\r\n        >\r\n          <AreaChart data={filteredData}>\r\n            <defs>\r\n              <linearGradient id=\"fillDesktop\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\r\n                <stop\r\n                  offset=\"5%\"\r\n                  stopColor=\"var(--color-desktop)\"\r\n                  stopOpacity={1.0}\r\n                />\r\n                <stop\r\n                  offset=\"95%\"\r\n                  stopColor=\"var(--color-desktop)\"\r\n                  stopOpacity={0.1}\r\n                />\r\n              </linearGradient>\r\n              <linearGradient id=\"fillMobile\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\r\n                <stop\r\n                  offset=\"5%\"\r\n                  stopColor=\"var(--color-mobile)\"\r\n                  stopOpacity={0.8}\r\n                />\r\n                <stop\r\n                  offset=\"95%\"\r\n                  stopColor=\"var(--color-mobile)\"\r\n                  stopOpacity={0.1}\r\n                />\r\n              </linearGradient>\r\n            </defs>\r\n            <CartesianGrid vertical={false} />\r\n            <XAxis\r\n              dataKey=\"date\"\r\n              tickLine={false}\r\n              axisLine={false}\r\n              tickMargin={8}\r\n              minTickGap={32}\r\n              tickFormatter={(value) => {\r\n                const date = new Date(value)\r\n                return date.toLocaleDateString(\"en-US\", {\r\n                  month: \"short\",\r\n                  day: \"numeric\",\r\n                })\r\n              }}\r\n            />\r\n            <ChartTooltip\r\n              cursor={false}\r\n              content={\r\n                <ChartTooltipContent\r\n                  labelFormatter={(value) => {\r\n                    return new Date(value).toLocaleDateString(\"en-US\", {\r\n                      month: \"short\",\r\n                      day: \"numeric\",\r\n                    })\r\n                  }}\r\n                  indicator=\"dot\"\r\n                />\r\n              }\r\n            />\r\n            <Area\r\n              dataKey=\"mobile\"\r\n              type=\"natural\"\r\n              fill=\"url(#fillMobile)\"\r\n              stroke=\"var(--color-mobile)\"\r\n              stackId=\"a\"\r\n            />\r\n            <Area\r\n              dataKey=\"desktop\"\r\n              type=\"natural\"\r\n              fill=\"url(#fillDesktop)\"\r\n              stroke=\"var(--color-desktop)\"\r\n              stackId=\"a\"\r\n            />\r\n          </AreaChart>\r\n        </ChartContainer>\r\n      </CardContent>\r\n    </Card>\r\n  )\r\n}"
+    ],
+    "description": "",
+    "scope": "jsx / tsx"
+  },
+  "one_components_data-table_tsx": {
+    "prefix": "one_components_data-table_tsx",
+    "body": [
+      "\"use client\"\r\n\r\nimport * as React from \"react\"\r\nimport {\r\n  closestCenter,\r\n  DndContext,\r\n  KeyboardSensor,\r\n  MouseSensor,\r\n  TouchSensor,\r\n  useSensor,\r\n  useSensors,\r\n  type DragEndEvent,\r\n  type UniqueIdentifier,\r\n} from \"@dnd-kit/core\"\r\nimport { restrictToVerticalAxis } from \"@dnd-kit/modifiers\"\r\nimport {\r\n  arrayMove,\r\n  SortableContext,\r\n  useSortable,\r\n  verticalListSortingStrategy,\r\n} from \"@dnd-kit/sortable\"\r\nimport { CSS } from \"@dnd-kit/utilities\"\r\nimport {\r\n  IconChevronDown,\r\n  IconChevronLeft,\r\n  IconChevronRight,\r\n  IconChevronsLeft,\r\n  IconChevronsRight,\r\n  IconCircleCheckFilled,\r\n  IconDotsVertical,\r\n  IconGripVertical,\r\n  IconLayoutColumns,\r\n  IconLoader,\r\n  IconPlus,\r\n  IconTrendingUp,\r\n} from \"@tabler/icons-react\"\r\nimport {\r\n  ColumnDef,\r\n  ColumnFiltersState,\r\n  flexRender,\r\n  getCoreRowModel,\r\n  getFacetedRowModel,\r\n  getFacetedUniqueValues,\r\n  getFilteredRowModel,\r\n  getPaginationRowModel,\r\n  getSortedRowModel,\r\n  Row,\r\n  SortingState,\r\n  useReactTable,\r\n  VisibilityState,\r\n} from \"@tanstack/react-table\"\r\nimport { Area, AreaChart, CartesianGrid, XAxis } from \"recharts\"\r\nimport { toast } from \"sonner\"\r\nimport { z } from \"zod\"\r\n\r\nimport { useIsMobile } from \"@/hooks/use-mobile\"\r\nimport { Badge } from \"@/components/ui/badge\"\r\nimport { Button } from \"@/components/ui/button\"\r\nimport {\r\n  ChartConfig,\r\n  ChartContainer,\r\n  ChartTooltip,\r\n  ChartTooltipContent,\r\n} from \"@/components/ui/chart\"\r\nimport { Checkbox } from \"@/components/ui/checkbox\"\r\nimport {\r\n  Drawer,\r\n  DrawerClose,\r\n  DrawerContent,\r\n  DrawerDescription,\r\n  DrawerFooter,\r\n  DrawerHeader,\r\n  DrawerTitle,\r\n  DrawerTrigger,\r\n} from \"@/components/ui/drawer\"\r\nimport {\r\n  DropdownMenu,\r\n  DropdownMenuCheckboxItem,\r\n  DropdownMenuContent,\r\n  DropdownMenuItem,\r\n  DropdownMenuSeparator,\r\n  DropdownMenuTrigger,\r\n} from \"@/components/ui/dropdown-menu\"\r\nimport { Input } from \"@/components/ui/input\"\r\nimport { Label } from \"@/components/ui/label\"\r\nimport {\r\n  Select,\r\n  SelectContent,\r\n  SelectItem,\r\n  SelectTrigger,\r\n  SelectValue,\r\n} from \"@/components/ui/select\"\r\nimport { Separator } from \"@/components/ui/separator\"\r\nimport {\r\n  Table,\r\n  TableBody,\r\n  TableCell,\r\n  TableHead,\r\n  TableHeader,\r\n  TableRow,\r\n} from \"@/components/ui/table\"\r\nimport {\r\n  Tabs,\r\n  TabsContent,\r\n  TabsList,\r\n  TabsTrigger,\r\n} from \"@/components/ui/tabs\"\r\n\r\nexport const schema = z.object({\r\n  id: z.number(),\r\n  header: z.string(),\r\n  type: z.string(),\r\n  status: z.string(),\r\n  target: z.string(),\r\n  limit: z.string(),\r\n  reviewer: z.string(),\r\n})\r\n\r\n// Create a separate component for the drag handle\r\nfunction DragHandle({ id }: { id: number }) {\r\n  const { attributes, listeners } = useSortable({\r\n    id,\r\n  })\r\n\r\n  return (\r\n    <Button\r\n      {...attributes}\r\n      {...listeners}\r\n      variant=\"ghost\"\r\n      size=\"icon\"\r\n      className=\"text-muted-foreground size-7 hover:bg-transparent\"\r\n    >\r\n      <IconGripVertical className=\"text-muted-foreground size-3\" />\r\n      <span className=\"sr-only\">Drag to reorder</span>\r\n    </Button>\r\n  )\r\n}\r\n\r\nconst columns: ColumnDef<z.infer<typeof schema>>[] = [\r\n  {\r\n    id: \"drag\",\r\n    header: () => null,\r\n    cell: ({ row }) => <DragHandle id={row.original.id} />,\r\n  },\r\n  {\r\n    id: \"select\",\r\n    header: ({ table }) => (\r\n      <div className=\"flex items-center justify-center\">\r\n        <Checkbox\r\n          checked={\r\n            table.getIsAllPageRowsSelected() ||\r\n            (table.getIsSomePageRowsSelected() && \"indeterminate\")\r\n          }\r\n          onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}\r\n          aria-label=\"Select all\"\r\n        />\r\n      </div>\r\n    ),\r\n    cell: ({ row }) => (\r\n      <div className=\"flex items-center justify-center\">\r\n        <Checkbox\r\n          checked={row.getIsSelected()}\r\n          onCheckedChange={(value) => row.toggleSelected(!!value)}\r\n          aria-label=\"Select row\"\r\n        />\r\n      </div>\r\n    ),\r\n    enableSorting: false,\r\n    enableHiding: false,\r\n  },\r\n  {\r\n    accessorKey: \"header\",\r\n    header: \"Header\",\r\n    cell: ({ row }) => {\r\n      return <TableCellViewer item={row.original} />\r\n    },\r\n    enableHiding: false,\r\n  },\r\n  {\r\n    accessorKey: \"type\",\r\n    header: \"Section Type\",\r\n    cell: ({ row }) => (\r\n      <div className=\"w-32\">\r\n        <Badge variant=\"outline\" className=\"text-muted-foreground px-1.5\">\r\n          {row.original.type}\r\n        </Badge>\r\n      </div>\r\n    ),\r\n  },\r\n  {\r\n    accessorKey: \"status\",\r\n    header: \"Status\",\r\n    cell: ({ row }) => (\r\n      <Badge variant=\"outline\" className=\"text-muted-foreground px-1.5\">\r\n        {row.original.status === \"Done\" ? (\r\n          <IconCircleCheckFilled className=\"fill-green-500 dark:fill-green-400\" />\r\n        ) : (\r\n          <IconLoader />\r\n        )}\r\n        {row.original.status}\r\n      </Badge>\r\n    ),\r\n  },\r\n  {\r\n    accessorKey: \"target\",\r\n    header: () => <div className=\"w-full text-right\">Target</div>,\r\n    cell: ({ row }) => (\r\n      <form\r\n        onSubmit={(e) => {\r\n          e.preventDefault()\r\n          toast.promise(new Promise((resolve) => setTimeout(resolve, 1000)), {\r\n            loading: `Saving ${row.original.header}`,\r\n            success: \"Done\",\r\n            error: \"Error\",\r\n          })\r\n        }}\r\n      >\r\n        <Label htmlFor={`${row.original.id}-target`} className=\"sr-only\">\r\n          Target\r\n        </Label>\r\n        <Input\r\n          className=\"hover:bg-input/30 focus-visible:bg-background dark:hover:bg-input/30 dark:focus-visible:bg-input/30 h-8 w-16 border-transparent bg-transparent text-right shadow-none focus-visible:border dark:bg-transparent\"\r\n          defaultValue={row.original.target}\r\n          id={`${row.original.id}-target`}\r\n        />\r\n      </form>\r\n    ),\r\n  },\r\n  {\r\n    accessorKey: \"limit\",\r\n    header: () => <div className=\"w-full text-right\">Limit</div>,\r\n    cell: ({ row }) => (\r\n      <form\r\n        onSubmit={(e) => {\r\n          e.preventDefault()\r\n          toast.promise(new Promise((resolve) => setTimeout(resolve, 1000)), {\r\n            loading: `Saving ${row.original.header}`,\r\n            success: \"Done\",\r\n            error: \"Error\",\r\n          })\r\n        }}\r\n      >\r\n        <Label htmlFor={`${row.original.id}-limit`} className=\"sr-only\">\r\n          Limit\r\n        </Label>\r\n        <Input\r\n          className=\"hover:bg-input/30 focus-visible:bg-background dark:hover:bg-input/30 dark:focus-visible:bg-input/30 h-8 w-16 border-transparent bg-transparent text-right shadow-none focus-visible:border dark:bg-transparent\"\r\n          defaultValue={row.original.limit}\r\n          id={`${row.original.id}-limit`}\r\n        />\r\n      </form>\r\n    ),\r\n  },\r\n  {\r\n    accessorKey: \"reviewer\",\r\n    header: \"Reviewer\",\r\n    cell: ({ row }) => {\r\n      const isAssigned = row.original.reviewer !== \"Assign reviewer\"\r\n\r\n      if (isAssigned) {\r\n        return row.original.reviewer\r\n      }\r\n\r\n      return (\r\n        <>\r\n          <Label htmlFor={`${row.original.id}-reviewer`} className=\"sr-only\">\r\n            Reviewer\r\n          </Label>\r\n          <Select>\r\n            <SelectTrigger\r\n              className=\"w-38 **:data-[slot=select-value]:block **:data-[slot=select-value]:truncate\"\r\n              size=\"sm\"\r\n              id={`${row.original.id}-reviewer`}\r\n            >\r\n              <SelectValue placeholder=\"Assign reviewer\" />\r\n            </SelectTrigger>\r\n            <SelectContent align=\"end\">\r\n              <SelectItem value=\"Eddie Lake\">Eddie Lake</SelectItem>\r\n              <SelectItem value=\"Jamik Tashpulatov\">\r\n                Jamik Tashpulatov\r\n              </SelectItem>\r\n            </SelectContent>\r\n          </Select>\r\n        </>\r\n      )\r\n    },\r\n  },\r\n  {\r\n    id: \"actions\",\r\n    cell: () => (\r\n      <DropdownMenu>\r\n        <DropdownMenuTrigger asChild>\r\n          <Button\r\n            variant=\"ghost\"\r\n            className=\"data-[state=open]:bg-muted text-muted-foreground flex size-8\"\r\n            size=\"icon\"\r\n          >\r\n            <IconDotsVertical />\r\n            <span className=\"sr-only\">Open menu</span>\r\n          </Button>\r\n        </DropdownMenuTrigger>\r\n        <DropdownMenuContent align=\"end\" className=\"w-32\">\r\n          <DropdownMenuItem>Edit</DropdownMenuItem>\r\n          <DropdownMenuItem>Make a copy</DropdownMenuItem>\r\n          <DropdownMenuItem>Favorite</DropdownMenuItem>\r\n          <DropdownMenuSeparator />\r\n          <DropdownMenuItem variant=\"destructive\">Delete</DropdownMenuItem>\r\n        </DropdownMenuContent>\r\n      </DropdownMenu>\r\n    ),\r\n  },\r\n]\r\n\r\nfunction DraggableRow({ row }: { row: Row<z.infer<typeof schema>> }) {\r\n  const { transform, transition, setNodeRef, isDragging } = useSortable({\r\n    id: row.original.id,\r\n  })\r\n\r\n  return (\r\n    <TableRow\r\n      data-state={row.getIsSelected() && \"selected\"}\r\n      data-dragging={isDragging}\r\n      ref={setNodeRef}\r\n      className=\"relative z-0 data-[dragging=true]:z-10 data-[dragging=true]:opacity-80\"\r\n      style={{\r\n        transform: CSS.Transform.toString(transform),\r\n        transition: transition,\r\n      }}\r\n    >\r\n      {row.getVisibleCells().map((cell) => (\r\n        <TableCell key={cell.id}>\r\n          {flexRender(cell.column.columnDef.cell, cell.getContext())}\r\n        </TableCell>\r\n      ))}\r\n    </TableRow>\r\n  )\r\n}\r\n\r\nexport function DataTable({\r\n  data: initialData,\r\n}: {\r\n  data: z.infer<typeof schema>[]\r\n}) {\r\n  const [data, setData] = React.useState(() => initialData)\r\n  const [rowSelection, setRowSelection] = React.useState({})\r\n  const [columnVisibility, setColumnVisibility] =\r\n    React.useState<VisibilityState>({})\r\n  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(\r\n    []\r\n  )\r\n  const [sorting, setSorting] = React.useState<SortingState>([])\r\n  const [pagination, setPagination] = React.useState({\r\n    pageIndex: 0,\r\n    pageSize: 10,\r\n  })\r\n  const sortableId = React.useId()\r\n  const sensors = useSensors(\r\n    useSensor(MouseSensor, {}),\r\n    useSensor(TouchSensor, {}),\r\n    useSensor(KeyboardSensor, {})\r\n  )\r\n\r\n  const dataIds = React.useMemo<UniqueIdentifier[]>(\r\n    () => data?.map(({ id }) => id) || [],\r\n    [data]\r\n  )\r\n\r\n  const table = useReactTable({\r\n    data,\r\n    columns,\r\n    state: {\r\n      sorting,\r\n      columnVisibility,\r\n      rowSelection,\r\n      columnFilters,\r\n      pagination,\r\n    },\r\n    getRowId: (row) => row.id.toString(),\r\n    enableRowSelection: true,\r\n    onRowSelectionChange: setRowSelection,\r\n    onSortingChange: setSorting,\r\n    onColumnFiltersChange: setColumnFilters,\r\n    onColumnVisibilityChange: setColumnVisibility,\r\n    onPaginationChange: setPagination,\r\n    getCoreRowModel: getCoreRowModel(),\r\n    getFilteredRowModel: getFilteredRowModel(),\r\n    getPaginationRowModel: getPaginationRowModel(),\r\n    getSortedRowModel: getSortedRowModel(),\r\n    getFacetedRowModel: getFacetedRowModel(),\r\n    getFacetedUniqueValues: getFacetedUniqueValues(),\r\n  })\r\n\r\n  function handleDragEnd(event: DragEndEvent) {\r\n    const { active, over } = event\r\n    if (active && over && active.id !== over.id) {\r\n      setData((data) => {\r\n        const oldIndex = dataIds.indexOf(active.id)\r\n        const newIndex = dataIds.indexOf(over.id)\r\n        return arrayMove(data, oldIndex, newIndex)\r\n      })\r\n    }\r\n  }\r\n\r\n  return (\r\n    <Tabs\r\n      defaultValue=\"outline\"\r\n      className=\"w-full flex-col justify-start gap-6\"\r\n    >\r\n      <div className=\"flex items-center justify-between px-4 lg:px-6\">\r\n        <Label htmlFor=\"view-selector\" className=\"sr-only\">\r\n          View\r\n        </Label>\r\n        <Select defaultValue=\"outline\">\r\n          <SelectTrigger\r\n            className=\"flex w-fit @4xl/main:hidden\"\r\n            size=\"sm\"\r\n            id=\"view-selector\"\r\n          >\r\n            <SelectValue placeholder=\"Select a view\" />\r\n          </SelectTrigger>\r\n          <SelectContent>\r\n            <SelectItem value=\"outline\">Outline</SelectItem>\r\n            <SelectItem value=\"past-performance\">Past Performance</SelectItem>\r\n            <SelectItem value=\"key-personnel\">Key Personnel</SelectItem>\r\n            <SelectItem value=\"focus-documents\">Focus Documents</SelectItem>\r\n          </SelectContent>\r\n        </Select>\r\n        <TabsList className=\"**:data-[slot=badge]:bg-muted-foreground/30 hidden **:data-[slot=badge]:size-5 **:data-[slot=badge]:rounded-full **:data-[slot=badge]:px-1 @4xl/main:flex\">\r\n          <TabsTrigger value=\"outline\">Outline</TabsTrigger>\r\n          <TabsTrigger value=\"past-performance\">\r\n            Past Performance <Badge variant=\"secondary\">3</Badge>\r\n          </TabsTrigger>\r\n          <TabsTrigger value=\"key-personnel\">\r\n            Key Personnel <Badge variant=\"secondary\">2</Badge>\r\n          </TabsTrigger>\r\n          <TabsTrigger value=\"focus-documents\">Focus Documents</TabsTrigger>\r\n        </TabsList>\r\n        <div className=\"flex items-center gap-2\">\r\n          <DropdownMenu>\r\n            <DropdownMenuTrigger asChild>\r\n              <Button variant=\"outline\" size=\"sm\">\r\n                <IconLayoutColumns />\r\n                <span className=\"hidden lg:inline\">Customize Columns</span>\r\n                <span className=\"lg:hidden\">Columns</span>\r\n                <IconChevronDown />\r\n              </Button>\r\n            </DropdownMenuTrigger>\r\n            <DropdownMenuContent align=\"end\" className=\"w-56\">\r\n              {table\r\n                .getAllColumns()\r\n                .filter(\r\n                  (column) =>\r\n                    typeof column.accessorFn !== \"undefined\" &&\r\n                    column.getCanHide()\r\n                )\r\n                .map((column) => {\r\n                  return (\r\n                    <DropdownMenuCheckboxItem\r\n                      key={column.id}\r\n                      className=\"capitalize\"\r\n                      checked={column.getIsVisible()}\r\n                      onCheckedChange={(value) =>\r\n                        column.toggleVisibility(!!value)\r\n                      }\r\n                    >\r\n                      {column.id}\r\n                    </DropdownMenuCheckboxItem>\r\n                  )\r\n                })}\r\n            </DropdownMenuContent>\r\n          </DropdownMenu>\r\n          <Button variant=\"outline\" size=\"sm\">\r\n            <IconPlus />\r\n            <span className=\"hidden lg:inline\">Add Section</span>\r\n          </Button>\r\n        </div>\r\n      </div>\r\n      <TabsContent\r\n        value=\"outline\"\r\n        className=\"relative flex flex-col gap-4 overflow-auto px-4 lg:px-6\"\r\n      >\r\n        <div className=\"overflow-hidden rounded-lg border\">\r\n          <DndContext\r\n            collisionDetection={closestCenter}\r\n            modifiers={[restrictToVerticalAxis]}\r\n            onDragEnd={handleDragEnd}\r\n            sensors={sensors}\r\n            id={sortableId}\r\n          >\r\n            <Table>\r\n              <TableHeader className=\"bg-muted sticky top-0 z-10\">\r\n                {table.getHeaderGroups().map((headerGroup) => (\r\n                  <TableRow key={headerGroup.id}>\r\n                    {headerGroup.headers.map((header) => {\r\n                      return (\r\n                        <TableHead key={header.id} colSpan={header.colSpan}>\r\n                          {header.isPlaceholder\r\n                            ? null\r\n                            : flexRender(\r\n                                header.column.columnDef.header,\r\n                                header.getContext()\r\n                              )}\r\n                        </TableHead>\r\n                      )\r\n                    })}\r\n                  </TableRow>\r\n                ))}\r\n              </TableHeader>\r\n              <TableBody className=\"**:data-[slot=table-cell]:first:w-8\">\r\n                {table.getRowModel().rows?.length ? (\r\n                  <SortableContext\r\n                    items={dataIds}\r\n                    strategy={verticalListSortingStrategy}\r\n                  >\r\n                    {table.getRowModel().rows.map((row) => (\r\n                      <DraggableRow key={row.id} row={row} />\r\n                    ))}\r\n                  </SortableContext>\r\n                ) : (\r\n                  <TableRow>\r\n                    <TableCell\r\n                      colSpan={columns.length}\r\n                      className=\"h-24 text-center\"\r\n                    >\r\n                      No results.\r\n                    </TableCell>\r\n                  </TableRow>\r\n                )}\r\n              </TableBody>\r\n            </Table>\r\n          </DndContext>\r\n        </div>\r\n        <div className=\"flex items-center justify-between px-4\">\r\n          <div className=\"text-muted-foreground hidden flex-1 text-sm lg:flex\">\r\n            {table.getFilteredSelectedRowModel().rows.length} of{\" \"}\r\n            {table.getFilteredRowModel().rows.length} row(s) selected.\r\n          </div>\r\n          <div className=\"flex w-full items-center gap-8 lg:w-fit\">\r\n            <div className=\"hidden items-center gap-2 lg:flex\">\r\n              <Label htmlFor=\"rows-per-page\" className=\"text-sm font-medium\">\r\n                Rows per page\r\n              </Label>\r\n              <Select\r\n                value={`${table.getState().pagination.pageSize}`}\r\n                onValueChange={(value) => {\r\n                  table.setPageSize(Number(value))\r\n                }}\r\n              >\r\n                <SelectTrigger size=\"sm\" className=\"w-20\" id=\"rows-per-page\">\r\n                  <SelectValue\r\n                    placeholder={table.getState().pagination.pageSize}\r\n                  />\r\n                </SelectTrigger>\r\n                <SelectContent side=\"top\">\r\n                  {[10, 20, 30, 40, 50].map((pageSize) => (\r\n                    <SelectItem key={pageSize} value={`${pageSize}`}>\r\n                      {pageSize}\r\n                    </SelectItem>\r\n                  ))}\r\n                </SelectContent>\r\n              </Select>\r\n            </div>\r\n            <div className=\"flex w-fit items-center justify-center text-sm font-medium\">\r\n              Page {table.getState().pagination.pageIndex + 1} of{\" \"}\r\n              {table.getPageCount()}\r\n            </div>\r\n            <div className=\"ml-auto flex items-center gap-2 lg:ml-0\">\r\n              <Button\r\n                variant=\"outline\"\r\n                className=\"hidden h-8 w-8 p-0 lg:flex\"\r\n                onClick={() => table.setPageIndex(0)}\r\n                disabled={!table.getCanPreviousPage()}\r\n              >\r\n                <span className=\"sr-only\">Go to first page</span>\r\n                <IconChevronsLeft />\r\n              </Button>\r\n              <Button\r\n                variant=\"outline\"\r\n                className=\"size-8\"\r\n                size=\"icon\"\r\n                onClick={() => table.previousPage()}\r\n                disabled={!table.getCanPreviousPage()}\r\n              >\r\n                <span className=\"sr-only\">Go to previous page</span>\r\n                <IconChevronLeft />\r\n              </Button>\r\n              <Button\r\n                variant=\"outline\"\r\n                className=\"size-8\"\r\n                size=\"icon\"\r\n                onClick={() => table.nextPage()}\r\n                disabled={!table.getCanNextPage()}\r\n              >\r\n                <span className=\"sr-only\">Go to next page</span>\r\n                <IconChevronRight />\r\n              </Button>\r\n              <Button\r\n                variant=\"outline\"\r\n                className=\"hidden size-8 lg:flex\"\r\n                size=\"icon\"\r\n                onClick={() => table.setPageIndex(table.getPageCount() - 1)}\r\n                disabled={!table.getCanNextPage()}\r\n              >\r\n                <span className=\"sr-only\">Go to last page</span>\r\n                <IconChevronsRight />\r\n              </Button>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </TabsContent>\r\n      <TabsContent\r\n        value=\"past-performance\"\r\n        className=\"flex flex-col px-4 lg:px-6\"\r\n      >\r\n        <div className=\"aspect-video w-full flex-1 rounded-lg border border-dashed\"></div>\r\n      </TabsContent>\r\n      <TabsContent value=\"key-personnel\" className=\"flex flex-col px-4 lg:px-6\">\r\n        <div className=\"aspect-video w-full flex-1 rounded-lg border border-dashed\"></div>\r\n      </TabsContent>\r\n      <TabsContent\r\n        value=\"focus-documents\"\r\n        className=\"flex flex-col px-4 lg:px-6\"\r\n      >\r\n        <div className=\"aspect-video w-full flex-1 rounded-lg border border-dashed\"></div>\r\n      </TabsContent>\r\n    </Tabs>\r\n  )\r\n}\r\n\r\nconst chartData = [\r\n  { month: \"January\", desktop: 186, mobile: 80 },\r\n  { month: \"February\", desktop: 305, mobile: 200 },\r\n  { month: \"March\", desktop: 237, mobile: 120 },\r\n  { month: \"April\", desktop: 73, mobile: 190 },\r\n  { month: \"May\", desktop: 209, mobile: 130 },\r\n  { month: \"June\", desktop: 214, mobile: 140 },\r\n]\r\n\r\nconst chartConfig = {\r\n  desktop: {\r\n    label: \"Desktop\",\r\n    color: \"var(--primary)\",\r\n  },\r\n  mobile: {\r\n    label: \"Mobile\",\r\n    color: \"var(--primary)\",\r\n  },\r\n} satisfies ChartConfig\r\n\r\nfunction TableCellViewer({ item }: { item: z.infer<typeof schema> }) {\r\n  const isMobile = useIsMobile()\r\n\r\n  return (\r\n    <Drawer direction={isMobile ? \"bottom\" : \"right\"}>\r\n      <DrawerTrigger asChild>\r\n        <Button variant=\"link\" className=\"text-foreground w-fit px-0 text-left\">\r\n          {item.header}\r\n        </Button>\r\n      </DrawerTrigger>\r\n      <DrawerContent>\r\n        <DrawerHeader className=\"gap-1\">\r\n          <DrawerTitle>{item.header}</DrawerTitle>\r\n          <DrawerDescription>\r\n            Showing total visitors for the last 6 months\r\n          </DrawerDescription>\r\n        </DrawerHeader>\r\n        <div className=\"flex flex-col gap-4 overflow-y-auto px-4 text-sm\">\r\n          {!isMobile && (\r\n            <>\r\n              <ChartContainer config={chartConfig}>\r\n                <AreaChart\r\n                  accessibilityLayer\r\n                  data={chartData}\r\n                  margin={{\r\n                    left: 0,\r\n                    right: 10,\r\n                  }}\r\n                >\r\n                  <CartesianGrid vertical={false} />\r\n                  <XAxis\r\n                    dataKey=\"month\"\r\n                    tickLine={false}\r\n                    axisLine={false}\r\n                    tickMargin={8}\r\n                    tickFormatter={(value) => value.slice(0, 3)}\r\n                    hide\r\n                  />\r\n                  <ChartTooltip\r\n                    cursor={false}\r\n                    content={<ChartTooltipContent indicator=\"dot\" />}\r\n                  />\r\n                  <Area\r\n                    dataKey=\"mobile\"\r\n                    type=\"natural\"\r\n                    fill=\"var(--color-mobile)\"\r\n                    fillOpacity={0.6}\r\n                    stroke=\"var(--color-mobile)\"\r\n                    stackId=\"a\"\r\n                  />\r\n                  <Area\r\n                    dataKey=\"desktop\"\r\n                    type=\"natural\"\r\n                    fill=\"var(--color-desktop)\"\r\n                    fillOpacity={0.4}\r\n                    stroke=\"var(--color-desktop)\"\r\n                    stackId=\"a\"\r\n                  />\r\n                </AreaChart>\r\n              </ChartContainer>\r\n              <Separator />\r\n              <div className=\"grid gap-2\">\r\n                <div className=\"flex gap-2 leading-none font-medium\">\r\n                  Trending up by 5.2% this month{\" \"}\r\n                  <IconTrendingUp className=\"size-4\" />\r\n                </div>\r\n                <div className=\"text-muted-foreground\">\r\n                  Showing total visitors for the last 6 months. This is just\r\n                  some random text to test the layout. It spans multiple lines\r\n                  and should wrap around.\r\n                </div>\r\n              </div>\r\n              <Separator />\r\n            </>\r\n          )}\r\n          <form className=\"flex flex-col gap-4\">\r\n            <div className=\"flex flex-col gap-3\">\r\n              <Label htmlFor=\"header\">Header</Label>\r\n              <Input id=\"header\" defaultValue={item.header} />\r\n            </div>\r\n            <div className=\"grid grid-cols-2 gap-4\">\r\n              <div className=\"flex flex-col gap-3\">\r\n                <Label htmlFor=\"type\">Type</Label>\r\n                <Select defaultValue={item.type}>\r\n                  <SelectTrigger id=\"type\" className=\"w-full\">\r\n                    <SelectValue placeholder=\"Select a type\" />\r\n                  </SelectTrigger>\r\n                  <SelectContent>\r\n                    <SelectItem value=\"Table of Contents\">\r\n                      Table of Contents\r\n                    </SelectItem>\r\n                    <SelectItem value=\"Executive Summary\">\r\n                      Executive Summary\r\n                    </SelectItem>\r\n                    <SelectItem value=\"Technical Approach\">\r\n                      Technical Approach\r\n                    </SelectItem>\r\n                    <SelectItem value=\"Design\">Design</SelectItem>\r\n                    <SelectItem value=\"Capabilities\">Capabilities</SelectItem>\r\n                    <SelectItem value=\"Focus Documents\">\r\n                      Focus Documents\r\n                    </SelectItem>\r\n                    <SelectItem value=\"Narrative\">Narrative</SelectItem>\r\n                    <SelectItem value=\"Cover Page\">Cover Page</SelectItem>\r\n                  </SelectContent>\r\n                </Select>\r\n              </div>\r\n              <div className=\"flex flex-col gap-3\">\r\n                <Label htmlFor=\"status\">Status</Label>\r\n                <Select defaultValue={item.status}>\r\n                  <SelectTrigger id=\"status\" className=\"w-full\">\r\n                    <SelectValue placeholder=\"Select a status\" />\r\n                  </SelectTrigger>\r\n                  <SelectContent>\r\n                    <SelectItem value=\"Done\">Done</SelectItem>\r\n                    <SelectItem value=\"In Progress\">In Progress</SelectItem>\r\n                    <SelectItem value=\"Not Started\">Not Started</SelectItem>\r\n                  </SelectContent>\r\n                </Select>\r\n              </div>\r\n            </div>\r\n            <div className=\"grid grid-cols-2 gap-4\">\r\n              <div className=\"flex flex-col gap-3\">\r\n                <Label htmlFor=\"target\">Target</Label>\r\n                <Input id=\"target\" defaultValue={item.target} />\r\n              </div>\r\n              <div className=\"flex flex-col gap-3\">\r\n                <Label htmlFor=\"limit\">Limit</Label>\r\n                <Input id=\"limit\" defaultValue={item.limit} />\r\n              </div>\r\n            </div>\r\n            <div className=\"flex flex-col gap-3\">\r\n              <Label htmlFor=\"reviewer\">Reviewer</Label>\r\n              <Select defaultValue={item.reviewer}>\r\n                <SelectTrigger id=\"reviewer\" className=\"w-full\">\r\n                  <SelectValue placeholder=\"Select a reviewer\" />\r\n                </SelectTrigger>\r\n                <SelectContent>\r\n                  <SelectItem value=\"Eddie Lake\">Eddie Lake</SelectItem>\r\n                  <SelectItem value=\"Jamik Tashpulatov\">\r\n                    Jamik Tashpulatov\r\n                  </SelectItem>\r\n                  <SelectItem value=\"Emily Whalen\">Emily Whalen</SelectItem>\r\n                </SelectContent>\r\n              </Select>\r\n            </div>\r\n          </form>\r\n        </div>\r\n        <DrawerFooter>\r\n          <Button>Submit</Button>\r\n          <DrawerClose asChild>\r\n            <Button variant=\"outline\">Done</Button>\r\n          </DrawerClose>\r\n        </DrawerFooter>\r\n      </DrawerContent>\r\n    </Drawer>\r\n  )\r\n}"
+    ],
+    "description": "",
+    "scope": "jsx / tsx"
+  },
+  "one_components_nav-documents_tsx": {
+    "prefix": "one_components_nav-documents_tsx",
+    "body": [
+      "\"use client\"\r\n\r\nimport {\r\n  IconDots,\r\n  IconFolder,\r\n  IconShare3,\r\n  IconTrash,\r\n  type Icon,\r\n} from \"@tabler/icons-react\"\r\n\r\nimport {\r\n  DropdownMenu,\r\n  DropdownMenuContent,\r\n  DropdownMenuItem,\r\n  DropdownMenuSeparator,\r\n  DropdownMenuTrigger,\r\n} from \"@/components/ui/dropdown-menu\"\r\nimport {\r\n  SidebarGroup,\r\n  SidebarGroupLabel,\r\n  SidebarMenu,\r\n  SidebarMenuAction,\r\n  SidebarMenuButton,\r\n  SidebarMenuItem,\r\n  useSidebar,\r\n} from \"@/components/ui/sidebar\"\r\n\r\nexport function NavDocuments({\r\n  items,\r\n}: {\r\n  items: {\r\n    name: string\r\n    url: string\r\n    icon: Icon\r\n  }[]\r\n}) {\r\n  const { isMobile } = useSidebar()\r\n\r\n  return (\r\n    <SidebarGroup className=\"group-data-[collapsible=icon]:hidden\">\r\n      <SidebarGroupLabel>Documents</SidebarGroupLabel>\r\n      <SidebarMenu>\r\n        {items.map((item) => (\r\n          <SidebarMenuItem key={item.name}>\r\n            <SidebarMenuButton asChild>\r\n              <a href={item.url}>\r\n                <item.icon />\r\n                <span>{item.name}</span>\r\n              </a>\r\n            </SidebarMenuButton>\r\n            <DropdownMenu>\r\n              <DropdownMenuTrigger asChild>\r\n                <SidebarMenuAction\r\n                  showOnHover\r\n                  className=\"data-[state=open]:bg-accent rounded-sm\"\r\n                >\r\n                  <IconDots />\r\n                  <span className=\"sr-only\">More</span>\r\n                </SidebarMenuAction>\r\n              </DropdownMenuTrigger>\r\n              <DropdownMenuContent\r\n                className=\"w-24 rounded-lg\"\r\n                side={isMobile ? \"bottom\" : \"right\"}\r\n                align={isMobile ? \"end\" : \"start\"}\r\n              >\r\n                <DropdownMenuItem>\r\n                  <IconFolder />\r\n                  <span>Open</span>\r\n                </DropdownMenuItem>\r\n                <DropdownMenuItem>\r\n                  <IconShare3 />\r\n                  <span>Share</span>\r\n                </DropdownMenuItem>\r\n                <DropdownMenuSeparator />\r\n                <DropdownMenuItem variant=\"destructive\">\r\n                  <IconTrash />\r\n                  <span>Delete</span>\r\n                </DropdownMenuItem>\r\n              </DropdownMenuContent>\r\n            </DropdownMenu>\r\n          </SidebarMenuItem>\r\n        ))}\r\n        <SidebarMenuItem>\r\n          <SidebarMenuButton className=\"text-sidebar-foreground/70\">\r\n            <IconDots className=\"text-sidebar-foreground/70\" />\r\n            <span>More</span>\r\n          </SidebarMenuButton>\r\n        </SidebarMenuItem>\r\n      </SidebarMenu>\r\n    </SidebarGroup>\r\n  )\r\n}"
+    ],
+    "description": "",
+    "scope": "jsx / tsx"
+  },
+  "one_components_nav-main_tsx": {
+    "prefix": "one_components_nav-main_tsx",
+    "body": [
+      "\"use client\"\r\n\r\nimport { IconCirclePlusFilled, IconMail, type Icon } from \"@tabler/icons-react\"\r\n\r\nimport { Button } from \"@/components/ui/button\"\r\nimport {\r\n  SidebarGroup,\r\n  SidebarGroupContent,\r\n  SidebarMenu,\r\n  SidebarMenuButton,\r\n  SidebarMenuItem,\r\n} from \"@/components/ui/sidebar\"\r\n\r\nexport function NavMain({\r\n  items,\r\n}: {\r\n  items: {\r\n    title: string\r\n    url: string\r\n    icon?: Icon\r\n  }[]\r\n}) {\r\n  return (\r\n    <SidebarGroup>\r\n      <SidebarGroupContent className=\"flex flex-col gap-2\">\r\n        <SidebarMenu>\r\n          <SidebarMenuItem className=\"flex items-center gap-2\">\r\n            <SidebarMenuButton\r\n              tooltip=\"Quick Create\"\r\n              className=\"bg-primary text-primary-foreground hover:bg-primary/90 hover:text-primary-foreground active:bg-primary/90 active:text-primary-foreground min-w-8 duration-200 ease-linear\"\r\n            >\r\n              <IconCirclePlusFilled />\r\n              <span>Quick Create</span>\r\n            </SidebarMenuButton>\r\n            <Button\r\n              size=\"icon\"\r\n              className=\"size-8 group-data-[collapsible=icon]:opacity-0\"\r\n              variant=\"outline\"\r\n            >\r\n              <IconMail />\r\n              <span className=\"sr-only\">Inbox</span>\r\n            </Button>\r\n          </SidebarMenuItem>\r\n        </SidebarMenu>\r\n        <SidebarMenu>\r\n          {items.map((item) => (\r\n            <SidebarMenuItem key={item.title}>\r\n              <SidebarMenuButton tooltip={item.title}>\r\n                {item.icon && <item.icon />}\r\n                <span>{item.title}</span>\r\n              </SidebarMenuButton>\r\n            </SidebarMenuItem>\r\n          ))}\r\n        </SidebarMenu>\r\n      </SidebarGroupContent>\r\n    </SidebarGroup>\r\n  )\r\n}"
+    ],
+    "description": "",
+    "scope": "jsx / tsx"
+  },
+  "one_components_nav-secondary_tsx": {
+    "prefix": "one_components_nav-secondary_tsx",
+    "body": [
+      "\"use client\"\r\n\r\nimport * as React from \"react\"\r\nimport { type Icon } from \"@tabler/icons-react\"\r\n\r\nimport {\r\n  SidebarGroup,\r\n  SidebarGroupContent,\r\n  SidebarMenu,\r\n  SidebarMenuButton,\r\n  SidebarMenuItem,\r\n} from \"@/components/ui/sidebar\"\r\n\r\nexport function NavSecondary({\r\n  items,\r\n  ...props\r\n}: {\r\n  items: {\r\n    title: string\r\n    url: string\r\n    icon: Icon\r\n  }[]\r\n} & React.ComponentPropsWithoutRef<typeof SidebarGroup>) {\r\n  return (\r\n    <SidebarGroup {...props}>\r\n      <SidebarGroupContent>\r\n        <SidebarMenu>\r\n          {items.map((item) => (\r\n            <SidebarMenuItem key={item.title}>\r\n              <SidebarMenuButton asChild>\r\n                <a href={item.url}>\r\n                  <item.icon />\r\n                  <span>{item.title}</span>\r\n                </a>\r\n              </SidebarMenuButton>\r\n            </SidebarMenuItem>\r\n          ))}\r\n        </SidebarMenu>\r\n      </SidebarGroupContent>\r\n    </SidebarGroup>\r\n  )\r\n}"
+    ],
+    "description": "",
+    "scope": "jsx / tsx"
+  },
+  "one_components_nav-user_tsx": {
+    "prefix": "one_components_nav-user_tsx",
+    "body": [
+      "\"use client\"\r\n\r\nimport {\r\n  IconCreditCard,\r\n  IconDotsVertical,\r\n  IconLogout,\r\n  IconNotification,\r\n  IconUserCircle,\r\n} from \"@tabler/icons-react\"\r\n\r\nimport {\r\n  Avatar,\r\n  AvatarFallback,\r\n  AvatarImage,\r\n} from \"@/components/ui/avatar\"\r\nimport {\r\n  DropdownMenu,\r\n  DropdownMenuContent,\r\n  DropdownMenuGroup,\r\n  DropdownMenuItem,\r\n  DropdownMenuLabel,\r\n  DropdownMenuSeparator,\r\n  DropdownMenuTrigger,\r\n} from \"@/components/ui/dropdown-menu\"\r\nimport {\r\n  SidebarMenu,\r\n  SidebarMenuButton,\r\n  SidebarMenuItem,\r\n  useSidebar,\r\n} from \"@/components/ui/sidebar\"\r\n\r\nexport function NavUser({\r\n  user,\r\n}: {\r\n  user: {\r\n    name: string\r\n    email: string\r\n    avatar: string\r\n  }\r\n}) {\r\n  const { isMobile } = useSidebar()\r\n\r\n  return (\r\n    <SidebarMenu>\r\n      <SidebarMenuItem>\r\n        <DropdownMenu>\r\n          <DropdownMenuTrigger asChild>\r\n            <SidebarMenuButton\r\n              size=\"lg\"\r\n              className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\r\n            >\r\n              <Avatar className=\"h-8 w-8 rounded-lg grayscale\">\r\n                <AvatarImage src={user.avatar} alt={user.name} />\r\n                <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\r\n              </Avatar>\r\n              <div className=\"grid flex-1 text-left text-sm leading-tight\">\r\n                <span className=\"truncate font-medium\">{user.name}</span>\r\n                <span className=\"text-muted-foreground truncate text-xs\">\r\n                  {user.email}\r\n                </span>\r\n              </div>\r\n              <IconDotsVertical className=\"ml-auto size-4\" />\r\n            </SidebarMenuButton>\r\n          </DropdownMenuTrigger>\r\n          <DropdownMenuContent\r\n            className=\"w-(--radix-dropdown-menu-trigger-width) min-w-56 rounded-lg\"\r\n            side={isMobile ? \"bottom\" : \"right\"}\r\n            align=\"end\"\r\n            sideOffset={4}\r\n          >\r\n            <DropdownMenuLabel className=\"p-0 font-normal\">\r\n              <div className=\"flex items-center gap-2 px-1 py-1.5 text-left text-sm\">\r\n                <Avatar className=\"h-8 w-8 rounded-lg\">\r\n                  <AvatarImage src={user.avatar} alt={user.name} />\r\n                  <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\r\n                </Avatar>\r\n                <div className=\"grid flex-1 text-left text-sm leading-tight\">\r\n                  <span className=\"truncate font-medium\">{user.name}</span>\r\n                  <span className=\"text-muted-foreground truncate text-xs\">\r\n                    {user.email}\r\n                  </span>\r\n                </div>\r\n              </div>\r\n            </DropdownMenuLabel>\r\n            <DropdownMenuSeparator />\r\n            <DropdownMenuGroup>\r\n              <DropdownMenuItem>\r\n                <IconUserCircle />\r\n                Account\r\n              </DropdownMenuItem>\r\n              <DropdownMenuItem>\r\n                <IconCreditCard />\r\n                Billing\r\n              </DropdownMenuItem>\r\n              <DropdownMenuItem>\r\n                <IconNotification />\r\n                Notifications\r\n              </DropdownMenuItem>\r\n            </DropdownMenuGroup>\r\n            <DropdownMenuSeparator />\r\n            <DropdownMenuItem>\r\n              <IconLogout />\r\n              Log out\r\n            </DropdownMenuItem>\r\n          </DropdownMenuContent>\r\n        </DropdownMenu>\r\n      </SidebarMenuItem>\r\n    </SidebarMenu>\r\n  )\r\n}"
+    ],
+    "description": "",
+    "scope": "jsx / tsx"
+  },
+  "one_components_section-cards_tsx": {
+    "prefix": "one_components_section-cards_tsx",
+    "body": [
+      "import { IconTrendingDown, IconTrendingUp } from \"@tabler/icons-react\"\r\n\r\nimport { Badge } from \"@/components/ui/badge\"\r\nimport {\r\n  Card,\r\n  CardAction,\r\n  CardDescription,\r\n  CardFooter,\r\n  CardHeader,\r\n  CardTitle,\r\n} from \"@/components/ui/card\"\r\n\r\nexport function SectionCards() {\r\n  return (\r\n    <div className=\"*:data-[slot=card]:from-primary/5 *:data-[slot=card]:to-card dark:*:data-[slot=card]:bg-card grid grid-cols-1 gap-4 px-4 *:data-[slot=card]:bg-gradient-to-t *:data-[slot=card]:shadow-xs lg:px-6 @xl/main:grid-cols-2 @5xl/main:grid-cols-4\">\r\n      <Card className=\"@container/card\">\r\n        <CardHeader>\r\n          <CardDescription>Total Revenue</CardDescription>\r\n          <CardTitle className=\"text-2xl font-semibold tabular-nums @[250px]/card:text-3xl\">\r\n            $1,250.00\r\n          </CardTitle>\r\n          <CardAction>\r\n            <Badge variant=\"outline\">\r\n              <IconTrendingUp />\r\n              +12.5%\r\n            </Badge>\r\n          </CardAction>\r\n        </CardHeader>\r\n        <CardFooter className=\"flex-col items-start gap-1.5 text-sm\">\r\n          <div className=\"line-clamp-1 flex gap-2 font-medium\">\r\n            Trending up this month <IconTrendingUp className=\"size-4\" />\r\n          </div>\r\n          <div className=\"text-muted-foreground\">\r\n            Visitors for the last 6 months\r\n          </div>\r\n        </CardFooter>\r\n      </Card>\r\n      <Card className=\"@container/card\">\r\n        <CardHeader>\r\n          <CardDescription>New Customers</CardDescription>\r\n          <CardTitle className=\"text-2xl font-semibold tabular-nums @[250px]/card:text-3xl\">\r\n            1,234\r\n          </CardTitle>\r\n          <CardAction>\r\n            <Badge variant=\"outline\">\r\n              <IconTrendingDown />\r\n              -20%\r\n            </Badge>\r\n          </CardAction>\r\n        </CardHeader>\r\n        <CardFooter className=\"flex-col items-start gap-1.5 text-sm\">\r\n          <div className=\"line-clamp-1 flex gap-2 font-medium\">\r\n            Down 20% this period <IconTrendingDown className=\"size-4\" />\r\n          </div>\r\n          <div className=\"text-muted-foreground\">\r\n            Acquisition needs attention\r\n          </div>\r\n        </CardFooter>\r\n      </Card>\r\n      <Card className=\"@container/card\">\r\n        <CardHeader>\r\n          <CardDescription>Active Accounts</CardDescription>\r\n          <CardTitle className=\"text-2xl font-semibold tabular-nums @[250px]/card:text-3xl\">\r\n            45,678\r\n          </CardTitle>\r\n          <CardAction>\r\n            <Badge variant=\"outline\">\r\n              <IconTrendingUp />\r\n              +12.5%\r\n            </Badge>\r\n          </CardAction>\r\n        </CardHeader>\r\n        <CardFooter className=\"flex-col items-start gap-1.5 text-sm\">\r\n          <div className=\"line-clamp-1 flex gap-2 font-medium\">\r\n            Strong user retention <IconTrendingUp className=\"size-4\" />\r\n          </div>\r\n          <div className=\"text-muted-foreground\">Engagement exceed targets</div>\r\n        </CardFooter>\r\n      </Card>\r\n      <Card className=\"@container/card\">\r\n        <CardHeader>\r\n          <CardDescription>Growth Rate</CardDescription>\r\n          <CardTitle className=\"text-2xl font-semibold tabular-nums @[250px]/card:text-3xl\">\r\n            4.5%\r\n          </CardTitle>\r\n          <CardAction>\r\n            <Badge variant=\"outline\">\r\n              <IconTrendingUp />\r\n              +4.5%\r\n            </Badge>\r\n          </CardAction>\r\n        </CardHeader>\r\n        <CardFooter className=\"flex-col items-start gap-1.5 text-sm\">\r\n          <div className=\"line-clamp-1 flex gap-2 font-medium\">\r\n            Steady performance increase <IconTrendingUp className=\"size-4\" />\r\n          </div>\r\n          <div className=\"text-muted-foreground\">Meets growth projections</div>\r\n        </CardFooter>\r\n      </Card>\r\n    </div>\r\n  )\r\n}"
+    ],
+    "description": "",
+    "scope": "jsx / tsx"
+  },
+  "one_components_site-header_tsx": {
+    "prefix": "one_components_site-header_tsx",
+    "body": [
+      "import { Button } from \"@/components/ui/button\"\r\nimport { Separator } from \"@/components/ui/separator\"\r\nimport { SidebarTrigger } from \"@/components/ui/sidebar\"\r\n\r\nexport function SiteHeader() {\r\n  return (\r\n    <header className=\"flex h-(--header-height) shrink-0 items-center gap-2 border-b transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-(--header-height)\">\r\n      <div className=\"flex w-full items-center gap-1 px-4 lg:gap-2 lg:px-6\">\r\n        <SidebarTrigger className=\"-ml-1\" />\r\n        <Separator\r\n          orientation=\"vertical\"\r\n          className=\"mx-2 data-[orientation=vertical]:h-4\"\r\n        />\r\n        <h1 className=\"text-base font-medium\">Documents</h1>\r\n        <div className=\"ml-auto flex items-center gap-2\">\r\n          <Button variant=\"ghost\" asChild size=\"sm\" className=\"hidden sm:flex\">\r\n            <a\r\n              href=\"https://github.com/shadcn-ui/ui/tree/main/apps/v4/app/(examples)/dashboard\"\r\n              rel=\"noopener noreferrer\"\r\n              target=\"_blank\"\r\n              className=\"dark:text-foreground\"\r\n            >\r\n              GitHub\r\n            </a>\r\n          </Button>\r\n        </div>\r\n      </div>\r\n    </header>\r\n  )\r\n}"
+    ],
+    "description": "",
+    "scope": "jsx / tsx"
+  },
+  "error_loading": {
+    "prefix": "error_loading",
+    "body": [
+      "export function ErrorLoading({ loadError }) {\n  const nav = useNavigate()\n  if (loadError) {\n    return (\n      <div className=\"min-h-screen bg-gbackground flex items-center justify-center\">\n        <div className=\"text-center max-w-md\">\n          <AlertCircle className=\"w-12 h-12 text-red-500 mx-auto mb-4\" />\n          <div className=\"text-lg font-medium text-foreground mb-2\">Failed to Load Configuration</div>\n          <div className=\"text-sm text-muted-foreground mb-4\">{loadError}</div>\n          <Button\n            onClick={() => nav(0)}\n            className=\"px-4 py-2 bg-primary hover:bg-primary/20 text-foreground rounded-lg transition-colors\"\n          >\n            Retry\n          </Button>\n        </div>\n      </div>\n    );\n  }\n}"
+    ],
+    "description": "",
+    "scope": "jsx / tsx"
+  },
+  "under_construction": {
+    "prefix": "under_construction",
+    "body": [
+      "export function UnderConstruction({ dealerName }) {\r\n  /**\r\n   * \r\nimport {  type ActionFunction,  json,  type LoaderFunction,  redirect,} from \"@remix-run/node\";\r\n\r\nexport async function loader({ request, params, req }: LoaderFunction) {\r\n  const DEALER_NAME = process.env.DEALER_NAME;\r\n  return json({DEALER_NAME});\r\n}\r\n\r\nexport default function Commissions() {\r\n    const { DEALER_NAME} = useLoaderData()\r\n    return (\r\n        <UnderConstruction dealerName={DEALER_NAME} />\r\n    )\r\n}\r\n   * \r\n   */\r\n  return (\r\n    <div className=\"flex max-h-[300px] flex-col items-center justify-center gap-6 bg-background p-6 md:p-10\">\r\n      <div className=\"w-full max-w-sm\">\r\n        <div className=\"flex flex-col gap-6\">\r\n          <form>\r\n            <div className=\"flex flex-col gap-6\">\r\n              <div className=\"flex flex-col items-center gap-2\">\r\n                <div className=\"flex flex-col items-center gap-2 font-medium\"            >\r\n                  <div className=\"flex h-8 w-8 items-center justify-center rounded-md\">\r\n                    <CarFront className=\"size-6\" />\r\n                  </div>\r\n                  <span className=\"sr-only\">{dealerName}.</span>\r\n                </div>\r\n                <h1 className=\"text-xl font-bold\">{dealerName}.</h1>\r\n                <div className=\"text-center text-sm\">\r\n                  UNDER CONSTRUCTION\r\n                </div>\r\n              </div>   <div className=\"flex flex-col gap-1\">\r\n                <p className='text-center'>Please check back later once this page is developed. Thank you for your patience and understanding.</p>\r\n                <div className=\"relative text-center text-sm after:absolute after:inset-0 after:top-1/2 after:z-0 after:flex after:items-center after:border-t after:border-border\">\r\n                  <span className=\"relative z-10 bg-background px-2 text-muted-foreground\">\r\n                    <p>The dev.</p>\r\n                  </span>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </form>\r\n          <div className=\"text-balance text-center text-xs text-muted-foreground [&_a]:underline [&_a]:underline-offset-4 hover:[&_a]:text-primary  \">\r\n\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  )\r\n}"
+    ],
+    "description": "",
+    "scope": "jsx / tsx"
+  },
+  "loading": {
+    "prefix": "loading",
+    "body": [
+      "export function Loading({ text = 'Loading...', size = 6, color = 'border-blue-500' }) {\r\n  return (\r\n    <div className='flex items-center gap-3'>\r\n      <div className=\"flex items-center justify-center h-full\">\r\n        <div className={`animate-spin rounded-full h-${size} w-${size} border-t-4 border-${color} border-solid`}></div>\r\n      </div>\r\n      <p className='ml-3'>{text}</p>\r\n    </div>\r\n  );\r\n}"
+    ],
+    "description": "",
+    "scope": "jsx / tsx"
+  },
+  "tooltip_button": {
+    "prefix": "tooltip_button",
+    "body": [
+      "function TooltipButton({ icon, content, onClick = null }) {\r\n        return (\r\n            <Tooltip>\r\n                <TooltipTrigger asChild>\r\n                    <Button\r\n                        variant='ghost'\r\n                        size='icon'\r\n                        className='toolbar-button format-active'\r\n                        onClick={onClick}  // Fixed: Pass onClick directly\r\n                    >\r\n                        {icon}\r\n                    </Button>\r\n                </TooltipTrigger>\r\n                <TooltipContent>\r\n                    <p>{content}</p>\r\n                </TooltipContent>\r\n            </Tooltip>\r\n        );\r\n    }"
+    ],
+    "description": "",
+    "scope": "jsx / tsx"
+  },
+  "action_template": {
+    "prefix": "action_template",
+    "body": [
+      "export async function action({ request }: ActionFunction) {\n  const d = Object.fromEntries(await request.formData());\n  const session = await getAuthSession(request.headers.get(\"Cookie\"));\n  const email = session.get(\"email\");\n  const user = await GetUser(email);\n  if (!user) { return redirect(process.env.LOGIN); }\n  if (d.intent === \"clientTurnover\") {\n    const existingTurnover = await prisma.test.findFirst({\n      where: {\n        dealerId: d.dealerId,\n        locked: true,\n        response: false\n      }\n    });\n    return json({ success: true, existingTurnover });\n  }\n  return json({ error: \"Invalid intent\" }, { status: 400 });\n}"
+    ],
+    "description": "",
+    "scope": "jsx / tsx"
+  },
+  "loader_template": {
+    "prefix": "loader_template",
+    "body": [
+      "import { getAuthSession } from \"~/sessions/auth-session.server\";\r\nimport { GetUser } from \"~/utils/loader.server\";\r\nimport eP from \"~/utils/ext.server\";\r\nimport { prisma } from \"~/libs\";\r\nimport { type LinksFunction, MetaFunction, json } from \"@remix-run/node\";\r\n\r\nexport async function loader({ request, params }: LoaderFunction) {\r\n  const session = await getAuthSession(request.headers.get(\"Cookie\"));\r\n  const email = session.get(\"email\");\r\n  const user = await GetUser(email);\r\n  if (!user) { return redirect(process.env.LOGIN) }\r\n  return json({ user })\r\n}"
+    ],
+    "description": "",
+    "scope": "jsx / tsx"
+  },
+  "onsubmit_w_buttonstyled": {
+    "prefix": "onsubmit_w_buttonstyled",
+    "body": [
+      "<ButtonStyled onClick={() => {\r\n            const formData = new FormData();\r\n            {/** user */ }\r\n            formData.append(\"id\", item.id);\r\n            formData.append(\"intent\", \"deleteProgress\");\r\n            fetcher.submit(formData, { method: \"post\" });\r\n        }}>\r\n            Save\r\n        </ButtonStyled>"
+    ],
+    "description": "",
+    "scope": "jsx / tsx"
+  },
+  "testttt": {
+    "prefix": "testttt",
+    "body": [
+      "setDevstackFormData({\r\n      label: noSpace,\r\n      type: 'md',\r\n      path: \"c:/Users/skyle/AppData/Roaming/Code - Insiders/User/globalStorage/skyler.ocrmnav/ocrmnavigator.code-snippets\",\r\n    })"
+    ],
+    "description": "",
+    "scope": "jsx / tsx"
+  },
+  "test1234": {
+    "prefix": "test1234",
+    "body": [
+      "{\r\n        label: noSpace,\r\n        type: 'md',\r\n        path: \"c:/Users/skyle/AppData/Roaming/Code - Insiders/User/globalStorage/skyler.ocrmnav/ocrmnavigator.code-snippets\",\r\n      }"
+    ],
+    "description": "",
+    "scope": "jsx / tsx"
+  },
+  "default_route_scaffolding": {
+    "prefix": "default_route_scaffolding",
+    "body": [
+      "import { React, useCallback, useEffect, useMemo, useRef, useState } from 'react';\r\nimport { NavLink, Outlet, useActionData, useFetcher, useLoaderData, useLocation, useNavigate, useNavigation, useParams, useRouteLoaderData, useSearchParams, useSubmit } from '@remix-run/react';\r\nimport { eP } from '~/utils/ext';\r\nimport { authSessionStorage } from '~/sessions/session';\r\nimport { axios } from 'axios';\r\nimport { ActionArgs, defer, json, redirect, type ActionArgs, type LoaderArgs } from '@remix-run/node';\r\nimport { prisma } from \"~/libs\";\r\nimport { CarFront, Link } from 'lucide-react';\r\nimport { ButtonStyled } from '~/components/ui/button-loading';\r\nimport { Label } from '~/components/ui/label';\r\n\r\n\r\n\r\nexport default function Dashboard() {\r\n    const { user } = useLoaderData()\r\n    const [isLoading, setIsLoading] = useState(true);\r\n    const [loadError, setLoadError] = useState(null);\r\n\r\n\r\n    if (isLoading) {\r\n        return (\r\n            <div className=\"min-h-screen bg-background flex items-center justify-center\">\r\n                <div className=\"text-center\">\r\n                    <div className=\"w-12 h-12 border-4 border-blue-500 border-t-transparent rounded-full animate-spin mx-auto mb-4\"></div>\r\n                    <div className=\"text-lg font-medium text-gray-700\">Loading configuration...</div>\r\n                    <div className=\"text-sm text-gray-500 mt-2\">Fetching build settings from server</div>\r\n                </div>\r\n            </div>\r\n        );\r\n    }\r\n    if (loadError) {\r\n        return (\r\n            <div className=\"min-h-screen bg-background flex items-center justify-center\">\r\n                <div className=\"text-center max-w-md\">\r\n                    <AlertCircle className=\"w-12 h-12 text-red-500 mx-auto mb-4\" />\r\n                    <div className=\"text-lg font-medium text-foreground mb-2\">Failed to Load Configuration</div>\r\n                    <div className=\"text-sm text-muted-foreground mb-4\">{loadError}</div>\r\n                    <Button\r\n                        onClick={() => nav(0)}\r\n                        className=\"px-4 py-2 bg-primary hover:bg-primary/20 text-foreground rounded-lg transition-colors\"\r\n                    >\r\n                        Retry\r\n                    </Button>\r\n                </div>\r\n            </div>\r\n        );\r\n    }\r\n    return (\r\n        <div className=\"flex flex-col justify-center gap-3\">\r\n\r\n        </div>\r\n    )\r\n}\r\n\r\nexport async function action({ request }: ActionArgs) {\r\n    const session = await authSessionStorage.getSession(request.headers.get(\"Cookie\"));\r\n    const email = session.get(\"email\");\r\n    const user = await eP.user.simple(email)\r\n    if (!user) { return redirect(process.env.LOGIN); }\r\n\r\n    const d = Object.fromEntries(await request.formData());\r\n    const intent = d.intent\r\n\r\n    try {\r\n        if (intent === 'createFunction') {\r\n            const result = await prisma.Function.create({\r\n                data: {\r\n                    ...data\r\n                }\r\n            });\r\n            return json({ success: true, result });\r\n        } else if (intent === 'updateFunction') {\r\n            const result = await prisma.Function.update({\r\n                where: { id: String(id) },\r\n                data\r\n            });\r\n            return json({ success: true, result });\r\n        } else if (intent === 'deleteFunction') {\r\n            const result = await prisma.Function.delete({\r\n                where: { id: String(id) },\r\n\r\n            });\r\n            return json({ success: true, result });\r\n        } else {\r\n            return json({ success: false, error: \"Invalid intent\" }, { status: 400 });\r\n        }\r\n\r\n    } catch (error) {\r\n        return json({\r\n            success: false,\r\n            error: error instanceof Error ? error.message : \"Unknown error\"\r\n        }, { status: 500 });\r\n    }\r\n}\r\n\r\nexport async function loader({ request }: LoaderArgs) {\r\n    const session = await authSessionStorage.getSession(request.headers.get(\"Cookie\"));\r\n    const email = session.get(\"email\");\r\n    const user = await eP.user.all(email)\r\n    if (!user) { return redirect(import.meta.env.VITE_LOGIN); }\r\n\r\n    return json({ user })\r\n}\r\n\r\nexport const meta: MetaFunction = () => {\r\n    return [\r\n        { title: \"Dashboard - Catalyst\" },\r\n        { name: \"description\", content: \"Catalyst software dashboard.\" },\r\n    ];\r\n};"
+    ],
+    "description": "",
+    "scope": "jsx / tsx"
+  },
+  "use_hydrated": {
+    "prefix": "use_hydrated",
+    "body": [
+      "import { useSyncExternalStore } from \"react\";\r\n\r\nfunction subscribe() {\r\n\t// biome-ignore lint/suspicious/noEmptyBlockStatements: Mock function\r\n\treturn () => {};\r\n}\r\n\r\n/**\r\n * Return a boolean indicating if the JS has been hydrated already.\r\n * When doing Server-Side Rendering, the result will always be false.\r\n * When doing Client-Side Rendering, the result will always be false on the\r\n * first render and true from then on. Even if a new component renders it will\r\n * always start with true.\r\n *\r\n * Example: Disable a button that needs JS to work.\r\n */\r\nexport function useHydrated() {\r\n\treturn useSyncExternalStore(\r\n\t\tsubscribe,\r\n\t\t() => true,\r\n\t\t() => false,\r\n\t);\r\n}"
+    ],
+    "description": "",
+    "scope": "jsx / tsx"
+  },
+  "themed_scrollbar": {
+    "prefix": "themed_scrollbar",
+    "body": [
+      "/* scroll bar */\n::-webkit-scrollbar {\n  width: 10px;\n  height: 10px;\n}\n\n::-webkit-scrollbar-track {\n  background-color: hsl(var(--muted));\n  border-radius: 0.25rem;\n\n}\n\n::-webkit-scrollbar-thumb {\n  background-color: hsl(var(--primary) / 0.3);\n  border-radius: 0.25rem;\n}\n\n::-webkit-scrollbar-thumb:hover {\n  background-color:hsl(var(--primary));\n}"
+    ],
+    "description": "",
+    "scope": "jsx / tsx"
+  },
+  "client_only_without_remix_utils": {
+    "prefix": "client_only_without_remix_utils",
+    "body": [
+      "client-only',\r\n        template: `import * as React from \"react\";\r\nimport { useHydrated } from \"./use-hydrated\";\r\n\r\ntype Props = {\r\n\t/**\r\n\t * You are encouraged to add a fallback that is the same dimensions\r\n\t * as the client rendered children. This will avoid content layout\r\n\t * shift which is disgusting\r\n\t */\r\n\tchildren(): React.ReactNode;\r\n\tfallback?: React.ReactNode;\r\n};\r\n\r\n/**\r\n * Render the children only after the JS has loaded client-side. Use an optional\r\n * fallback component if the JS is not yet loaded.\r\n *\r\n * Example: Render a Chart component if JS loads, renders a simple FakeChart\r\n * component server-side or if there is no JS. The FakeChart can have only the\r\n * UI without the behavior or be a loading spinner or skeleton.\r\n *   <ClientOnly fallback={<FakeChart />}>\r\n *     {() => <Chart />}\r\n *   </ClientOnly>\r\n */\r\nexport function ClientOnly({ children, fallback = null }: Props) {\r\n\treturn useHydrated() ? <>{children()}</> : <>{fallback}</>;\r\n}"
+    ],
+    "description": "",
+    "scope": "jsx / tsx"
+  },
+  "search_with_fuse_js": {
+    "prefix": "search_with_fuse_js",
+    "body": [
+      "const searchRef = useRef()\r\n    const [list, setLists] = useState()\r\n    <div className=\"relative ml-auto flex-1 md:grow-0\">\r\n                <Search className=\"absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-muted-foreground\" />\r\n                <Input\r\n                    ref={searchRef}\r\n                    type=\"search\"\r\n                    name=\"q\"\r\n                    onChange={(e) => {\r\n                         let q = e.currentTarget.value\r\n                    if (!q) return [];\r\n                    const searchThrough = galleryImages\r\n                    const options = { keys: ['year', 'brand', 'model', 'name'], threshold: 0.3, ignoreLocation: true, includeScore: true };\r\n                    const fuse = new Fuse(searchThrough, options);\r\n                    const searchResults = fuse.search(q);\r\n                    const items = searchResults.map(result => result.item);\r\n                    setList(items)\r\n                    }}\r\n                    autoFocus\r\n                    className=\"w-full rounded-[0px] border-x-none border-t-none bg-background pl-8\"\r\n                />\r\n                <Button onClick={() => { setList(note) }} size=\"sm\" variant=\"ghost\" className=\"absolute right-2 top-1/2 transform -translate-y-1/2 bg-transparent hover:bg-transparent text-muted-foreground\"  >\r\n                    <X />\r\n                </Button>\r\n            </div>"
+    ],
+    "description": "",
+    "scope": "jsx / tsx"
+  },
+  "search_with_filter": {
+    "prefix": "search_with_filter",
+    "body": [
+      "const searchRef = useRef()\r\n    const [list, setLists] = useState()\r\n    <div className=\"relative ml-auto flex-1 md:grow-0\">\r\n                <Search className=\"absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-muted-foreground\" />\r\n                <Input\r\n                    ref={searchRef}\r\n                    type=\"search\"\r\n                    name=\"q\"\r\n                    onChange={(e) => {\r\n                        let q = e.currentTarget.value;\r\n                        if (!q) return setList(t?.FinanceNote);\r\n                        q = q.toLowerCase();\r\n                        const getit = products;\r\n                        const result = getit.filter(\r\n                            (result) =>\r\n                                result.body?.toLowerCase().includes(q) ||\r\n                                result.createdAt?.toLowerCase().includes(q) ||\r\n                                result.userEmail?.toLowerCase().includes(q) ||\r\n                                result.userName?.toLowerCase().includes(q)\r\n                        );\r\n                        setList(result);\r\n                    }}\r\n                    autoFocus\r\n                    className=\"w-full rounded-[0px] border-x-none border-t-none bg-background pl-8\"\r\n                />\r\n                <Button onClick={() => { setList(note) }} size=\"sm\" variant=\"ghost\" className=\"absolute right-2 top-1/2 transform -translate-y-1/2 bg-transparent hover:bg-transparent text-muted-foreground\"  >\r\n                    <X />\r\n                </Button>\r\n            </div>"
+    ],
+    "description": "",
+    "scope": "jsx / tsx"
+  },
+  "stock_command_with_map": {
+    "prefix": "stock_command_with_map",
+    "body": [
+      "const searchRef = useRef()\r\n    const [list, setLists] = useState()\r\n    <Command className=\"rounded-lg border shadow-md\">\r\n                            <div className=\"relative\">\r\n                                <Search className=\"absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-muted-foreground\" />\r\n                                <CommandInput className=\"pl-3\" placeholder=\"Search clients...\" />\r\n                            </div>\r\n                            <CommandList>\r\n                                <CommandEmpty>No results found.</CommandEmpty>\r\n                                <CommandGroup heading=\"Clients\">\r\n                                    {clients.map((item, index) => (\r\n                                        <CommandItem\r\n                                            key={index}\r\n                                            onSelect={() => setClient(item)}\r\n                                            className='flex flex-col items-start gap-1 p-3'\r\n                                        >\r\n                                            <span className=\"font-medium\">{item.firstName} {item.lastName}</span>\r\n                                            <span className='text-sm text-muted-foreground'>{item.email}</span>\r\n                                        </CommandItem>\r\n                                    ))}\r\n                                </CommandGroup>\r\n                            </CommandList>\r\n                        </Command>"
+    ],
+    "description": "",
+    "scope": "jsx / tsx"
+  },
+  "command_with_search": {
+    "prefix": "command_with_search",
+    "body": [
+      "const searchRef = useRef()\r\n    const [list, setLists] = useState()\r\n    <Command className=\"rounded-[0px] border border-border shadow-md mb-5 flex flex-col max-h-[450px] overflow-y-auto\">\r\n            <div className=\"relative ml-auto flex-1 md:grow-0\">\r\n                <Search className=\"absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-muted-foreground\" />\r\n                <Input\r\n                    ref={searchRef}\r\n                    type=\"search\"\r\n                    name=\"q\"\r\n                    onChange={(e) => {\r\n                        let q = e.currentTarget.value;\r\n                        if (!q) return setList(t?.FinanceNote);\r\n                        q = q.toLowerCase();\r\n                        const getit = products;\r\n                        const result = getit.filter(\r\n                            (result) =>\r\n                                result.body?.toLowerCase().includes(q) ||\r\n                                result.createdAt?.toLowerCase().includes(q) ||\r\n                                result.userEmail?.toLowerCase().includes(q) ||\r\n                                result.userName?.toLowerCase().includes(q)\r\n                        );\r\n                        setList(result);\r\n                    }}\r\n                    autoFocus\r\n                    className=\"w-full rounded-[0px] border-x-none border-t-none bg-background pl-8\"\r\n                />\r\n                <Button onClick={() => { setList(note) }} size=\"sm\" variant=\"ghost\" className=\"absolute right-2 top-1/2 transform -translate-y-1/2 bg-transparent hover:bg-transparent text-muted-foreground\"  >\r\n                    <X />\r\n                </Button>\r\n            </div>\r\n            <CommandList className=\"overflow-y-auto overflow-x-clip min-h-0 flex-grow\">\r\n                <CommandEmpty>No results found.</CommandEmpty>\r\n                <CommandGroup heading=\"Notes\">\r\n                    {list.map((r, index) => (\r\n                        <CommandItem key={index}>\r\n                            <Search className=\"mr-2 h-4 w-4\" />\r\n                            <span>Search</span>\r\n                        </CommandItem>\r\n                    ))}\r\n                </CommandGroup>\r\n            </CommandList>\r\n        </Command>"
+    ],
+    "description": "",
+    "scope": "jsx / tsx"
+  },
+  "auth_design_page": {
+    "prefix": "auth_design_page",
+    "body": [
+      "<div className=\"bg-background flex min-h-[60vh] flex-col items-start justify-center gap-6 p-6 md:p-10\">\r\n      <div className=\"w-full max-w-sm\">\r\n        <div className=\"flex flex-col gap-6\" >\r\n          <div className=\"flex flex-col gap-6\">\r\n            <div className=\"flex flex-col items-center gap-2\">\r\n              <div className=\"flex size-8 items-center justify-center rounded-md\">\r\n                <Banknote className=\"size-6\" />\r\n              </div>\r\n              <h1 className=\"text-xl font-bold\">Finance Buffer</h1>\r\n              <div className=\"text-center text-sm\">\r\n                Adds a monetary buffer to contracts. Some dealers do this, while other do not. It's not necessary, and you have to keep this in mind when finalizing contracts.\r\n              </div>\r\n            </div>\r\n            <div className=\"flex flex-col gap-6\">\r\n              <fetcher.Form method='post' >\r\n                <div className=\"grid w-full max-w-sm items-center gap-3\">\r\n                  <Label>Buffer</Label>\r\n                  <Input name='financeBuffer' defaultValue={d.financeBuffer} />\r\n                </div>\r\n                <ButtonStyled value='buffer' >\r\n                  Save\r\n                </ButtonStyled>\r\n              </fetcher.Form>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>"
+    ],
+    "description": "",
+    "scope": "jsx / tsx"
+  },
+  "prevstate": {
+    "prefix": "prevstate",
+    "body": [
+      "const [data, setData] = useState((prev) => !prev);"
+    ],
+    "description": "",
+    "scope": "jsx / tsx"
+  },
+  "command_with_pagination": {
+    "prefix": "command_with_pagination",
+    "body": [
+      "function EmailTemplateCommand({ templates, setTextValue, textValue }) {\r\n        const [search, setSearch] = useState('')\r\n        const [pages, setPages] = useState([])\r\n        const [selectedCategory, setSelectedCategory] = useState(null)\r\n        const page = pages[pages.length - 1]\r\n\r\n        const categories = Array.from(new Set(templates.map(t => t.category)))\r\n\r\n        const subCategories = templates\r\n            .filter(t => t.category === selectedCategory)\r\n            .map(t => t.subCat)\r\n            .filter((value, index, self) => self.indexOf(value) === index)\r\n        return (\r\n            <Command className=\"rounded-lg border shadow-md md:min-w-[450px]\">\r\n                <CommandInput placeholder=\"Search templates...\" value={search} onValueChange={setSearch} />\r\n                <CommandList>\r\n                    <CommandEmpty>No results found.</CommandEmpty>\r\n                    {!page && (\r\n                        <CommandGroup heading=\"Categories\">\r\n                            {categories.map((category) => (\r\n                                <CommandItem key={category}\r\n                                    onSelect={() => {\r\n                                        setSelectedCategory(category)\r\n                                        setPages([...pages, category])\r\n                                    }}  >\r\n                                    {category}\r\n                                </CommandItem>\r\n                            ))}\r\n                        </CommandGroup>\r\n                    )}\r\n                    {page && selectedCategory && (\r\n                        <CommandGroup heading={'$ {selectedCategory}'}>\r\n                            {subCategories.map((subCat) => (\r\n                                <TooltipProvider>\r\n                                    <Tooltip key={subCat}>\r\n                                        <TooltipTrigger asChild>\r\n                                            <CommandItem onSelect={() => {\r\n                                                const selectedTemplate = templates.find(t => t.category === selectedCategory && t.subCat === subCat)\r\n                                                if (selectedTemplate) {\r\n                                                    console.log('Selected template:', selectedTemplate)\r\n                                                    setTextValue('$ {textValue} $ {selectedTemplate.body}')\r\n                                                }\r\n                                            }} >\r\n                                                {subCat}\r\n                                            </CommandItem>\r\n                                        </TooltipTrigger>\r\n                                        <TooltipContent\r\n                                            className=\"max-w-md p-4 bg-white border shadow-lg\"\r\n                                            side=\"top\"\r\n                                            align=\"start\"\r\n                                        >\r\n                                            <div className=\"space-y-3\">\r\n                                                {/* Header */}\r\n                                                <div className=\"flex items-center gap-2 pb-2 border-b\">\r\n                                                    <Mail className=\"h-4 w-4 text-blue-600\" />\r\n                                                    <span className=\"font-semibold text-gray-900\">Email Template</span>\r\n                                                </div>\r\n\r\n                                                {/* Category */}\r\n                                                <div className=\"flex items-start gap-2\">\r\n                                                    <Tag className=\"h-4 w-4 text-green-600 mt-0.5 flex-shrink-0\" />\r\n                                                    <div>\r\n                                                        <span className=\"text-xs font-medium text-gray-500 uppercase tracking-wide\">Category</span>\r\n                                                        <p className=\"text-sm font-medium text-gray-900\">{template.category}</p>\r\n                                                    </div>\r\n                                                </div>\r\n\r\n                                                {/* Sub Category */}\r\n                                                <div className=\"flex items-start gap-2\">\r\n                                                    <Tag className=\"h-4 w-4 text-orange-600 mt-0.5 flex-shrink-0\" />\r\n                                                    <div>\r\n                                                        <span className=\"text-xs font-medium text-gray-500 uppercase tracking-wide\">Sub Category</span>\r\n                                                        <p className=\"text-sm font-medium text-gray-900\">{template.subCat}</p>\r\n                                                    </div>\r\n                                                </div>\r\n\r\n                                                {/* Body */}\r\n                                                <div className=\"flex items-start gap-2\">\r\n                                                    <FileText className=\"h-4 w-4 text-purple-600 mt-0.5 flex-shrink-0\" />\r\n                                                    <div className=\"flex-1 min-w-0\">\r\n                                                        <span className=\"text-xs font-medium text-gray-500 uppercase tracking-wide\">Template Body</span>\r\n                                                        <div className=\"mt-1 p-2 bg-gray-50 rounded text-xs text-gray-700 max-h-32 overflow-y-auto\">\r\n                                                            <pre className=\"whitespace-pre-wrap font-sans\">{template.body}</pre>\r\n                                                        </div>\r\n                                                    </div>\r\n                                                </div>\r\n                                            </div>\r\n                                        </TooltipContent>\r\n                                    </Tooltip>\r\n                                </TooltipProvider>\r\n\r\n                            ))}\r\n                        </CommandGroup>\r\n                    )}\r\n\r\n                    {/* Back button when in subcategory view */}\r\n                    {page && (\r\n                        <CommandGroup>\r\n                            <CommandItem\r\n                                onSelect={() => setPages(pages.slice(0, -1))}\r\n                                className=\"text-muted-foreground\"\r\n                            >\r\n                                ← Back to categories\r\n                            </CommandItem>\r\n                        </CommandGroup>\r\n                    )}\r\n                </CommandList>\r\n            </Command>\r\n        )\r\n    }"
+    ],
+    "description": "",
+    "scope": "jsx / tsx"
+  },
+  "fetch_w_state_and_useeffect": {
+    "prefix": "fetch_w_state_and_useeffect",
+    "body": [
+      "const [scripts, setScripts] = useState([]);\r\n        \r\n        async function fetchServiceData() {\r\n            const response = await axios.get('/portal/api/sidebar/workorder');\r\n            if (response.status !== 200) { return { error: \"Failed to fetch data.\" }; }\r\n            const data = response.data\r\n            setScripts(data)\r\n            return null;\r\n        }\r\n        useEffect(() => {\r\n            fetchServiceData()\r\n        }, []);"
+    ],
+    "description": "",
+    "scope": "jsx / tsx"
+  },
+  "designed_button_classname": {
+    "prefix": "designed_button_classname",
+    "body": [
+      "className={cn(\r\n                  \"bg-background relative rounded-md p-3 pl-6 text-sm cursor-pointer transition-colors hover:ring-2 hover:ring-blue-200\",\r\n                  \"after:bg-[#155dfc] after:absolute after:inset-y-2 after:right-2 after:w-1 after:rounded-full\",\r\n                  selectedChat?.id === chat.id ? \"bg-background ring-2 ring-blue-200\" : \"hover:bg-background\",\r\n                  chat.completed === true && \"opacity-60 after:bg-green-500\",\r\n                  new Date(Date.parse(chat.start)) < new Date() && \"opacity-60 after:bg-red-500\"\r\n                )}"
+    ],
+    "description": "",
+    "scope": "jsx / tsx"
+  },
+  "fuse_input_w_x": {
+    "prefix": "fuse_input_w_x",
+    "body": [
+      "<div className=\"relative group\">\r\n            <Search className=\"absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-muted-foreground\" />\r\n            <Input\r\n                onChange={(e) => {\r\n                let q = e.currentTarget.value\r\n                if (!q) return [];\r\n                const options = {  \r\n                    keys: ['clientName', 'clientEmail', 'clientPhone', 'messages.text'],  \r\n                    threshold: 0.2,   \r\n                    ignoreLocation: true,   \r\n                    includeScore: true  \r\n                };\r\n                const fuse = new Fuse(chats, options);\r\n                const searchResults = fuse.search(q);\r\n                setChatsList(searchResults.map(result => result.item))\r\n                }}\r\n                className=\"w-full pl-8 focus:pr-8 group-hover:pr-8\"\r\n            />\r\n            <Button\r\n                className='absolute right-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-muted-foreground opacity-0 group-hover:opacity-100 focus-within:opacity-100 transition-opacity'\r\n                size='icon'\r\n                variant='ghost'\r\n                onClick={() => {\r\n                setChatsList(chats || [])\r\n                }}\r\n            >\r\n                <X />\r\n            </Button>\r\n            </div>"
+    ],
+    "description": "",
+    "scope": "jsx / tsx"
+  },
+  "buttonstyled": {
+    "prefix": "buttonstyled",
+    "body": [
+      "<ButtonStyled \n    value='intentsValue'\n    onClick={() => onSave()} >\n    Save \n</ButtonStyled>"
+    ],
+    "description": "",
+    "scope": "jsx / tsx"
+  },
+  "input": {
+    "prefix": "input",
+    "body": [
+      "<div className=\"grid w-full max-w-sm items-center gap-1.5\">\r\n            <Label>Email</Label>\r\n            <Input name=\"email\" value={email} />\r\n        </div>"
+    ],
+    "description": "",
+    "scope": "jsx / tsx"
+  },
+  "card": {
+    "prefix": "card",
+    "body": [
+      "<Card>\r\n            <CardHeader>\r\n                <CardTitle>Card Title</CardTitle>\r\n                <CardDescription>Card Description</CardDescription>\r\n            </CardHeader>\r\n            <CardContent>\r\n                <p>Card Content</p>\r\n            </CardContent>\r\n            <CardFooter>\r\n                <p>Card Footer</p>\r\n            </CardFooter>\r\n        </Card>"
+    ],
+    "description": "",
+    "scope": "jsx / tsx"
+  },
+  "dialog": {
+    "prefix": "dialog",
+    "body": [
+      "<Dialog>\r\n            <DialogTrigger asChild>\r\n                <Button variant=\"outline\">Open Dialog</Button>\r\n            </DialogTrigger>\r\n            <DialogContent className=\"sm:max-w-[425px]\">\r\n                <DialogHeader>\r\n                    <DialogTitle>Edit profile</DialogTitle>\r\n                    <DialogDescription>\r\n                        Make changes to your profile here. Click save when you're done.\r\n                    </DialogDescription>\r\n                </DialogHeader>\r\n                <div className=\"grid gap-4 py-4\">\r\n                    <div className=\"grid grid-cols-4 items-center gap-4\">\r\n                        <Label htmlFor=\"name\" className=\"text-right\">\r\n                            Name\r\n                        </Label>\r\n                        <Input id=\"name\" value=\"Pedro Duarte\" className=\"col-span-3\" />\r\n                    </div>\r\n                </div>\r\n                <DialogFooter>\r\n                    <Button type=\"submit\">Save changes</Button>\r\n                </DialogFooter>\r\n            </DialogContent>\r\n        </Dialog>"
+    ],
+    "description": "",
+    "scope": "jsx / tsx"
+  },
+  "fetcher_form": {
+    "prefix": "fetcher_form",
+    "body": [
+      "<fetcher.Form method='post'  className=\"space-y-8\">\r\n            <div className=\"grid w-full max-w-sm items-center gap-1.5\">\r\n            <Label>Email</Label>\r\n            <Input name=\"email\" value={email} />\r\n        </div>\r\n                <Button type=\"submit\">Submit</Button>\r\n        </fetcher.Form>"
+    ],
+    "description": "",
+    "scope": "jsx / tsx"
+  },
+  "select": {
+    "prefix": "select",
+    "body": [
+      "<div className=\"grid w-full max-w-sm items-center gap-1.5\">\r\n    <Label>Dept</Label>\r\n    <Select value={dept} onValueChange={(value) => {\r\n      setDept(value)\r\n    }}>\r\n       <SelectTrigger >\r\n       <SelectValue />\r\n       </SelectTrigger>\r\n       <SelectContent>\r\n          <SelectItem value=\"Sales\">Sales</SelectItem>\r\n          <SelectItem value=\"Service\">Service</SelectItem>\r\n           <SelectItem value=\"PAC\">PAC</SelectItem>\r\n          <SelectItem value=\"Office\">Office</SelectItem>\r\n        </SelectContent>\r\n       </Select>\r\n </div>"
+    ],
+    "description": "",
+    "scope": "jsx / tsx"
+  },
+  "table": {
+    "prefix": "table",
+    "body": [
+      "<Table>\r\n            <TableCaption>A list of your recent invoices.</TableCaption>\r\n            <TableHeader>\r\n                <TableRow>\r\n                    <TableHead className=\"w-[100px]\">Invoice</TableHead>\r\n                    <TableHead>Status</TableHead>\r\n                    <TableHead>Method</TableHead>\r\n                    <TableHead className=\"text-right\">Amount</TableHead>\r\n                </TableRow>\r\n            </TableHeader>\r\n            <TableBody>\r\n                <TableRow>\r\n                    <TableCell className=\"font-medium\">INV001</TableCell>\r\n                    <TableCell>Paid</TableCell>\r\n                    <TableCell>Credit Card</TableCell>\r\n                    <TableCell className=\"text-right\">$250.00</TableCell>\r\n                </TableRow>\r\n            </TableBody>\r\n        </Table>"
+    ],
+    "description": "",
+    "scope": "jsx / tsx"
+  },
+  "tabs": {
+    "prefix": "tabs",
+    "body": [
+      "<Tabs defaultValue=\"account\">\r\n            <TabsList>\r\n                <TabsTrigger value=\"account\">Account</TabsTrigger>\r\n                <TabsTrigger value=\"password\">Password</TabsTrigger>\r\n            </TabsList>\r\n            <TabsContent value=\"account\">\r\n                <Card>\r\n                    <CardHeader>\r\n                        <CardTitle>Account</CardTitle>\r\n                        <CardDescription>\r\n                            Make changes to your account here. Click save when you're done.\r\n                        </CardDescription>\r\n                    </CardHeader>\r\n                    <CardContent className=\"space-y-2\">\r\n                        <div className=\"space-y-1\">\r\n                            <Label htmlFor=\"name\">Name</Label>\r\n                            <Input id=\"name\" defaultValue=\"Pedro Duarte\" />\r\n                        </div>\r\n                    </CardContent>\r\n                    <CardFooter>\r\n                        <Button>Save changes</Button>\r\n                    </CardFooter>\r\n                </Card>\r\n            </TabsContent>\r\n            <TabsContent value=\"password\">\r\n                <Card>\r\n                    <CardHeader>\r\n                        <CardTitle>Password</CardTitle>\r\n                        <CardDescription>\r\n                            Change your password here. After saving, you'll be logged out.\r\n                        </CardDescription>\r\n                    </CardHeader>\r\n                    <CardContent className=\"space-y-2\">\r\n                        <div className=\"space-y-1\">\r\n                            <Label htmlFor=\"current\">Current password</Label>\r\n                            <Input id=\"current\" type=\"password\" />\r\n                        </div>\r\n                    </CardContent>\r\n                    <CardFooter>\r\n                        <Button>Save password</Button>\r\n                    </CardFooter>\r\n                </Card>\r\n            </TabsContent>\r\n        </Tabs>"
+    ],
+    "description": "",
+    "scope": "jsx / tsx"
+  },
+  "alert": {
+    "prefix": "alert",
+    "body": [
+      "<Alert>\r\n            <AlertCircle className=\"h-4 w-4\" />\r\n            <AlertTitle>Heads up!</AlertTitle>\r\n            <AlertDescription>\r\n                You can add components to your app using the cli.\r\n            </AlertDescription>\r\n        </Alert>"
+    ],
+    "description": "",
+    "scope": "jsx / tsx"
+  },
+  "badge": {
+    "prefix": "badge",
+    "body": [
+      "<Badge variant=\"default\">Badge</Badge>"
+    ],
+    "description": "",
+    "scope": "jsx / tsx"
+  },
+  "checkbox": {
+    "prefix": "checkbox",
+    "body": [
+      "<div className=\"flex items-center space-x-2\">\r\n            <Checkbox name=\"inPerson\" checked={selectedMethod === \"inPerson\"} onCheckedChange={() => handleCheckboxChange(\"inPerson\")} />\r\n            <Label>In Person</Label>\r\n        </div>"
+    ],
+    "description": "",
+    "scope": "jsx / tsx"
+  },
+  "textarea": {
+    "prefix": "textarea",
+    "body": [
+      "<div className=\"grid w-full gap-1.5\">\r\n            <Label htmlFor=\"message\">Your message</Label>\r\n            <Textarea placeholder=\"Type your message here.\" id=\"message\" />\r\n        </div>"
+    ],
+    "description": "",
+    "scope": "jsx / tsx"
+  },
+  "toast": {
+    "prefix": "toast",
+    "body": [
+      "toast.success('A Sonner toast', {\r\n          className: 'my-classname',\r\n          description: 'With a description and an icon',\r\n          duration: 5000,\r\n          icon: <MyIcon />,\r\n          action: {\r\n            label: 'Action',\r\n            onClick: () => console.log('Action!'),\r\n          },\r\n          cancel: {\r\n            label: 'Cancel',\r\n            onClick: () => console.log('Cancel!'),\r\n          },\r\n        });\r\n         toast.loading('Loading…');"
+    ],
+    "description": "",
+    "scope": "jsx / tsx"
+  },
+  "sheet": {
+    "prefix": "sheet",
+    "body": [
+      "<Sheet>\r\n            <SheetTrigger asChild>\r\n                <Button variant=\"outline\">Open Sheet</Button>\r\n            </SheetTrigger>\r\n            <SheetContent>\r\n                <SheetHeader>\r\n                    <SheetTitle>Edit profile</SheetTitle>\r\n                    <SheetDescription>\r\n                        Make changes to your profile here. Click save when you're done.\r\n                    </SheetDescription>\r\n                </SheetHeader>\r\n                <div className=\"grid gap-4 py-4\">\r\n                    <div className=\"grid grid-cols-4 items-center gap-4\">\r\n                        <Label htmlFor=\"name\" className=\"text-right\">\r\n                            Name\r\n                        </Label>\r\n                        <Input id=\"name\" value=\"Pedro Duarte\" className=\"col-span-3\" />\r\n                    </div>\r\n                </div>\r\n                <SheetFooter>\r\n                    <SheetClose asChild>\r\n                        <Button type=\"submit\">Save changes</Button>\r\n                    </SheetClose>\r\n                </SheetFooter>\r\n            </SheetContent>\r\n        </Sheet>"
+    ],
+    "description": "",
+    "scope": "jsx / tsx"
+  },
+  "accordian": {
+    "prefix": "accordian",
+    "body": [
+      "<Accordion type=\"single\" collapsible className=\"w-full\">\r\n                <AccordionItem value=\"item-1\">\r\n                    <AccordionTrigger>Is it accessible?</AccordionTrigger>\r\n                    <AccordionContent>\r\n                        Yes. It adheres to the WAI-ARIA design pattern.\r\n                    </AccordionContent>\r\n                </AccordionItem>\r\n                <AccordionItem value=\"item-2\">\r\n                    <AccordionTrigger>Is it styled?</AccordionTrigger>\r\n                    <AccordionContent>\r\n                        Yes. It comes with default styles that matches the other components&apos; aesthetic.\r\n                    </AccordionContent>\r\n                </AccordionItem>\r\n            </Accordion>"
+    ],
+    "description": "",
+    "scope": "jsx / tsx"
+  },
+  "basic_command": {
+    "prefix": "basic_command",
+    "body": [
+      "<Command>\r\n                <CommandInput placeholder=\"Type a command or search...\" />\r\n                <CommandList>\r\n                    <CommandEmpty>No results found.</CommandEmpty>\r\n                    <CommandGroup heading=\"Suggestions\">\r\n                        <CommandItem>\r\n                            <Search className=\"mr-2 h-4 w-4\" />\r\n                            <span>Search</span>\r\n                        </CommandItem>\r\n                        <CommandItem>\r\n                            <Settings className=\"mr-2 h-4 w-4\" />\r\n                            <span>Settings</span>\r\n                        </CommandItem>\r\n                    </CommandGroup>\r\n                </CommandList>\r\n            </Command>"
+    ],
+    "description": "",
+    "scope": "jsx / tsx"
+  },
+  "combobox": {
+    "prefix": "combobox",
+    "body": [
+      "const [open, setOpen] = React.useState(false)\r\n  const [value, setValue] = React.useState(\"\")\r\n  \r\n  <Popover>\r\n                <PopoverTrigger asChild>\r\n                    <Button\r\n                        variant=\"outline\"\r\n                        role=\"combobox\"\r\n                        className=\"w-[200px] justify-between\"\r\n                    >\r\n                        Select framework...\r\n                        <ChevronsUpDown className=\"ml-2 h-4 w-4 shrink-0 opacity-50\" />\r\n                    </Button>\r\n                </PopoverTrigger>\r\n                <PopoverContent className=\"w-[200px] p-0\">\r\n                    <Command>\r\n                        <CommandInput placeholder=\"Search framework...\" />\r\n                        <CommandEmpty>No framework found.</CommandEmpty>\r\n                        <CommandGroup>\r\n                            <CommandItem>\r\n                                <Check className=\"mr-2 h-4 w-4\" />\r\n                                Next.js\r\n                            </CommandItem>\r\n                            <CommandItem>\r\n                                <Check className=\"mr-2 h-4 w-4\" />\r\n                                SvelteKit\r\n                            </CommandItem>\r\n                        </CommandGroup>\r\n                    </Command>\r\n                </PopoverContent>\r\n            </Popover>"
+    ],
+    "description": "",
+    "scope": "jsx / tsx"
+  },
+  "bar_chart": {
+    "prefix": "bar_chart",
+    "body": [
+      "import { TrendingUp } from \"lucide-react\"\r\nimport { Bar, BarChart, CartesianGrid, XAxis } from \"recharts\"\r\nimport {  Card,  CardContent,  CardDescription,  CardFooter,  CardHeader,  CardTitle,} from \"~/components/ui/card\"\r\nimport {  ChartConfig,  ChartContainer,  ChartTooltip,  ChartTooltipContent,} from \"~/components/ui/chart\"\r\n\r\nexport const description = \"A bar chart\"\r\n\r\nconst chartData = [\r\n  { month: \"January\", desktop: 186 },\r\n  { month: \"February\", desktop: 305 },\r\n  { month: \"March\", desktop: 237 },\r\n  { month: \"April\", desktop: 73 },\r\n  { month: \"May\", desktop: 209 },\r\n  { month: \"June\", desktop: 214 },\r\n]\r\n\r\nconst chartConfig = {\r\n  desktop: {\r\n    label: \"Desktop\",\r\n    color: \"var(--chart-1)\",\r\n  },\r\n} satisfies ChartConfig\r\n\r\nexport function ChartBarDefault() {\r\n  return (\r\n    <Card>\r\n      <CardHeader>\r\n        <CardTitle>Bar Chart</CardTitle>\r\n        <CardDescription>January - June 2024</CardDescription>\r\n      </CardHeader>\r\n      <CardContent>\r\n        <ChartContainer config={chartConfig}>\r\n          <BarChart accessibilityLayer data={chartData}>\r\n            <CartesianGrid vertical={false} />\r\n            <XAxis\r\n              dataKey=\"month\"\r\n              tickLine={false}\r\n              tickMargin={10}\r\n              axisLine={false}\r\n              tickFormatter={(value) => value.slice(0, 3)}\r\n            />\r\n            <ChartTooltip\r\n              cursor={false}\r\n              content={<ChartTooltipContent hideLabel />}\r\n            />\r\n            <Bar dataKey=\"desktop\" fill=\"var(--color-desktop)\" radius={8} />\r\n          </BarChart>\r\n        </ChartContainer>\r\n      </CardContent>\r\n      <CardFooter className=\"flex-col items-start gap-2 text-sm\">\r\n        <div className=\"flex gap-2 leading-none font-medium\">\r\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\r\n        </div>\r\n        <div className=\"text-muted-foreground leading-none\">\r\n          Showing total visitors for the last 6 months\r\n        </div>\r\n      </CardFooter>\r\n    </Card>\r\n  )\r\n}"
+    ],
+    "description": "",
+    "scope": "jsx / tsx"
+  },
+  "drawer": {
+    "prefix": "drawer",
+    "body": [
+      "<Drawer>\r\n    <DrawerTrigger asChild>\r\n        <Button variant=\"outline\">Open Drawer</Button>\r\n    </DrawerTrigger>\r\n    <DrawerContent>\r\n        <div className=\"mx-auto w-full max-w-sm\">\r\n            <DrawerHeader>\r\n                <DrawerTitle>Are you absolutely sure?</DrawerTitle>\r\n                <DrawerDescription>This action cannot be undone.</DrawerDescription>\r\n            </DrawerHeader>\r\n            <DrawerFooter>\r\n                <Button>Submit</Button>\r\n                <DrawerClose asChild>\r\n                    <Button variant=\"outline\">Cancel</Button>\r\n                </DrawerClose>\r\n            </DrawerFooter>\r\n        </div>\r\n    </DrawerContent>\r\n</Drawer>"
+    ],
+    "description": "",
+    "scope": "jsx / tsx"
+  },
+  "dropdown": {
+    "prefix": "dropdown",
+    "body": [
+      "<DropdownMenu>\r\n    <DropdownMenuTrigger asChild>\r\n        <Button variant=\"outline\">Open</Button>\r\n    </DropdownMenuTrigger>\r\n    <DropdownMenuContent className=\"w-56\">\r\n        <DropdownMenuLabel>My Account</DropdownMenuLabel>\r\n        <DropdownMenuSeparator />\r\n        <DropdownMenuGroup>\r\n            <DropdownMenuItem>\r\n                <User className=\"mr-2 h-4 w-4\" />\r\n                <span>Profile</span>\r\n            </DropdownMenuItem>\r\n            <DropdownMenuItem>\r\n                <Settings className=\"mr-2 h-4 w-4\" />\r\n                <span>Settings</span>\r\n            </DropdownMenuItem>\r\n        </DropdownMenuGroup>\r\n    </DropdownMenuContent>\r\n</DropdownMenu>"
+    ],
+    "description": "",
+    "scope": "jsx / tsx"
+  },
+  "hovercard": {
+    "prefix": "hovercard",
+    "body": [
+      "<HoverCard>\r\n    <HoverCardTrigger asChild>\r\n        <Button variant=\"link\">@nextjs</Button>\r\n    </HoverCardTrigger>\r\n    <HoverCardContent className=\"w-80\">\r\n        <div className=\"flex justify-between space-x-4\">\r\n            <div className=\"space-y-1\">\r\n                <h4 className=\"text-sm font-semibold\">@nextjs</h4>\r\n                <p className=\"text-sm\">\r\n                    The React Framework – created and maintained by @vercel.\r\n                </p>\r\n            </div>\r\n        </div>\r\n    </HoverCardContent>\r\n</HoverCard>"
+    ],
+    "description": "",
+    "scope": "jsx / tsx"
+  },
+  "input_otp": {
+    "prefix": "input_otp",
+    "body": [
+      "<InputOTP maxLength={6}>\r\n    <InputOTPGroup>\r\n        <InputOTPSlot index={0} />\r\n        <InputOTPSlot index={1} />\r\n        <InputOTPSlot index={2} />\r\n    </InputOTPGroup>\r\n    <InputOTPSeparator />\r\n    <InputOTPGroup>\r\n        <InputOTPSlot index={3} />\r\n        <InputOTPSlot index={4} />\r\n        <InputOTPSlot index={5} />\r\n    </InputOTPGroup>\r\n</InputOTP>"
+    ],
+    "description": "",
+    "scope": "jsx / tsx"
+  },
+  "menubar": {
+    "prefix": "menubar",
+    "body": [
+      "<Menubar>\r\n    <MenubarMenu>\r\n        <MenubarTrigger>File</MenubarTrigger>\r\n        <MenubarContent>\r\n            <MenubarItem>\r\n                New Tab <MenubarShortcut>⌘T</MenubarShortcut>\r\n            </MenubarItem>\r\n            <MenubarItem>New Window</MenubarItem>\r\n            <MenubarSeparator />\r\n            <MenubarItem>Share</MenubarItem>\r\n        </MenubarContent>\r\n    </MenubarMenu>\r\n    <MenubarMenu>\r\n        <MenubarTrigger>Edit</MenubarTrigger>\r\n        <MenubarContent>\r\n            <MenubarItem>Undo</MenubarItem>\r\n            <MenubarItem>Redo</MenubarItem>\r\n        </MenubarContent>\r\n    </MenubarMenu>\r\n</Menubar>"
+    ],
+    "description": "",
+    "scope": "jsx / tsx"
+  },
+  "popover": {
+    "prefix": "popover",
+    "body": [
+      "<Popover>\r\n    <PopoverTrigger asChild>\r\n        <Button variant=\"outline\">Open popover</Button>\r\n    </PopoverTrigger>\r\n    <PopoverContent className=\"w-80\">\r\n        <div className=\"grid gap-4\">\r\n            <div className=\"space-y-2\">\r\n                <h4 className=\"font-medium leading-none\">Dimensions</h4>\r\n                <p className=\"text-sm text-muted-foreground\">\r\n                    Set the dimensions for the layer.\r\n                </p>\r\n            </div>\r\n        </div>\r\n    </PopoverContent>\r\n</Popover>"
+    ],
+    "description": "",
+    "scope": "jsx / tsx"
+  },
+  "tooltip": {
+    "prefix": "tooltip",
+    "body": [
+      "<TooltipProvider>\r\n    <Tooltip>\r\n        <TooltipTrigger asChild>\r\n            <Button variant=\"outline\">Hover</Button>\r\n        </TooltipTrigger>\r\n        <TooltipContent>\r\n            <p>Add to library</p>\r\n        </TooltipContent>\r\n    </Tooltip>\r\n</TooltipProvider>"
+    ],
+    "description": "",
+    "scope": "jsx / tsx"
+  },
+  "toggle_group": {
+    "prefix": "toggle_group",
+    "body": [
+      "<ToggleGroup type=\"multiple\">\r\n    <ToggleGroupItem value=\"bold\">Bold</ToggleGroupItem>\r\n    <ToggleGroupItem value=\"italic\">Italic</ToggleGroupItem>\r\n    <ToggleGroupItem value=\"underline\">Underline</ToggleGroupItem>\r\n</ToggleGroup>"
+    ],
+    "description": "",
+    "scope": "jsx / tsx"
+  },
+  "context_menu": {
+    "prefix": "context_menu",
+    "body": [
+      "<ContextMenu>\r\n    <ContextMenuTrigger className=\"flex h-[150px] w-[300px] items-center justify-center rounded-md border border-dashed text-sm\">\r\n        Right click here\r\n    </ContextMenuTrigger>\r\n    <ContextMenuContent className=\"w-64\">\r\n        <ContextMenuItem inset>\r\n            Back\r\n            <ContextMenuShortcut>⌘[</ContextMenuShortcut>\r\n        </ContextMenuItem>\r\n        <ContextMenuItem inset disabled>\r\n            Forward\r\n            <ContextMenuShortcut>⌘]</ContextMenuShortcut>\r\n        </ContextMenuItem>\r\n        <ContextMenuItem inset>\r\n            Reload\r\n            <ContextMenuShortcut>⌘R</ContextMenuShortcut>\r\n        </ContextMenuItem>\r\n        <ContextMenuSeparator />\r\n        <ContextMenuCheckboxItem checked>\r\n            Show Bookmarks Bar\r\n            <ContextMenuShortcut>⌘⇧B</ContextMenuShortcut>\r\n        </ContextMenuCheckboxItem>\r\n    </ContextMenuContent>\r\n</ContextMenu>"
+    ],
+    "description": "",
+    "scope": "jsx / tsx"
+  },
+  "command_dialog": {
+    "prefix": "command_dialog",
+    "body": [
+      "export function CommandMenu() {\r\n  const [open, setOpen] = useState(false)\r\n\r\n  useEffect(() => {\r\n    const down = (e: KeyboardEvent) => {\r\n      if (e.key === \"k\" && (e.metaKey || e.ctrlKey)) {\r\n        e.preventDefault()\r\n        setOpen((open) => !open)\r\n      }\r\n    }\r\n    document.addEventListener(\"keydown\", down)\r\n    return () => document.removeEventListener(\"keydown\", down)\r\n  }, [])\r\n\r\n  return (\r\n    <CommandDialog open={open} onOpenChange={setOpen}>\r\n      <CommandInput placeholder=\"Type a command or search...\" />\r\n      <CommandList>\r\n        <CommandEmpty>No results found.</CommandEmpty>\r\n        <CommandGroup heading=\"Suggestions\">\r\n          <CommandItem>Calendar</CommandItem>\r\n          <CommandItem>Search Emoji</CommandItem>\r\n          <CommandItem>Calculator</CommandItem>\r\n        </CommandGroup>\r\n      </CommandList>\r\n    </CommandDialog>\r\n  )\r\n}"
+    ],
+    "description": "",
+    "scope": "jsx / tsx"
+  },
+  "route_file": {
+    "prefix": "route_file",
+    "body": [
+      "import { React, useCallback, useEffect, useMemo, useRef, useState } from 'react';\r\n\timport { NavLink, Outlet, useActionData, useFetcher, useLoaderData, useLocation, useNavigate, useNavigation, useParams, useRouteLoaderData, useSearchParams, useSubmit } from '@remix-run/react';\r\n\timport { eP } from '~/utils/ext';\r\n\timport { authSessionStorage } from '~/sessions/session';\r\n\timport { axios } from 'axios';\r\n\timport { ActionArgs, defer, json, redirect, type ActionArgs, type LoaderArgs } from '@remix-run/node';\r\n\timport { prisma } from \"~/libs\";\r\n\timport { CarFront, Link } from 'lucide-react';\r\n\timport { ButtonStyled } from '~/components/ui/button-loading';\r\n\timport { Label } from '~/components/ui/label';\r\n\t\r\n\t\r\n\t\r\n\texport default function Dashboard() {\r\n\t\tconst { user } = useLoaderData()\r\n\t\tconst [isLoading, setIsLoading] = useState(true);\r\n\t\tconst [loadError, setLoadError] = useState(null);\r\n\t\r\n\t\r\n\t\tif (isLoading) {\r\n\t\t\treturn (\r\n\t\t\t\t<div className=\"min-h-screen bg-background flex items-center justify-center\">\r\n\t\t\t\t\t<div className=\"text-center\">\r\n\t\t\t\t\t\t<div className=\"w-12 h-12 border-4 border-blue-500 border-t-transparent rounded-full animate-spin mx-auto mb-4\"></div>\r\n\t\t\t\t\t\t<div className=\"text-lg font-medium text-gray-700\">Loading configuration...</div>\r\n\t\t\t\t\t\t<div className=\"text-sm text-gray-500 mt-2\">Fetching build settings from server</div>\r\n\t\t\t\t\t</div>\r\n\t\t\t\t</div>\r\n\t\t\t);\r\n\t\t}\r\n\t\tif (loadError) {\r\n\t\t\treturn (\r\n\t\t\t\t<div className=\"min-h-screen bg-background flex items-center justify-center\">\r\n\t\t\t\t\t<div className=\"text-center max-w-md\">\r\n\t\t\t\t\t\t<AlertCircle className=\"w-12 h-12 text-red-500 mx-auto mb-4\" />\r\n\t\t\t\t\t\t<div className=\"text-lg font-medium text-foreground mb-2\">Failed to Load Configuration</div>\r\n\t\t\t\t\t\t<div className=\"text-sm text-muted-foreground mb-4\">{loadError}</div>\r\n\t\t\t\t\t\t<Button\r\n\t\t\t\t\t\t\tonClick={() => nav(0)}\r\n\t\t\t\t\t\t\tclassName=\"px-4 py-2 bg-primary hover:bg-primary/20 text-foreground rounded-lg transition-colors\"\r\n\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\tRetry\r\n\t\t\t\t\t\t</Button>\r\n\t\t\t\t\t</div>\r\n\t\t\t\t</div>\r\n\t\t\t);\r\n\t\t}\r\n\t\treturn (\r\n\t\t\t<div className=\"flex flex-col justify-center gap-3\">\r\n\t\r\n\t\t\t</div>\r\n\t\t)\r\n\t}\r\n\t\r\n\texport async function action({ request }: ActionArgs) {\r\n\t\tconst session = await authSessionStorage.getSession(request.headers.get(\"Cookie\"));\r\n\t\tconst email = session.get(\"email\");\r\n\t\tconst user = await eP.user.simple(email)\r\n\t\tif (!user) { return redirect(process.env.LOGIN); }\r\n\t\r\n\t\tconst d = Object.fromEntries(await request.formData());\r\n\t\tconst intent = d.intent\r\n\t\r\n\t\ttry {\r\n\t\t\tif (intent === 'createFunction') {\r\n\t\t\t\tconst result = await prisma.Function.create({\r\n\t\t\t\t\tdata: {\r\n\t\t\t\t\t\t...data\r\n\t\t\t\t\t}\r\n\t\t\t\t});\r\n\t\t\t\treturn json({ success: true, result });\r\n\t\t\t} else if (intent === 'updateFunction') {\r\n\t\t\t\tconst result = await prisma.Function.update({\r\n\t\t\t\t\twhere: { id: String(id) },\r\n\t\t\t\t\tdata\r\n\t\t\t\t});\r\n\t\t\t\treturn json({ success: true, result });\r\n\t\t\t} else if (intent === 'deleteFunction') {\r\n\t\t\t\tconst result = await prisma.Function.delete({\r\n\t\t\t\t\twhere: { id: String(id) },\r\n\t\r\n\t\t\t\t});\r\n\t\t\t\treturn json({ success: true, result });\r\n\t\t\t} else {\r\n\t\t\t\treturn json({ success: false, error: \"Invalid intent\" }, { status: 400 });\r\n\t\t\t}\r\n\t\r\n\t\t} catch (error) {\r\n\t\t\treturn json({\r\n\t\t\t\tsuccess: false,\r\n\t\t\t\terror: error instanceof Error ? error.message : \"Unknown error\"\r\n\t\t\t}, { status: 500 });\r\n\t\t}\r\n\t}\r\n\t\r\n\texport async function loader({ request }: LoaderArgs) {\r\n\t\tconst session = await authSessionStorage.getSession(request.headers.get(\"Cookie\"));\r\n\t\tconst email = session.get(\"email\");\r\n\t\tconst user = await eP.user.all(email)\r\n\t\tif (!user) { return redirect(import.meta.env.VITE_LOGIN); }\r\n\t\r\n\t\treturn json({ user })\r\n\t}\r\n\t\r\n\texport const meta: MetaFunction = () => {\r\n\t\treturn [\r\n\t\t\t{ title: \"Dashboard - Catalyst\" },\r\n\t\t\t{ name: \"description\", content: \"Catalyst software dashboard.\" },\r\n\t\t];\r\n\t}"
+    ],
+    "description": "",
+    "scope": "jsx / tsx"
+  },
+  "loader": {
+    "prefix": "loader",
+    "body": [
+      "import { json, redirect, type LoaderArgs, type ActionArgs } from \"@remix-run/node\";\r\nimport { prisma } from \"~/libs\";\r\nimport { authSessionStorage } from \"~/sessions/auth-session.server\";\r\nimport eP from \"~/utils/ext.server\";\r\nimport axios from \"axios\";\r\n\r\n// LOADER\r\nexport async function loader({ request }: LoaderArgs) {\r\n  const session = await authSessionStorage.getSession(request.headers.get(\"Cookie\"));\r\n  const email = session.get(\"email\");\r\n  const user = await eP.user.simple(email)\r\n  if (!user) { return redirect(process.env.LOGIN); }\r\n\r\n  const url = new URL(request.url);\r\n  const intent = url.searchParams.get(\"intent\");\r\n  const id = url.searchParams.get(\"id\");\r\n\r\n  try {\r\n    if (intent === 'findUnique' && id) {\r\n      const result = await prisma.prisma.findUnique({\r\n        where: { id }\r\n      });\r\n      return json({ success: true, result });\r\n\r\n    } else if (intent === 'findFirst') {\r\n      const params = Object.fromEntries(url.searchParams);\r\n      const result = await prisma.prisma.findFirst({\r\n        where: params\r\n      });\r\n      return json({ success: true, result });\r\n\r\n    } else {\r\n      const result = await prisma.prisma.findMany();\r\n      return json({ success: true, result });\r\n    }\r\n  } catch (error) {\r\n    return json({\r\n      success: false,\r\n      error: error instanceof Error ? error.message : \"Unknown error\"\r\n    }, { status: 500 });\r\n  }\r\n}"
+    ],
+    "description": "",
+    "scope": "jsx / tsx"
+  },
+  "api_route": {
+    "prefix": "api_route",
+    "body": [
+      "import { json, redirect, type LoaderArgs, type ActionArgs } from \"@remix-run/node\";\r\nimport { prisma } from \"~/libs\";\r\nimport { authSessionStorage } from \"~/sessions/auth-session.server\";\r\nimport eP from \"~/utils/ext.server\";\r\nimport axios from \"axios\";\r\n\r\nexport async function loader({ request, params }: LoaderFunction) {\r\n    const session = await authSessionStorage.getSession(request.headers.get(\"Cookie\"));\r\n    const email = session.get(\"email\")\r\n    const user = await eP.user.simple(email)\r\n    if (!user) return redirect(process.env.LOGIN)\r\n    const financeRequest = await prisma.dealRequest.findMany();\r\n    return financeRequest\r\n}\r\n      async function fetchFunctionData() {\r\n    const response = await axios.get('/portal/api/sidebar/workorder');\r\n    if (response.status !== 200) { return { error: \"Failed to fetch data.\" }; }\r\n    //const data = JSON.parse(response.data)\r\n    const data = response.data\r\n    setAppointments(data)\r\n    return null;\r\n  }"
+    ],
+    "description": "",
+    "scope": "jsx / tsx"
+  },
+  "use_effect": {
+    "prefix": "use_effect",
+    "body": [
+      "useEffect(() => {\r\n\r\n}, []);"
+    ],
+    "description": "",
+    "scope": "jsx / tsx"
+  },
+  "mapp": {
+    "prefix": "mapp",
+    "body": [
+      "{categories.map((item, index) => {\r\n    return (\r\n        <SelectItem key={index} value={item.value}>\r\n            {item.name}\r\n        </SelectItem>\r\n    );\r\n})}"
+    ],
+    "description": "",
+    "scope": "jsx / tsx"
+  },
+  "on_submit_function": {
+    "prefix": "on_submit_function",
+    "body": [
+      "const fetcher = useFetcher()\r\nconst formData = new FormData();\r\nformData.append(\"id\", item.id);\r\nformData.append(\"intent\", \"deleteProgress\");\r\nfetcher.submit(formData, { method: \"post\" });"
+    ],
+    "description": "",
+    "scope": "jsx / tsx"
+  },
+  "button_with_on_click_submit": {
+    "prefix": "button_with_on_click_submit",
+    "body": [
+      "<ButtonStyled\r\n    type='submit'\r\n    onClick={() => {\r\n       const formData = new FormData();\r\n       formData.append(\"id\", item.id);\r\n       formData.append(\"intent\", \"deleteProgress\");\r\n       fetcher.submit(formData, { method: \"post\" });\r\n}}>\r\n    Save\r\n</ButtonStyled>"
+    ],
+    "description": "",
+    "scope": "jsx / tsx"
+  },
+  "fetcher_form_with_button_and_inputs": {
+    "prefix": "fetcher_form_with_button_and_inputs",
+    "body": [
+      "const fetcher = useFetcher()\r\n\r\n<fetcher.Form method='post'>\r\n    <div className=\"grid w-full max-w-sm items-center gap-3\">\r\n        <Label>Email</Label>\r\n        <Input value={data} onChange={(e) => { setData(e.currentTarget.value) }} className=\"\" />\r\n    </div>\r\n    <div className=\"grid w-full max-w-sm items-center gap-3\">\r\n        <Label>Email</Label>\r\n        <Textarea name=\"email\" value=\"email\" className=\"\" />\r\n    </div>\r\n    <ButtonStyled value='updateForm'>\r\n        Save\r\n    </ButtonStyled>\r\n</fetcher.Form>"
+    ],
+    "description": "",
+    "scope": "jsx / tsx"
+  },
+  "properly_escape_variables_in_backtick_const_calling": {
+    "prefix": "properly_escape_variables_in_backtick_const_calling",
+    "body": [
+      "routes.push(layout(`./${relativePath}`, children));  \nto properly escape\na '\\' before each '`' \nand before the '$'\nroutes.push(layout(\\`./\\${relativePath}\\`, children));"
+    ],
+    "description": "",
+    "scope": "jsx / tsx"
+  },
+  "get_set_localstorage": {
+    "prefix": "get_set_localstorage",
+    "body": [
+      "const [config, setConfig] = useState(\"cols/left\")\r\n\r\n  useEffect(() => {\r\n    const savedConfig = localStorage.getItem(\"config\")\r\n    if (savedConfig) {\r\n      setConfig(savedConfig)\r\n    }\r\n  }, [])\r\n\r\n  useEffect(() => {\r\n    localStorage.setItem(\"config\", config)\r\n  }, [config])"
+    ],
+    "description": "",
+    "scope": "jsx / tsx"
+  },
+  "title_here_will_be_converted_changing_spaces_to___unless_you_toggle_it_off_it_also_copies_your_title_into_your_prefix": {
+    "prefix": "title_here_will_be_converted_changing_spaces_to___unless_you_toggle_it_off_it_also_copies_your_title_into_your_prefix",
+    "body": [
+      "```javascript\nimport { Button } from 'my-library'\n\nfunction App() {\n  return <Button>Click me</Button>\n}\n```\n\nwhatever you have in your clipboard will be pasted on page load"
+    ],
+    "description": "",
+    "scope": "jsx / tsx"
+  },
+  "snippet_title": {
+    "prefix": "snippet_title",
+    "body": [
+      "on page load it takes anything you have in your clipboard and pastes it\n\nthe title unless switch off at the top will convert the title spaces into _ and copy the title to the prefix so you dont waste as much time creating snippets, you can also select a folder to save it straight to the devstack nav"
+    ],
+    "description": "",
+    "scope": "jsx / tsx"
+  },
+  "test_title": {
+    "prefix": "test_title",
+    "body": [
+      "const saveThemeToVsCodeGlobally = async () => {\r\n        const themeJson = JSON.stringify(vsCodeTheme, null, 2);\r\n        await axios.post(DEVSTACK_URL + `/api/theme/config/save/global`, {\r\n            data: themeJson\r\n        });\r\n        toast.success('Saving theme to global settings!')\r\n        setWhichCopied('SaveVSCodeGlobally')\r\n        setTimeout(() => setWhichCopied(null), 2000);\r\n        return themeJson;\r\n    };\r\n    const copyThemeToVsCode = () => {\r\n        const themeJson = JSON.stringify(vsCodeTheme, null, 2);\r\n        navigator.clipboard.writeText(themeJson);\r\n        toast.success('Copied VSCode theme!')\r\n        setWhichCopied('CopyVSCode')\r\n        setTimeout(() => setWhichCopied(null), 2000);\r\n        return themeJson;\r\n    };\r\n\r\n    const copyThemeCSS = () => {\r\n        if (selectedTheme) {\r\n            setCopiedText(selectedTheme.fullCSS);\r\n            toast.success('Copied tailwind css theme!')\r\n            setWhichCopied('CopyCSS')\r\n            setTimeout(() => setWhichCopied(null), 2000);\r\n        }\r\n    };"
+    ],
+    "description": "",
+    "scope": "jsx / tsx"
+  }
+}