Apple Invites

1"use client";
2 
3import { Crown } from "lucide-react";
4import { AnimatePresence, motion, useReducedMotion } from "motion/react";
5import { wrap } from "popmotion";
6import { useEffect, useMemo, useRef, useState } from "react";
7 
8export interface ResponsiveSize {
9  "2xl"?: number | string;
10  base?: number | string;
11  lg?: number | string;
12  md?: number | string;
13  sm?: number | string;
14  xl?: number | string;
15}
16 
17const breakpoints = {
18  "2xl": 1536,
19  lg: 1024,
20  md: 768,
21  sm: 640,
22  xl: 1280,
23} as const;
24 
25const DEFAULT_CARD_WIDTH = 240;
26const DEFAULT_ASPECT_RATIO = 1.5625; // 5:8 ratio (500/320)
27 
28// Base sizes for responsive scaling (based on DEFAULT_CARD_WIDTH = 240)
29const BASE_BADGE_FONT_SIZE = 12;
30const BASE_BADGE_PADDING_X = 12;
31const BASE_BADGE_PADDING_Y = 3;
32const BASE_BADGE_ICON_SIZE = 14;
33const BASE_TITLE_FONT_SIZE = 18;
34const BASE_SUBTITLE_FONT_SIZE = 12;
35const BASE_LOCATION_FONT_SIZE = 12;
36const BASE_AVATAR_SIZE = 24;
37const BASE_CONTENT_PADDING = 24;
38const BASE_BADGE_TOP = 16;
39const BASE_BADGE_LEFT = 16;
40const BASE_BADGE_GAP = 8;
41const BASE_AVATAR_GAP = 8;
42const BASE_AVATAR_MARGIN_BOTTOM = 8;
43const BASE_TITLE_MARGIN_BOTTOM = 4;
44const BASE_LINE_HEIGHT = 1.4;
45const BADGE_PADDING_Y_SCALE_FACTOR = 0.7; // Reduce vertical padding scaling for more compact badges
46 
47// Minimum sizes to ensure readability
48const MIN_BADGE_FONT_SIZE = 10;
49const MIN_BADGE_PADDING_X = 8;
50const MIN_BADGE_PADDING_Y = 1;
51const MIN_BADGE_ICON_SIZE = 12;
52const MIN_TITLE_FONT_SIZE = 14;
53const MIN_SUBTITLE_FONT_SIZE = 10;
54const MIN_LOCATION_FONT_SIZE = 10;
55const MIN_AVATAR_SIZE = 20;
56const MIN_CONTENT_PADDING = 12;
57const MIN_BADGE_TOP = 8;
58const MIN_BADGE_LEFT = 8;
59const MIN_BADGE_GAP = 4;
60const MIN_AVATAR_GAP = 4;
61const MIN_AVATAR_MARGIN_BOTTOM = 4;
62const MIN_TITLE_MARGIN_BOTTOM = 2;
63 
64function formatSize(size: number | string): string {
65  return typeof size === "number" ? `${size}px` : size;
66}
67 
68function getInitialSize(
69  size: number | string | ResponsiveSize | undefined,
70  defaultValue: number | string
71): string {
72  if (!size) {
73    return formatSize(defaultValue);
74  }
75  if (typeof size === "number" || typeof size === "string") {
76    return formatSize(size);
77  }
78  // Responsive object - start with base or first available value
79  if (size.base !== undefined) {
80    return formatSize(size.base);
81  }
82  return formatSize(defaultValue);
83}
84 
85function getSizeForBreakpoint(
86  size: ResponsiveSize,
87  width: number
88): number | string | undefined {
89  if (width >= breakpoints["2xl"]) {
90// … truncated