feat: add project entity (ProjectMetadata, ProjectCard, DetailedProjectCard)

2026-04-19 08:37:21 +03:00
parent 0fa66f275d
commit eeef679f69
7 changed files with 459 additions and 0 deletions
@@ -0,0 +1,68 @@
+import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter, Button } from '$shared/ui'
+import { cn } from '$shared/lib'
+
+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(--carbon-black)] 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-carbon-black text-ochre-clay text-sm">{year}</span>
+        </div>
+        <CardDescription>{description}</CardDescription>
+      </CardHeader>
+
+      {imageUrl && (
+        <div className="brutal-border my-6 aspect-video bg-slate-indigo overflow-hidden">
+          <img src={imageUrl} alt={title} className="w-full h-full object-cover" />
+        </div>
+      )}
+
+      <CardContent className="flex flex-wrap gap-2">
+        {tags.map((tag) => (
+          <span
+            key={tag}
+            className="brutal-border px-3 py-1 bg-white text-carbon-black text-sm uppercase tracking-wide"
+          >
+            {tag}
+          </span>
+        ))}
+      </CardContent>
+
+      <CardFooter>
+        <Button variant="primary" className="w-full">View Project</Button>
+      </CardFooter>
+    </Card>
+  )
+}