feat: BaseCard primitive component created.

src/LoginCard.tsx

@@ -1,5 +1,6 @@
 import { useState } from 'react'
 import { ChipGroup } from './Chip'
+import BaseCard from './shared/primitives/BaseCard'
 // import { ProgressBar } from './shared/primitives/Progressbar'
 
 function LoginCard() {
@@ -11,7 +12,10 @@ function LoginCard() {
 
   return (
     <div className="bg-bg-primary fixed inset-0 flex items-center justify-center">
-      <div className="bg-bg-secondary border-border-primary w-full max-w-sm space-y-6 rounded-lg border p-6 shadow-md">
+      <BaseCard
+        variant="success"
+        className="bg-bg-secondary border-border-primary w-full max-w-sm space-y-6 rounded-lg border p-6 shadow-md"
+      >
         <ChipGroup
           selected={selected}
           onChange={(value) => {
@@ -95,7 +99,7 @@ function LoginCard() {
           </a>
         </p>
         {/* <ProgressBar value={0.5} variant="danger" scoreLabel="AI conf." /> */}
-      </div>
+      </BaseCard>
     </div>
   )
 }

src/layouts/AdminLayout.tsx

@@ -23,131 +23,6 @@ const AdminLayout = () => {
   const [activeItem, setActiveItem] = useState('Queue')
 
   return (
-    //     <div
-    //         className="
-    //     min-h-screen
-    //     bg-bg-primary
-    //     text-text-primary
-    //   "
-    //     >
-    //         <ToastProvider />
-
-    //         {/* Sidebar */}
-    //         <aside
-    //             className={`fixed top-0 left-0 z-30 h-screen transition-all duration-300 ${collapsed ? 'w-18' : 'w-64'
-    //                 } `}
-    //         >
-    //             <SidebarNav
-    //                 collapsed={collapsed}
-    //                 onToggle={() => {
-    //                     setCollapsed(!collapsed)
-    //                 }}
-    //                 items={[
-    //                     {
-    //                         label: 'Queue',
-
-    //                         icon: <QueueListIcon className="size-4" />,
-
-    //                         badge: 3,
-
-    //                         badgeVariant: 'danger',
-
-    //                         isActive: activeItem === 'Queue',
-
-    //                         onClick: () => {
-    //                             setActiveItem('Queue')
-
-    //                             console.log('Queue clicked')
-    //                         },
-    //                     },
-
-    //                     {
-    //                         label: 'Resolved',
-
-    //                         icon: <CheckIcon className="size-4" />,
-
-    //                         badge: 12,
-
-    //                         badgeVariant: 'info',
-
-    //                         isActive: activeItem === 'Resolved',
-
-    //                         onClick: () => {
-    //                             setActiveItem('Resolved')
-
-    //                             console.log('Resolved clicked')
-    //                         },
-    //                     },
-
-    //                     {
-    //                         label: 'Escalated',
-
-    //                         icon: <ExclamationTriangleIcon className="size-4" />,
-
-    //                         badge: 1,
-
-    //                         badgeVariant: 'danger',
-
-    //                         isActive: activeItem === 'Escalated',
-
-    //                         onClick: () => {
-    //                             setActiveItem('Escalated')
-
-    //                             console.log('Escalated clicked')
-    //                         },
-    //                     },
-
-    //                     {
-    //                         label: 'Users',
-
-    //                         icon: <UsersIcon className="size-4" />,
-
-    //                         isActive: activeItem === 'Users',
-
-    //                         onClick: () => {
-    //                             setActiveItem('Users')
-
-    //                             console.log('Users clicked')
-    //                         },
-    //                     },
-
-    //                     {
-    //                         label: 'Analytics',
-
-    //                         icon: <PresentationChartLineIcon className="size-4" />,
-
-    //                         isActive: activeItem === 'Analytics',
-
-    //                         onClick: () => {
-    //                             setActiveItem('Analytics')
-
-    //                             console.log('Analytics clicked')
-    //                         },
-    //                     },
-    //                 ]}
-    //             />
-    //         </aside>
-    //         <main
-    //             className={`flex min-h-screen items-center justify-center transition-all duration-300 ${collapsed ? 'w-[72px]' : 'w-64'
-    //                 } `}
-    //         >
-    //         </main>
-    //         <div
-    //             className={`
-    //       transition-all
-    //       duration-300
-    //       ${collapsed
-    //                     ? 'ml-[72px]'
-    //                     : 'ml-64'
-    //                 }
-    //     `}
-    //         >
-
-    //             <main className="p-6">
-    //                 <Outlet />
-    //             </main>
-    //         </div>
-    //     </div>
     <div className="bg-bg-primary text-text-primary min-h-screen">
       <ToastProvider />
 
@@ -253,7 +128,7 @@ const AdminLayout = () => {
           actionsSlot={<AvatarMenu name="Admin Mod" />}
           searchSlot={
             <input
-              className="w-full bg-transparent text-sm outline-none"
+              className="border-border-secondary w-full rounded-md border-2 bg-transparent px-3 py-2 text-sm outline-none"
               placeholder="Search reports..."
             />
           }

src/shared/composites/Topbar/Topbar.stories.tsx

@@ -46,7 +46,7 @@ export const WithSearch: Story = {
 
         <input
           placeholder="Search reports..."
-          className="w-full bg-transparent text-sm outline-none"
+          className="border-border-secondary w-full border-2 bg-transparent text-sm outline-none"
         />
       </div>
     ),

src/shared/composites/Topbar/Topbar.tsx

@@ -27,7 +27,7 @@ export function Topbar({
 }: TopbarProps) {
   return (
     <header
-      className={`border-border-tertiary bg-bg-secondary sticky top-0 z-20 flex h-16 items-center justify-between border-b px-4 md:px-6 ${className} `}
+      className={`border-border-secondary bg-bg-secondary sticky top-0 z-20 flex h-16 items-center justify-between border-b px-4 md:px-6 ${className} `}
     >
       {/* Left */}
       <div className="flex items-center gap-3 md:min-w-[200px]">

src/shared/primitives/BaseCard/BaseCard.stories.tsx

@@ -0,0 +1,102 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+
+import { BaseCard } from './BaseCard'
+
+const meta = {
+  title: 'Shared/Primitives/BaseCard',
+
+  component: BaseCard,
+
+  tags: ['autodocs'],
+} satisfies Meta<typeof BaseCard>
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {
+    children: 'Default card content',
+  },
+}
+
+export const Danger: Story = {
+  args: {
+    variant: 'danger',
+
+    children: 'Danger card content',
+  },
+}
+
+export const Warning: Story = {
+  args: {
+    variant: 'warning',
+
+    children: 'Warning card content',
+  },
+}
+
+export const Success: Story = {
+  args: {
+    variant: 'success',
+
+    children: 'Success card content',
+  },
+}
+
+export const Info: Story = {
+  args: {
+    variant: 'info',
+
+    children: 'Info card content',
+  },
+}
+
+export const PaddingSmall: Story = {
+  args: {
+    padding: 'sm',
+
+    children: 'Small padding',
+  },
+}
+
+export const PaddingMedium: Story = {
+  args: {
+    padding: 'md',
+
+    children: 'Medium padding',
+  },
+}
+
+export const PaddingLarge: Story = {
+  args: {
+    padding: 'lg',
+
+    children: 'Large padding',
+  },
+}
+
+export const NoPadding: Story = {
+  args: {
+    padding: 'none',
+
+    children: <div className="bg-bg-secondary p-6">Parent controls spacing</div>,
+  },
+}
+
+export const NestedBaseCards: Story = {
+  args: {
+    children: '',
+  },
+  render: () => (
+    <BaseCard padding="lg">
+      <div className="space-y-4">
+        <p>Parent card</p>
+
+        <BaseCard variant="info" padding="sm">
+          Nested card
+        </BaseCard>
+      </div>
+    </BaseCard>
+  ),
+}

src/shared/primitives/BaseCard/BaseCard.tsx

@@ -0,0 +1,97 @@
+import React from 'react'
+
+import { cva, type VariantProps } from 'class-variance-authority'
+
+const baseCardStyles = cva(
+  `
+    w-full
+    rounded-xl
+    border
+    transition-colors
+  `,
+  {
+    variants: {
+      variant: {
+        default: `
+          border-border-secondary
+          bg-bg-primary
+        `,
+
+        danger: `
+          border-border-danger
+          bg-bg-danger
+        `,
+
+        warning: `
+          border-border-warning
+          bg-bg-warning
+        `,
+
+        success: `
+          border-border-success
+          bg-bg-success
+        `,
+
+        info: `
+          border-border-info
+          bg-bg-info
+        `,
+      },
+
+      padding: {
+        none: '',
+
+        sm: 'p-3',
+
+        md: 'p-4',
+
+        lg: 'p-6',
+      },
+    },
+
+    defaultVariants: {
+      variant: 'default',
+
+      padding: 'md',
+    },
+  }
+)
+
+export interface BaseCardProps
+  extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof baseCardStyles> {
+  children: React.ReactNode
+
+  testId?: string
+}
+
+export function BaseCard({
+  children,
+
+  variant,
+
+  padding,
+
+  className = '',
+
+  testId,
+
+  ...props
+}: BaseCardProps) {
+  return (
+    <div
+      data-testid={testId}
+      className={baseCardStyles({
+        variant,
+
+        padding,
+
+        className,
+      })}
+      {...props}
+    >
+      {children}
+    </div>
+  )
+}
+
+export default BaseCard

src/shared/primitives/BaseCard/index.ts

@@ -0,0 +1,3 @@
+export * from './BaseCard'
+
+export { default } from './BaseCard'