App Download Stack

1"use client";
2 
3import { ChevronDown } from "lucide-react";
4import {
5  AnimatePresence,
6  motion,
7  useAnimation,
8  useReducedMotion,
9} from "motion/react";
10import { useCallback, useMemo, useState } from "react";
11 
12export interface AppData {
13  icon: string;
14  id: number;
15  name: string;
16}
17 
18export interface AppDownloadStackProps {
19  apps?: AppData[];
20  className?: string;
21  isExpanded?: boolean;
22  onChange?: (selected: number[]) => void;
23  onDownload?: (selected: number[]) => void;
24  onExpandChange?: (expanded: boolean) => void;
25  selectedApps?: number[];
26  title?: string;
27}
28 
29const DOWNLOAD_DURATION_MS = 3000;
30const RESET_DELAY_MS = 1000;
31const ROTATION_MULTIPLIER = 8;
32const TRANSLATION_MULTIPLIER = 3;
33const BASE_Z_INDEX = 40;
34const Z_INDEX_STEP = 10;
35const HOVER_X_MULTIPLIER = 10;
36const HOVER_Y_MULTIPLIER = 10;
37const FLOAT_AMPLITUDE = 5;
38const FLOAT_DURATION = 2;
39const FLOAT_DELAY_MULTIPLIER = 0.2;
40const STAGGER_DELAY_MULTIPLIER = 0.1;
41const TRANSITION_DURATION = 0.3;
42const CHECKMARK_TRANSITION_DURATION = 0.3;
43 
44const defaultApps: AppData[] = [
45  {
46    icon: "https://parsefiles.back4app.com/JPaQcFfEEQ1ePBxbf6wvzkPMEqKYHhPYv8boI1Rc/9c9721583ecba33e59ebcebdca2248fd_Mmr12FRh5V.png",
47    id: 1,
48    name: "GitHub",
49  },
50  {
51    icon: "https://parsefiles.back4app.com/JPaQcFfEEQ1ePBxbf6wvzkPMEqKYHhPYv8boI1Rc/b47f43e02f04563447fa90d4ff6c8943_9KzW5GTggQ.png",
52    id: 2,
53    name: "Canary",
54  },
55  {
56    icon: "https://parsefiles.back4app.com/JPaQcFfEEQ1ePBxbf6wvzkPMEqKYHhPYv8boI1Rc/f0b9cdefa67b57eeb080278c2f6984cc_sCqUJBg6Qq.png",
57    id: 3,
58    name: "Figma",
59  },
60  {
61    icon: "https://parsefiles.back4app.com/JPaQcFfEEQ1ePBxbf6wvzkPMEqKYHhPYv8boI1Rc/178c7b02003c933e6b5afe98bbee595b_low_res_Arc_Browser.png",
62    id: 4,
63    name: "Arc",
64  },
65];
66 
67export default function AppDownloadStack({
68  apps = defaultApps,
69  title = "Starter Mac",
70  selectedApps: controlledSelected,
71  onChange,
72  onDownload,
73  isExpanded: controlledExpanded,
74  onExpandChange,
75  className = "",
76}: AppDownloadStackProps) {
77  const [internalExpanded, setInternalExpanded] = useState(false);
78  const [internalSelected, setInternalSelected] = useState<number[]>([]);
79  const [isDownloading, setIsDownloading] = useState(false);
80  const [downloadComplete, setDownloadComplete] = useState(false);
81  const shineControls = useAnimation();
82  const shouldReduceMotion = useReducedMotion();
83 
84  const isExpanded =
85    controlledExpanded === undefined ? internalExpanded : controlledExpanded;
86// … truncated