betterstart-cli 0.0.28 → 0.0.30

package/dist/assets/adapters/next/integrations/mailchimp/actions/mailchimp.ts

@@ -9,7 +9,6 @@ if (process.env.BETTERSTART_MAILCHIMP_API_KEY && process.env.BETTERSTART_MAILCHI
 
 /**
  * Add an email address to the Mailchimp audience (fire-and-forget, non-blocking)
- * Follows the same pattern as sendWebhook() in utils/webhook/webhook.ts
  */
 export function addToMailchimpAudience(email: string): void {
   if (

package/dist/assets/adapters/next/plugins/blog/schemas/menus.json

@@ -22,7 +22,7 @@
           "name": "slug",
           "type": "string",
           "label": "Slug",
-          "hint": "URL-friendly identifier (auto-generated from title)"
+          "hint": "URL-friendly identifier"
         },
         {
           "name": "items",

package/dist/assets/adapters/next/plugins/blog/schemas/posts.json

@@ -22,7 +22,7 @@
           "name": "slug",
           "type": "string",
           "label": "Slug",
-          "hint": "URL-friendly identifier (auto-generated from title)"
+          "hint": "URL-friendly identifier"
         },
         {
           "name": "excerpt",

package/dist/assets/adapters/next/templates/init/admin-globals.css

@@ -97,7 +97,7 @@
   --accent-foreground: oklch(0.15 0 0);
   --destructive: oklch(0.577 0.245 27.325);
   --warning: oklch(0.625 0.165 57.4);
-  --border: oklch(0.94 0 0);
+  --border: oklch(0.93 0 0);
   --highlight: oklch(0.9 0.004 286.32);
   --input: oklch(0.994 0 0);
   --ring: oklch(0.708 0 0);

package/dist/assets/adapters/next/templates/init/components/layouts/admin-nav-link.tsx

@@ -4,10 +4,20 @@ import { SidebarMenuButton } from '@admin/components/ui/sidebar'
 import Link from 'next/link'
 import { usePathname } from 'next/navigation'
 
-export function AdminNavLink({ href, children }: { href: string; children: React.ReactNode }) {
+export function AdminNavLink({
+  href,
+  exact = false,
+  children
+}: {
+  href: string
+  exact?: boolean
+  children: React.ReactNode
+}) {
   const pathname = usePathname()
   const isActive =
-    href === '/admin' ? pathname === '/admin' : pathname === href || pathname.startsWith(`${href}/`)
+    exact || href === '/admin'
+      ? pathname === href
+      : pathname === href || pathname.startsWith(`${href}/`)
 
   return (
     <SidebarMenuButton asChild>

package/dist/assets/adapters/next/templates/init/components/layouts/admin-settings-sidebar.tsx

@@ -0,0 +1,75 @@
+'use client'
+
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarMenu,
+  SidebarMenuItem
+} from '@admin/components/ui/sidebar'
+import { SidebarNavLink } from './admin-sidebar-nav-link'
+
+const settingsNav = [
+  {
+    label: 'Global',
+    items: [
+      { label: 'General', href: '/admin/settings', exact: true },
+      { label: 'Audit logs', href: '/admin/settings/audit-log', exact: true }
+    ]
+  },
+  {
+    label: 'Forms',
+    items: [
+      {
+        label: 'Forms',
+        href: '/admin/settings/forms',
+        exact: true
+      }
+    ]
+  },
+  {
+    label: 'Webhooks',
+    items: [
+      {
+        label: 'Webhook endpoints',
+        href: '/admin/settings/webhooks',
+        exact: true
+      },
+      {
+        label: 'Webhook logs',
+        href: '/admin/settings/webhooks/logs',
+        exact: true
+      }
+    ]
+  }
+]
+
+export function AdminSettingsSidebar() {
+  return (
+    <Sidebar
+      collapsible="none"
+      className="h-full w-(--sidebar-width) shrink-0 border-r border-border/80 pt-14"
+    >
+      <SidebarContent className="gap-0 py-2">
+        {settingsNav.map((item) => (
+          <SidebarGroup key={item.label} className="gap-1.5">
+            <SidebarGroupLabel>{item.label}</SidebarGroupLabel>
+            <SidebarGroupContent>
+              <SidebarMenu className="gap-px">
+                {item.items.map((item) => (
+                  <SidebarMenuItem key={item.href}>
+                    <SidebarNavLink href={item.href} exact={item.exact}>
+                      <span>{item.label}</span>
+                    </SidebarNavLink>
+                  </SidebarMenuItem>
+                ))}
+              </SidebarMenu>
+            </SidebarGroupContent>
+          </SidebarGroup>
+        ))}
+      </SidebarContent>
+    </Sidebar>
+  )
+}

package/dist/assets/adapters/next/templates/init/components/layouts/admin-sidebar-nav-link.tsx

@@ -3,10 +3,20 @@ import { Suspense } from 'react'
 import { AdminNavLink } from './admin-nav-link'
 import { SidebarNavLinkSkeleton } from './admin-sidebar-nav-link-skeleton'
 
-export function SidebarNavLink({ href, children }: { href: string; children: ReactNode }) {
+export function SidebarNavLink({
+  href,
+  exact,
+  children
+}: {
+  href: string
+  exact?: boolean
+  children: ReactNode
+}) {
   return (
     <Suspense fallback={<SidebarNavLinkSkeleton href={href}>{children}</SidebarNavLinkSkeleton>}>
-      <AdminNavLink href={href}>{children}</AdminNavLink>
+      <AdminNavLink href={href} exact={exact}>
+        {children}
+      </AdminNavLink>
     </Suspense>
   )
 }

package/dist/assets/adapters/next/templates/init/components/layouts/admin-sidebar.tsx

@@ -11,7 +11,7 @@ import {
 } from '@admin/components/ui/sidebar'
 import { adminNavigation } from '@admin/data/navigation'
 import { groupAdminNavigationItems } from '@admin/utils/navigation/sidebar'
-import { History, Settings, Users } from 'lucide-react'
+import { Settings, Users } from 'lucide-react'
 import type { ComponentProps } from 'react'
 import { Fragment, Suspense } from 'react'
 import { SidebarBrandingRsc } from './admin-sidebar-branding-rsc'
@@ -35,7 +35,7 @@ export function AdminSidebar(props: ComponentProps<typeof Sidebar>) {
           <Fragment key={group.label ?? '_ungrouped'}>
             <SidebarGroup className="py-0">
               {group.label && <SidebarGroupLabel>{group.label}</SidebarGroupLabel>}
-              <SidebarMenu className="gap-0.5">
+              <SidebarMenu className="gap-px">
                 {group.items.map((item) => (
                   <SidebarMenuItem key={item.href}>
                     <SidebarNavLink href={item.href}>
@@ -64,12 +64,6 @@ export function AdminSidebar(props: ComponentProps<typeof Sidebar>) {
                 <span>Settings</span>
               </SidebarNavLink>
             </SidebarMenuItem>
-            <SidebarMenuItem>
-              <SidebarNavLink href="/admin/system/audit-log">
-                <History strokeWidth={2} />
-                <span>Audit Log</span>
-              </SidebarNavLink>
-            </SidebarMenuItem>
           </SidebarMenu>
         </SidebarGroup>
       </SidebarContent>

package/dist/assets/adapters/next/templates/init/components/shared/data-table/data-grid.tsx

@@ -5,6 +5,7 @@ import type * as React from 'react'
 
 type DataGridProps = React.ComponentProps<'div'> & {
   containerClassName?: string
+  containerRef?: React.Ref<HTMLDivElement>
   gridTemplateColumns: string
 }
 
@@ -17,12 +18,14 @@ const dataGridCellRole = { role: 'cell' } as const
 function DataGrid({
   className,
   containerClassName,
+  containerRef,
   gridTemplateColumns,
   style,
   ...props
 }: DataGridProps) {
   return (
     <div
+      ref={containerRef}
       data-slot="data-grid-container"
       className={cn('relative min-w-0 overflow-auto', containerClassName)}
     >
@@ -42,7 +45,10 @@ function DataGridHeader({ className, ...props }: React.ComponentProps<'div'>) {
     <div
       {...dataGridRowGroupRole}
       data-slot="data-grid-header"
-      className={cn('contents', className)}
+      className={cn(
+        "relative col-span-full -mb-1 grid grid-cols-subgrid rounded-t-sm bg-muted pb-1 after:pointer-events-none after:absolute after:inset-0 after:rounded-t-sm after:border-x after:border-t after:border-border after:content-['']",
+        className
+      )}
       {...props}
     />
   )
@@ -53,7 +59,10 @@ function DataGridBody({ className, ...props }: React.ComponentProps<'div'>) {
     <div
       {...dataGridRowGroupRole}
       data-slot="data-grid-body"
-      className={cn('contents', className)}
+      className={cn(
+        "relative col-span-full grid grid-cols-subgrid overflow-hidden rounded-sm bg-card shadow-input after:pointer-events-none after:absolute after:inset-0 after:rounded-sm after:border after:border-border after:content-['']",
+        className
+      )}
       {...props}
     />
   )
@@ -65,7 +74,7 @@ function DataGridRow({ className, style, ...props }: React.ComponentProps<'div'>
       {...dataGridRowRole}
       data-slot="data-grid-row"
       className={cn(
-        'grid border-b transition-colors has-aria-expanded:bg-muted/50 data-[state=selected]:bg-muted',
+        'grid border-b transition-colors last:border-b-0 has-aria-expanded:bg-muted/50 data-[state=selected]:bg-muted',
         className
       )}
       style={{ ...style, gridColumn: '1 / -1', gridTemplateColumns: 'subgrid' }}
@@ -81,7 +90,7 @@ function DataGridHead({ className, ...props }: React.ComponentProps<'div'>) {
       {...dataGridColumnHeaderRole}
       data-slot="data-grid-head"
       className={cn(
-        'grid h-10 items-center px-3 text-left font-medium whitespace-nowrap text-foreground [&:has([role=checkbox])]:pr-0',
+        'grid h-9.5 items-center px-3 text-left font-medium whitespace-nowrap text-muted-foreground [&:has([role=checkbox])]:pr-0 *:h-full',
         className
       )}
       tabIndex={-1}
@@ -96,7 +105,7 @@ function DataGridCell({ className, ...props }: React.ComponentProps<'div'>) {
       {...dataGridCellRole}
       data-slot="data-grid-cell"
       className={cn(
-        'grid min-h-10 items-center px-3 py-1.5 whitespace-nowrap [&:has([role=checkbox])]:pr-0',
+        'grid min-h-12 items-center px-3 py-1.5 whitespace-nowrap [&:has([role=checkbox])]:pr-0',
         className
       )}
       {...props}

package/dist/assets/adapters/next/templates/init/components/shared/data-table/data-table.tsx

@@ -46,7 +46,7 @@ export function DataTable<TData extends RowData, TValue>({
   isPending = false,
   error = null,
   emptyMessage = 'No results found.',
-  loadingMessage = 'Loading...',
+  loadingMessage = 'Loading…',
   selectedIds,
   onSelectedIdsChange,
   meta,
@@ -115,126 +115,125 @@ export function DataTable<TData extends RowData, TValue>({
 
   return (
     <div className="space-y-6 pb-24">
-      <div ref={tableContainerRef} className="min-w-0 overflow-hidden material-sm border-border">
-        <DataGrid gridTemplateColumns={gridTemplateColumns} style={{ width: table.getTotalSize() }}>
-          <DataGridHeader>
-            {table.getHeaderGroups().map((headerGroup) => (
-              <DataGridRow key={headerGroup.id}>
-                {headerGroup.headers.map((header, headerIndex) => {
-                  const meta = header.column.columnDef.meta as Record<string, unknown> | undefined
-                  const resizeLabel =
-                    typeof header.column.columnDef.header === 'string'
-                      ? header.column.columnDef.header
-                      : header.column.id
-                  const nextHeader = headerGroup.headers[headerIndex + 1]
-                  const canResizeColumn =
-                    header.column.getCanResize() && nextHeader?.column.getCanResize() === true
-                  return (
-                    <DataGridHead
-                      key={header.id}
-                      className={cn(
-                        'group/resize-header relative overflow-hidden text-foreground',
-                        {
-                          'text-center': meta?.align === 'center',
-                          'text-right': meta?.align === 'right'
+      <DataGrid
+        containerRef={tableContainerRef}
+        gridTemplateColumns={gridTemplateColumns}
+        style={{ width: table.getTotalSize() }}
+      >
+        <DataGridHeader>
+          {table.getHeaderGroups().map((headerGroup) => (
+            <DataGridRow key={headerGroup.id}>
+              {headerGroup.headers.map((header, headerIndex) => {
+                const meta = header.column.columnDef.meta as Record<string, unknown> | undefined
+                const resizeLabel =
+                  typeof header.column.columnDef.header === 'string'
+                    ? header.column.columnDef.header
+                    : header.column.id
+                const nextHeader = headerGroup.headers[headerIndex + 1]
+                const canResizeColumn =
+                  header.column.getCanResize() && nextHeader?.column.getCanResize() === true
+                return (
+                  <DataGridHead
+                    key={header.id}
+                    className={cn('group/resize-header relative overflow-hidden', {
+                      'text-center': meta?.align === 'center',
+                      'text-right': meta?.align === 'right'
+                    })}
+                    data-column-id={header.column.id}
+                    onMouseEnter={() => setHoveredColumnId(header.column.id)}
+                    onMouseLeave={() =>
+                      setHoveredColumnId((current) =>
+                        current === header.column.id ? null : current
+                      )
+                    }
+                  >
+                    {header.isPlaceholder
+                      ? null
+                      : flexRender(header.column.columnDef.header, header.getContext())}
+                    {canResizeColumn ? (
+                      <button
+                        type="button"
+                        aria-label={`Resize ${resizeLabel} column`}
+                        className="group/resize-handle absolute right-0 top-0 z-10 flex h-full w-5 cursor-col-resize touch-none select-none items-center justify-center text-foreground opacity-0 transition-opacity focus-visible:opacity-100 focus-visible:outline-none group-focus-within/resize-header:opacity-100 data-[column-hovered=true]:opacity-100 data-[resizing=true]:opacity-100"
+                        data-resize-handle
+                        data-column-hovered={
+                          hoveredColumnId === header.column.id ? 'true' : 'false'
                         }
-                      )}
-                      data-column-id={header.column.id}
-                      onMouseEnter={() => setHoveredColumnId(header.column.id)}
+                        data-resizing={header.column.getIsResizing() ? 'true' : 'false'}
+                        onDoubleClick={resetColumnSizingToContainer}
+                        onMouseDown={header.getResizeHandler()}
+                        onTouchStart={header.getResizeHandler()}
+                      >
+                        <GripVertical aria-hidden="true" className="size-3.5 text-foreground" />
+                      </button>
+                    ) : null}
+                  </DataGridHead>
+                )
+              })}
+            </DataGridRow>
+          ))}
+        </DataGridHeader>
+        <DataGridBody>
+          {isPending ? (
+            <DataGridRow>
+              <DataGridCell
+                className="flex h-24 items-center justify-center text-center"
+                style={{ gridColumn: '1 / -1' }}
+              >
+                <div className="text-muted-foreground">{loadingMessage}</div>
+              </DataGridCell>
+            </DataGridRow>
+          ) : error ? (
+            <DataGridRow>
+              <DataGridCell
+                className="flex h-24 items-center justify-center text-center"
+                style={{ gridColumn: '1 / -1' }}
+              >
+                <div className="text-destructive">Error: {error.message}</div>
+              </DataGridCell>
+            </DataGridRow>
+          ) : table.getRowModel().rows?.length ? (
+            table.getRowModel().rows.map((row) => (
+              <DataGridRow
+                key={row.id}
+                className="hover:bg-muted/50"
+                data-state={row.getIsSelected() ? 'selected' : undefined}
+              >
+                {row.getVisibleCells().map((cell) => {
+                  const meta = cell.column.columnDef.meta as Record<string, unknown> | undefined
+                  return (
+                    <DataGridCell
+                      key={cell.id}
+                      className={cn({
+                        'text-center': meta?.align === 'center',
+                        'text-right': meta?.align === 'right'
+                      })}
+                      data-column-id={cell.column.id}
+                      onMouseEnter={() => setHoveredColumnId(cell.column.id)}
                       onMouseLeave={() =>
                         setHoveredColumnId((current) =>
-                          current === header.column.id ? null : current
+                          current === cell.column.id ? null : current
                         )
                       }
                     >
-                      {header.isPlaceholder
-                        ? null
-                        : flexRender(header.column.columnDef.header, header.getContext())}
-                      {canResizeColumn ? (
-                        <button
-                          type="button"
-                          aria-label={`Resize ${resizeLabel} column`}
-                          className="group/resize-handle absolute right-0 top-0 z-10 flex h-full w-5 cursor-col-resize touch-none select-none items-center justify-center text-foreground opacity-0 transition-opacity focus-visible:opacity-100 focus-visible:outline-none group-focus-within/resize-header:opacity-100 data-[column-hovered=true]:opacity-100 data-[resizing=true]:opacity-100"
-                          data-resize-handle
-                          data-column-hovered={
-                            hoveredColumnId === header.column.id ? 'true' : 'false'
-                          }
-                          data-resizing={header.column.getIsResizing() ? 'true' : 'false'}
-                          onDoubleClick={resetColumnSizingToContainer}
-                          onMouseDown={header.getResizeHandler()}
-                          onTouchStart={header.getResizeHandler()}
-                        >
-                          <GripVertical aria-hidden="true" className="size-3.5 text-foreground" />
-                        </button>
-                      ) : null}
-                    </DataGridHead>
+                      {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                    </DataGridCell>
                   )
                 })}
               </DataGridRow>
-            ))}
-          </DataGridHeader>
-          <DataGridBody>
-            {isPending ? (
-              <DataGridRow>
-                <DataGridCell
-                  className="flex h-24 items-center justify-center text-center"
-                  style={{ gridColumn: '1 / -1' }}
-                >
-                  <div className="text-muted-foreground">{loadingMessage}</div>
-                </DataGridCell>
-              </DataGridRow>
-            ) : error ? (
-              <DataGridRow>
-                <DataGridCell
-                  className="flex h-24 items-center justify-center text-center"
-                  style={{ gridColumn: '1 / -1' }}
-                >
-                  <div className="text-destructive">Error: {error.message}</div>
-                </DataGridCell>
-              </DataGridRow>
-            ) : table.getRowModel().rows?.length ? (
-              table.getRowModel().rows.map((row) => (
-                <DataGridRow
-                  key={row.id}
-                  className="hover:bg-muted/50"
-                  data-state={row.getIsSelected() ? 'selected' : undefined}
-                >
-                  {row.getVisibleCells().map((cell) => {
-                    const meta = cell.column.columnDef.meta as Record<string, unknown> | undefined
-                    return (
-                      <DataGridCell
-                        key={cell.id}
-                        className={cn({
-                          'text-center': meta?.align === 'center',
-                          'text-right': meta?.align === 'right'
-                        })}
-                        data-column-id={cell.column.id}
-                        onMouseEnter={() => setHoveredColumnId(cell.column.id)}
-                        onMouseLeave={() =>
-                          setHoveredColumnId((current) =>
-                            current === cell.column.id ? null : current
-                          )
-                        }
-                      >
-                        {flexRender(cell.column.columnDef.cell, cell.getContext())}
-                      </DataGridCell>
-                    )
-                  })}
-                </DataGridRow>
-              ))
-            ) : (
-              <DataGridRow>
-                <DataGridCell
-                  className="flex h-24 items-center justify-center text-center"
-                  style={{ gridColumn: '1 / -1' }}
-                >
-                  {emptyMessage}
-                </DataGridCell>
-              </DataGridRow>
-            )}
-          </DataGridBody>
-        </DataGrid>
-      </div>
+            ))
+          ) : (
+            <DataGridRow>
+              <DataGridCell
+                className="flex h-24 items-center justify-center text-center"
+                style={{ gridColumn: '1 / -1' }}
+              >
+                {emptyMessage}
+              </DataGridCell>
+            </DataGridRow>
+          )}
+        </DataGridBody>
+      </DataGrid>
 
       <DataTablePagination
         table={table}

package/dist/assets/adapters/next/templates/init/components/shared/dev-mode/dev-mode-types.ts

@@ -23,6 +23,10 @@ export type DevModeLifecycleHookEvent =
   | 'afterPublish'
   | 'beforeUnpublish'
   | 'afterUnpublish'
+  | 'beforeRestore'
+  | 'afterRestore'
+  | 'beforeReorder'
+  | 'afterReorder'
 
 export interface DevModeSnippet {
   id: string

package/dist/assets/adapters/next/templates/init/components/shared/dev-mode-integrate.tsx

@@ -84,7 +84,7 @@ export function DevModeIntegrateButton({
           </Tabs>
         ) : isPending ? (
           <div className="flex min-h-80 items-center justify-center px-6 text-sm text-muted-foreground">
-            Loading integration details...
+            Loading integration details…
           </div>
         ) : loadError ? (
           <div

package/dist/assets/adapters/next/templates/init/components/shared/entity-versions/entity-versions-drawer.tsx

@@ -55,7 +55,7 @@ export function EntityVersionsDrawer({
             <EntityVersionsCurrentRow updatedAt={currentUpdatedAt} author={currentAuthor} />
             {isPending ? (
               <p className="rounded-sm border border-dashed border-border px-3 py-6 text-center text-sm text-muted-foreground">
-                Loading versions...
+                Loading versions…
               </p>
             ) : null}
             {!isPending && versions.length === 0 ? (

package/dist/assets/adapters/next/templates/init/components/shared/media/media-url-importer.tsx

@@ -1,5 +1,6 @@
 'use client'
 
+import { Card, CardContent } from '@admin/components/ui/card'
 import {
   InputGroup,
   InputGroupAddon,
@@ -88,52 +89,49 @@ export function MediaUrlImporter({ onImportFromUrl, accept, className }: MediaUr
   }, [isImporting, onImportFromUrl, urlValue])
 
   return (
-    <div
-      className={cn(
-        'flex items-center justify-center transition-colors rounded-sm border bg-input border-border overflow-hidden h-full flex-col p-5 gap-5',
-        className
-      )}
-    >
-      <div className="flex w-full flex-col items-center gap-0.5 text-center">
-        <p className="text-sm font-medium">Import from URL</p>
-        <p className="text-sm text-muted-foreground">{urlHelpText}</p>
-      </div>
-
-      <InputGroup className="bg-background mx-auto max-w-2xl">
-        <InputGroupInput
-          type="url"
-          name="url"
-          aria-label="Media URL"
-          value={urlValue}
-          placeholder={urlPlaceholder}
-          autoComplete="off"
-          spellCheck={false}
-          onChange={(event) => {
-            setUrlValue(event.target.value)
-            if (urlError) setUrlError(null)
-          }}
-          onKeyDown={(event) => {
-            if (event.key === 'Enter') {
-              event.preventDefault()
-              void handleImport()
-            }
-          }}
-          disabled={isImporting}
-        />
-
-        <InputGroupAddon align="inline-end">
-          <InputGroupButton
-            type="button"
-            variant="outline"
-            size="sm"
-            onClick={() => void handleImport()}
-            disabled={isImporting}
-          >
-            {isImporting ? <LoaderCircle className="animate-spin" /> : <Upload />}
-            Import
-          </InputGroupButton>
-        </InputGroupAddon>
-      </InputGroup>
-    </div>
+    <Card className={cn('flex items-center justify-center', className)}>
+      <CardContent className="w-full h-full">
+        <div className="flex w-full flex-col h-full justify-center items-center gap-3 text-center">
+          <InputGroup className="bg-background mx-auto max-w-2xl">
+            <InputGroupInput
+              type="url"
+              name="url"
+              aria-label="Media URL"
+              value={urlValue}
+              placeholder={urlPlaceholder}
+              autoComplete="off"
+              spellCheck={false}
+              onChange={(event) => {
+                setUrlValue(event.target.value)
+                if (urlError) setUrlError(null)
+              }}
+              onKeyDown={(event) => {
+                if (event.key === 'Enter') {
+                  event.preventDefault()
+                  void handleImport()
+                }
+              }}
+              disabled={isImporting}
+            />
+            <InputGroupAddon align="inline-end">
+              <InputGroupButton
+                type="button"
+                variant="outline"
+                onClick={() => void handleImport()}
+                disabled={isImporting}
+                className="h-full px-5"
+              >
+                {isImporting ? <LoaderCircle className="animate-spin" /> : <Upload />}
+                Import
+              </InputGroupButton>
+            </InputGroupAddon>
+          </InputGroup>
+
+          <div className="flex w-full flex-col items-center text-center">
+            <p className="text-sm text-muted-foreground">{urlHelpText}</p>
+          </div>
+        </div>
+      </CardContent>
+    </Card>
   )
 }