refactor: ProjectCard sidebar layout — year, tags, button in sidebar

src/entities/project/ui/ProjectCard/ProjectCard.test.tsx

@@ -15,7 +15,7 @@ describe('ProjectCard', () => {
       expect(screen.getByText('My Project')).toBeInTheDocument();
     });
 
-    it('renders the year badge', () => {
+    it('renders the year', () => {
       render(<ProjectCard {...DEFAULT_PROPS} />);
       expect(screen.getByText('2024')).toBeInTheDocument();
     });
@@ -37,23 +37,55 @@ describe('ProjectCard', () => {
     });
   });
 
+  describe('layout', () => {
+    it('year is inside the sidebar column', () => {
+      render(<ProjectCard {...DEFAULT_PROPS} />);
+      expect(screen.getByText('2024').closest('.brutal-border-sidebar')).toBeInTheDocument();
+    });
+
+    it('tags are inside the sidebar column', () => {
+      render(<ProjectCard {...DEFAULT_PROPS} />);
+      expect(screen.getByText('React').closest('.brutal-border-sidebar')).toBeInTheDocument();
+      expect(screen.getByText('Node').closest('.brutal-border-sidebar')).toBeInTheDocument();
+    });
+
+    it('View Project button is inside the sidebar column', () => {
+      render(<ProjectCard {...DEFAULT_PROPS} />);
+      const btn = screen.getByRole('button', { name: /view project/i });
+      expect(btn.closest('.brutal-border-sidebar')).toBeInTheDocument();
+    });
+
+    it('title is outside the sidebar column', () => {
+      render(<ProjectCard {...DEFAULT_PROPS} />);
+      expect(screen.getByText('My Project').closest('.brutal-border-sidebar')).toBeNull();
+    });
+
+    it('description is outside the sidebar column', () => {
+      render(<ProjectCard {...DEFAULT_PROPS} />);
+      expect(screen.getByText('A cool project description').closest('.brutal-border-sidebar')).toBeNull();
+    });
+  });
+
   describe('structure', () => {
     it('card has hover transition classes', () => {
       const { container } = render(<ProjectCard {...DEFAULT_PROPS} />);
-      const card = container.firstChild as HTMLElement;
+      expect(container.firstChild).toHaveClass('group', 'transition-shadow', 'duration-300');
-      expect(card).toHaveClass('group', 'transition-shadow', 'duration-300');
     });
 
-    it('year badge has correct classes', () => {
+    it('title renders as h3', () => {
       render(<ProjectCard {...DEFAULT_PROPS} />);
-      const yearBadge = screen.getByText('2024');
+      expect(screen.getByRole('heading', { level: 3 })).toHaveTextContent('My Project');
-      expect(yearBadge).toHaveClass('brutal-border', 'bg-blue', 'text-cream', 'text-sm');
     });
 
-    it('tags have correct classes', () => {
+    it('year has Badge default classes', () => {
+      render(<ProjectCard {...DEFAULT_PROPS} />);
+      expect(screen.getByText('2024')).toHaveClass('brutal-border', 'bg-blue', 'text-cream');
+    });
+
+    it('tags are xs outline badges', () => {
       render(<ProjectCard {...DEFAULT_PROPS} />);
       const tag = screen.getByText('React');
-      expect(tag).toHaveClass('brutal-border', 'bg-cream', 'text-blue', 'text-sm', 'uppercase', 'tracking-wide');
+      expect(tag).toHaveClass('brutal-border', 'bg-transparent', 'px-2');
     });
   });
 
@@ -68,7 +100,7 @@ describe('ProjectCard', () => {
       expect(screen.getByRole('img')).toBeInTheDocument();
     });
 
-    it('image wrapper has aspect-video and overflow-hidden when imageUrl is provided', () => {
+    it('image wrapper has aspect-video and overflow-hidden', () => {
       const { container } = render(<ProjectCard {...DEFAULT_PROPS} imageUrl="/project.jpg" />);
       const imgWrapper = container.querySelector('img')?.parentElement;
       expect(imgWrapper).toHaveClass('aspect-video', 'overflow-hidden', 'brutal-border');

src/entities/project/ui/ProjectCard/ProjectCard.tsx

@@ -1,6 +1,6 @@
 import Image from 'next/image';
 import { cn } from '$shared/lib';
-import { Button, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '$shared/ui';
+import { Badge, Button, Card, CardSidebar, CardTitle } from '$shared/ui';
 
 type Props = {
   /**
@@ -26,38 +26,42 @@ type Props = {
 };
 
 /**
- * Compact project card for grid/list display.
+ * Project card with sidebar layout.
+ * Sidebar: year badge, stack tags, View Project button.
+ * Main: title, optional image, description.
  */
 export function ProjectCard({ title, year, description, tags, imageUrl }: Props) {
   return (
     <Card className={cn('group hover:shadow-brutal-xl transition-shadow duration-300')}>
-      <CardHeader>
+      <CardSidebar
-        <div className="flex flex-row justify-between items-start mb-3">
+        sidebar={
-          <CardTitle className="flex-1 font-heading">{title}</CardTitle>
+          <div className="flex flex-col gap-4">
-          <span className="brutal-border px-3 py-1 bg-blue text-cream text-sm">{year}</span>
+            <Badge>{year}</Badge>
+            {tags.length > 0 && (
+              <div className="flex flex-wrap gap-2">
+                {tags.map((tag) => (
+                  <Badge key={tag} variant="outline" size="xs">
+                    {tag}
+                  </Badge>
+                ))}
+              </div>
+            )}
+            <Button variant="primary" className="w-full">
+              View Project
+            </Button>
+          </div>
+        }
+      >
+        <div className="flex flex-col gap-4">
+          <CardTitle className="font-heading">{title}</CardTitle>
+          {imageUrl && (
+            <div className="brutal-border aspect-video bg-blue overflow-hidden relative">
+              <Image src={imageUrl} alt={title} fill className="object-cover" />
+            </div>
+          )}
+          <p className="opacity-80">{description}</p>
         </div>
-        <CardDescription>{description}</CardDescription>
+      </CardSidebar>
-      </CardHeader>
-
-      {imageUrl && (
-        <div className="brutal-border my-6 aspect-video bg-blue overflow-hidden relative">
-          <Image src={imageUrl} alt={title} fill className="object-cover" />
-        </div>
-      )}
-
-      <CardContent className="flex flex-wrap gap-2">
-        {tags.map((tag) => (
-          <span key={tag} className="brutal-border px-3 py-1 bg-cream text-blue text-sm uppercase tracking-wide">
-            {tag}
-          </span>
-        ))}
-      </CardContent>
-
-      <CardFooter>
-        <Button variant="primary" className="w-full">
-          View Project
-        </Button>
-      </CardFooter>
     </Card>
   );
 }