Task/36 component sidebar nav item component

src/shared/SidebarNavItem/SidebarNavItem.stories.tsx

@@ -0,0 +1,66 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+
+import {
+  QueueListIcon,
+  ExclamationTriangleIcon,
+  CheckCircleIcon,
+  // UsersIcon,
+  // PresentationChartLineIcon
+} from '@heroicons/react/24/outline'
+
+import { SidebarNavItem } from './SidebarNavItem'
+
+const meta = {
+  title: 'Shared/Composites/SidebarNavItem',
+
+  component: SidebarNavItem,
+
+  tags: ['autodocs'],
+
+  argTypes: {},
+} satisfies Meta<typeof SidebarNavItem>
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {
+    link: '/reports',
+    label: 'Reports',
+    icon: <QueueListIcon className="h-5 w-5" />,
+  },
+}
+
+export const Active: Story = {
+  args: {
+    link: '/reports',
+    label: 'Reports',
+    icon: <QueueListIcon className="h-5 w-5" />,
+    isActive: true,
+  },
+}
+
+export const WithDangerBadge: Story = {
+  args: {
+    link: '/escalated',
+    label: 'Escalated',
+    icon: <ExclamationTriangleIcon className="h-5 w-5" />,
+
+    badge: 12,
+
+    badgeVariant: 'danger',
+  },
+}
+
+export const WithInfoBadge: Story = {
+  args: {
+    link: '/resolved',
+    label: 'Resolved',
+    icon: <CheckCircleIcon className="h-5 w-5" />,
+
+    badge: 4,
+
+    badgeVariant: 'info',
+  },
+}

src/shared/SidebarNavItem/SidebarNavItem.tsx

@@ -0,0 +1,92 @@
+import React from 'react'
+import { cva } from 'class-variance-authority'
+import { Badge } from '../Badge'
+// import { NavLink } from 'react-router-dom'
+
+const sidebarNavItem = cva(
+  [
+    'w-full',
+    'flex items-center justify-between',
+    'gap-3',
+
+    'rounded-lg',
+
+    'px-3 py-2',
+
+    'transition-colors duration-150',
+
+    'cursor-pointer',
+    'select-none',
+
+    'focus-visible:outline-none',
+    'focus-visible:ring-2',
+    'focus-visible:ring-border-info',
+
+    'active:scale-[0.99]',
+  ],
+  {
+    variants: {
+      isActive: {
+        true: ['bg-bg-secondary', 'text-text-primary', 'font-medium'],
+
+        false: ['text-text-tertiary', 'hover:bg-bg-secondary', 'hover:text-text-primary'],
+      },
+    },
+
+    defaultVariants: {
+      isActive: false,
+    },
+  }
+)
+
+export interface SidebarNavItemProps {
+  link?: string
+
+  label: string
+
+  icon: React.ReactNode
+
+  isActive?: boolean
+
+  badge?: number | string
+
+  badgeVariant?: 'danger' | 'info'
+
+  className?: string
+}
+
+export function SidebarNavItem({
+  // link,
+  label,
+  icon,
+  isActive = false,
+  badge,
+  badgeVariant = 'info',
+  className,
+}: SidebarNavItemProps) {
+  return (
+    <div
+      // type="button"
+      className={sidebarNavItem({
+        isActive,
+        className,
+      })}
+    >
+      {/* Left side */}
+      <div className="flex min-w-0 items-center gap-3">
+        <span className="shrink-0">{icon}</span>
+
+        <span className="truncate">{label}</span>
+      </div>
+
+      {/* Badge */}
+      {badge !== undefined && (
+        <Badge size="sm" variant={badgeVariant === 'danger' ? 'danger' : 'info'}>
+          {badge}
+        </Badge>
+      )}
+    </div>
+  )
+}
+
+export default SidebarNavItem

src/shared/SidebarNavItem/index.ts

@@ -0,0 +1,2 @@
+export { SidebarNavItem } from './SidebarNavItem'
+export type { SidebarNavItemProps } from './SidebarNavItem'