refactor: group project/ui components into subdirectories

2026-05-13 09:40:00 +03:00
parent e518fc46a9
commit 9cf8caaead
11 changed files with 5 additions and 4 deletions
@@ -0,0 +1,68 @@
+import Image from 'next/image';
+import { cn } from '$shared/lib';
+import { Button, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '$shared/ui';
+
+type Props = {
+  /**
+   * Project name
+   */
+  title: string;
+  /**
+   * Year the project was completed
+   */
+  year: string;
+  /**
+   * Short project description
+   */
+  description: string;
+  /**
+   * Technology or category tags
+   */
+  tags: string[];
+  /**
+   * Optional preview image URL
+   */
+  imageUrl?: string;
+};
+
+/**
+ * Compact project card for grid/list display.
+ */
+export function ProjectCard({ title, year, description, tags, imageUrl }: Props) {
+  return (
+    <Card
+      className={cn(
+        'group hover:translate-x-[2px] hover:translate-y-[2px]',
+        'hover:shadow-[10px_10px_0_var(--blue)] transition-all duration-300',
+      )}
+    >
+      <CardHeader>
+        <div className="flex flex-row justify-between items-start mb-3">
+          <CardTitle className="flex-1">{title}</CardTitle>
+          <span className="brutal-border px-3 py-1 bg-blue text-cream text-sm">{year}</span>
+        </div>
+        <CardDescription>{description}</CardDescription>
+      </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>
+  );
+}