Add a visually engaging Linux distribution discovery app

Implement a Tinder-style card swiping interface for discovering Linux distributions, featuring landscape screenshots, physics-based animations, and dynamic backgrounds. Replit-Commit-Author: Agent Replit-Commit-Session-Id: e522d728-b28a-437f-b576-83935afe7ea0 Replit-Commit-Checkpoint-Type: full_checkpoint Replit-Commit-Event-Id: 214eff6b-5420-4bc2-8d15-c6c2ebb822ab Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/55e426a8-5a2b-421b-8bd4-30481ae0063b/e522d728-b28a-437f-b576-83935afe7ea0/3ouALIb Replit-Helium-Checkpoint-Created: true
2026-09-12 02:56:09 +00:00 · 2025-12-17 13:34:14 +00:00
parent 51eacc7a1c
commit b1ca5c29fe
22 changed files with 601 additions and 5 deletions
@@ -0,0 +1,86 @@
+import { motion } from 'framer-motion';
+import { PartyPopper, RotateCcw, Download } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import type { DistroCard } from '@/data/distros';
+
+interface EndOfDeckProps {
+  likedCards: DistroCard[];
+  onReset: () => void;
+}
+
+export default function EndOfDeck({ likedCards, onReset }: EndOfDeckProps) {
+  return (
+    <motion.div
+      className="flex flex-col items-center gap-8 text-center"
+      initial={{ opacity: 0, scale: 0.8 }}
+      animate={{ opacity: 1, scale: 1 }}
+      transition={{ type: 'spring', stiffness: 200, damping: 20 }}
+    >
+      <motion.div
+        animate={{
+          rotate: [0, -10, 10, -10, 10, 0],
+          scale: [1, 1.1, 1],
+        }}
+        transition={{ duration: 0.6, delay: 0.2 }}
+      >
+        <PartyPopper className="h-24 w-24 text-yellow-400" />
+      </motion.div>
+
+      <div>
+        <h2 className="font-mono text-3xl font-bold text-white" data-testid="text-end-title">
+          Öneriler Hazır!
+        </h2>
+        <p className="mt-2 text-lg text-white/70">
+          {likedCards.length > 0
+            ? `${likedCards.length} dağıtım beğendin`
+            : 'Hiçbir dağıtım beğenmedin'}
+        </p>
+      </div>
+
+      {likedCards.length > 0 && (
+        <div className="flex flex-wrap justify-center gap-4">
+          {likedCards.map((card) => (
+            <motion.div
+              key={card.id}
+              className="overflow-hidden rounded-lg bg-white/10 backdrop-blur-sm"
+              initial={{ opacity: 0, y: 20 }}
+              animate={{ opacity: 1, y: 0 }}
+              data-testid={`result-card-${card.id}`}
+            >
+              <img
+                src={card.screenshot}
+                alt={card.distroName}
+                className="h-24 w-40 object-cover"
+              />
+              <div className="p-3">
+                <p className="font-semibold text-white">{card.distroName}</p>
+                <p className="text-xs text-white/60">{card.desktopEnvironment}</p>
+              </div>
+            </motion.div>
+          ))}
+        </div>
+      )}
+
+      <div className="flex gap-4">
+        <Button
+          variant="outline"
+          className="gap-2 border-white/20 bg-white/10 text-white hover:bg-white/20"
+          onClick={onReset}
+          data-testid="button-restart"
+        >
+          <RotateCcw className="h-4 w-4" />
+          Tekrar Başla
+        </Button>
+        {likedCards.length > 0 && (
+          <Button
+            className="gap-2 bg-primary text-primary-foreground"
+            data-testid="button-download"
+          >
+            <Download className="h-4 w-4" />
+            İndir
+          </Button>
+        )}
+      </div>
+    </motion.div>
+  );
+}