22 |

23 |

24 |

25 | 30 | setState({ 31 | ...state, 32 | firstName: e.target.value, 33 | }) 34 | } 35 | /> 36 | 37 | 42 | setState({ ...state, lastName: e.target.value }) 43 | } 44 | /> 45 |

46 | 47 | 52 | setState({ ...state, email: e.target.value }) 53 | } 54 | /> 55 | 56 |

60 |                             setState({ ...state, message: e.target.value })
61 |                         }
62 |                     />
63 | 
64 |                     <button
65 |                         type="submit"
66 |                         className="bg-blue-500 text-white px-4 py-2 rounded-md"
67 |                     >
68 |                         Submit
69 |                     </button>
70 |                 </div>
71 |             </form>
72 |         </div>
73 |     );
74 | }
75 |

--------------------------------------------------------------------------------
/floating-navbar/Button.tsx:
--------------------------------------------------------------------------------
 1 | "use client";
 2 | 
 3 | import clsx from "clsx";
 4 | import { ButtonHTMLAttributes, ReactNode } from "react";
 5 | 
 6 | // Define variant types
 7 | type ButtonVariant = "ghost";
 8 | 
 9 | // Add icon position type
10 | type IconPosition = "left" | "right";
11 | 
12 | // Add size type
13 | type ButtonSize = "small" | "large";
14 | 
15 | type ButtonProps = {
16 |     children: string | ReactNode;
17 |     variant?: ButtonVariant;
18 |     size?: ButtonSize;
19 |     icon?: ReactNode;
20 |     iconPosition?: IconPosition;
21 |     isLoading?: boolean;
22 |     loaderColor?: string;
23 |     isDisabled?: boolean;
24 |     width?: string;
25 |     padding?: string;
26 |     textSize?: string;
27 | } & ButtonHTMLAttributes<HTMLButtonElement>;
28 | 
29 | // Base button classes
30 | const baseButtonClasses =
31 |     "h-fit rounded-xl font-normal text-center flex justify-center transition-all duration-300 hover:scale-105 hover:shadow-lg select-none";
32 | 
33 | // Variant classes mapping
34 | const variantClasses: Record<ButtonVariant, string> = {
35 |     ghost: "bg-transparent text-white",
36 | };
37 | 
38 | // Add size classes mapping
39 | const sizeClasses: Record<ButtonSize, string> = {
40 |     small: "py-2 px-4 text-[12px]",
41 |     large: "py-3 px-6 text-[16px]",
42 | };
43 | 
44 | export default function Button({
45 |     children,
46 |     variant = "primary",
47 |     size = "large",
48 |     icon,
49 |     iconPosition = "left",
50 |     isLoading = false,
51 |     loaderColor = "text-current",
52 |     isDisabled = false,
53 |     width = "w-fit",
54 |     padding,
55 |     textSize,
56 |     className,
57 |     ...props
58 | }: ButtonProps) {
59 |     const content = (
60 |         <>
61 |             {isLoading ? (
62 |                 <span
63 |                     className={clsx(
64 |                         loaderColor,
65 |                         "flex items-center justify-center loading loading-ring loading-sm"
66 |                     )}
67 |                 ></span>
68 |             ) : (
69 |                 <div className="flex items-center gap-2">
70 |                     {icon && iconPosition === "left" && icon}
71 |                     {children}
72 |                     {icon && iconPosition === "right" && icon}
73 |                 </div>
74 |             )}
75 |         </>
76 |     );
77 | 
78 |     return (
79 |         <button
80 |             className={clsx(
81 |                 baseButtonClasses,
82 |                 sizeClasses[size],
83 |                 variantClasses[variant],
84 |                 width,
85 |                 padding,
86 |                 textSize,
87 |                 {
88 |                     "cursor-not-allowed opacity-50": isDisabled,
89 |                 },
90 |                 className
91 |             )}
92 |             disabled={isDisabled}
93 |             {...props}
94 |         >
95 |             {content}
96 |         </button>
97 |     );
98 | }
99 |

--------------------------------------------------------------------------------
/ittybitFileUpload/pages/api/upload.ts:
--------------------------------------------------------------------------------
 1 | import formidable from "formidable";
 2 | import fs from "fs";
 3 | import { NextApiRequest, NextApiResponse } from "next";
 4 | 
 5 | // Simple upload URL - Get your URL from your IttyBit dashboard
 6 | // https://ittybit.com/guides/simple-uploads
 7 | const API_URL = "https://https://you.ittybit.net";
 8 | 
 9 | export const config = {
10 |     api: {
11 |         bodyParser: false,
12 |     },
13 | };
14 | 
15 | export default async function handler(
16 |     req: NextApiRequest,
17 |     res: NextApiResponse
18 | ) {
19 |     if (req.method !== "POST") {
20 |         return res.status(405).json({ error: "Method not allowed" });
21 |     }
22 | 
23 |     try {
24 |         const form = formidable();
25 |         const [fields, files] = await form.parse(req);
26 |         const file = files.file?.[0];
27 |         const folder = fields.folder?.[0] || "uploads";
28 | 
29 |         if (!file) {
30 |             return res.status(400).json({ error: "No file uploaded" });
31 |         }
32 | 
33 |         // Generate a safe filename
34 |         const safeFileName = encodeURIComponent(
35 |             file.originalFilename?.toLowerCase().replace(/[^a-z0-9.]/g, "-") ||
36 |                 "file"
37 |         );
38 |         const uploadPath = `${folder}/${safeFileName}`;
39 | 
40 |         // Read the file
41 |         const fileData = fs.readFileSync(file.filepath);
42 | 
43 |         console.log("Uploading to IttyBit:", {
44 |             path: uploadPath,
45 |             size: fileData.length,
46 |             hasApiKey: !!process.env.ITTYBIT_API_KEY,
47 |         });
48 | 
49 |         // Upload to IttyBit
50 |         const response = await fetch(`${API_URL}/${uploadPath}`, {
51 |             method: "PUT",
52 |             headers: {
53 |                 Authorization: `Bearer ${process.env.ITTYBIT_API_KEY}`,
54 |                 "Content-Type": file.mimetype || "application/octet-stream",
55 |             },
56 |             body: fileData,
57 |         });
58 | 
59 |         // Clean up the temporary file
60 |         fs.unlinkSync(file.filepath);
61 | 
62 |         if (!response.ok) {
63 |             const errorData = await response.json();
64 | 
65 |             console.error("IttyBit API Error:", {
66 |                 status: response.status,
67 |                 statusText: response.statusText,
68 |                 headers: Object.fromEntries(response.headers.entries()),
69 |                 error: errorData,
70 |             });
71 |             throw new Error(
72 |                 errorData.message ||
73 |                     `Failed to upload to IttyBit: ${response.status} ${response.statusText}`
74 |             );
75 |         }
76 | 
77 |         const { meta, data, error } = await response.json();
78 | 
79 |         console.log("IttyBit upload success:", data);
80 |         return res.status(201).json({ meta, data, error });
81 |     } catch (error) {
82 |         console.error("Upload error:", error);
83 |         return res.status(500).json({
84 |             error:
85 |                 error instanceof Error
86 |                     ? error.message
87 |                     : "Failed to upload file",
88 |             details: error instanceof Error ? error.stack : undefined,
89 |         });
90 |     }
91 | }
92 |

--------------------------------------------------------------------------------
/apple-sign-in/generate-apple-secret.ts:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Apple Client Secret Generator Script
 3 |  *
 4 |  * This script generates a client secret JWT required for Apple Sign In authentication.
 5 |  * The generated secret is valid for 6 months and needs to be regenerated before expiry.
 6 |  *
 7 |  * Required Environment Variables in .env:
 8 |  * - APPLE_TEAM_ID: Found in your Apple Developer account
 9 |  * - APPLE_KEY_ID: The Key ID from your private key in Apple Developer Console
10 |  * - APPLE_CLIENT_ID: Your app's identifier (e.g., com.yourapp.id)
11 |  * - APPLE_PRIVATE_KEY_PATH: Path to your .p8 private key file
12 |  *
13 |  * Important Notes:
14 |  * - The private key (.p8) file must be kept secure and never committed to version control
15 |  * - The generated secret is valid for 6 months
16 |  * - This secret is required for the auth.ts configuration (Better Auth)
17 |  *
18 |  * To run this script:
19 |  * 1. Run the script: npm run generate-apple-secret
20 |  * 2. The generated secret will be printed to the console
21 |  * 3. Copy the secret and paste it into your .env file
22 |  * 4. Restart your server
23 |  */
24 | 
25 | import dotenv from "dotenv";
26 | import fs from "fs";
27 | import pkg from "jsonwebtoken";
28 | import path from "path";
29 | const { sign } = pkg;
30 | 
31 | // Load environment variables from .env file
32 | dotenv.config();
33 | 
34 | // Log environment variables for verification
35 | // These logs help debug missing or incorrect values
36 | console.log("Environment variables:");
37 | console.log("TEAM_ID:", process.env.APPLE_TEAM_ID);
38 | console.log("KEY_ID:", process.env.APPLE_KEY_ID);
39 | console.log("CLIENT_ID:", process.env.APPLE_CLIENT_ID);
40 | console.log("PRIVATE_KEY_PATH:", process.env.APPLE_PRIVATE_KEY_PATH);
41 | 
42 | // Extract required configuration from environment
43 | const TEAM_ID = process.env.APPLE_TEAM_ID;
44 | const KEY_ID = process.env.APPLE_KEY_ID;
45 | const CLIENT_ID = process.env.APPLE_CLIENT_ID;
46 | const PRIVATE_KEY_PATH = process.env.APPLE_PRIVATE_KEY_PATH;
47 | 
48 | // Validate all required environment variables
49 | // Exit early if any required variable is missing
50 | if (!TEAM_ID || !KEY_ID || !CLIENT_ID || !PRIVATE_KEY_PATH) {
51 |     console.error("Missing required environment variables");
52 |     console.error(
53 |         "Required variables: APPLE_TEAM_ID, APPLE_KEY_ID, APPLE_CLIENT_ID, APPLE_PRIVATE_KEY_PATH"
54 |     );
55 |     process.exit(1);
56 | }
57 | 
58 | console.log("Attempting to read private key from:", PRIVATE_KEY_PATH);
59 | 
60 | try {
61 |     // Read the Apple private key (.p8 file)
62 |     // This key should be downloaded from Apple Developer Console
63 |     const privateKey = fs.readFileSync(path.resolve(PRIVATE_KEY_PATH));
64 | 
65 |     // Configure the JWT payload according to Apple's specifications
66 |     // See: https://developer.apple.com/documentation/sign_in_with_apple/generate_and_validate_tokens
67 |     const payload = {
68 |         iss: TEAM_ID, // Team ID from Apple Developer account
69 |         iat: Math.floor(Date.now() / 1000), // Current timestamp
70 |         exp: Math.floor(Date.now() / 1000) + 15777000, // 6 months expiry
71 |         aud: "https://appleid.apple.com", // Required audience
72 |         sub: CLIENT_ID, // Your app's identifier
73 |     };
74 | 
75 |     // Generate the client secret
76 |     // Uses ES256 algorithm as required by Apple
77 |     const clientSecret = sign(payload, privateKey, {
78 |         algorithm: "ES256",
79 |         keyid: KEY_ID,
80 |     });
81 | 
82 |     // Output the generated secret
83 |     // This value should be used in your auth.ts configuration
84 |     console.log("\nApple Client Secret:");
85 |     console.log(clientSecret);
86 | } catch (error: any) {
87 |     console.error("Error reading private key:", error.message);
88 |     process.exit(1);
89 | }
90 |

--------------------------------------------------------------------------------
/floating-navbar/Navbar.tsx:
--------------------------------------------------------------------------------
  1 | "use client";
  2 | 
  3 | import { NAV_OPTIONS } from "@/data/navigation";
  4 | import clsx from "clsx";
  5 | import { useState } from "react";
  6 | import Logo from "./branding/Logo";
  7 | import Button from "./ui/Button";
  8 | import Card from "./ui/Card";
  9 | import { Iconify } from "./ui/Iconify";
 10 | 
 11 | export default function Navbar() {
 12 |     const [isMenuOpen, setIsMenuOpen] = useState(false);
 13 | 
 14 |     const handleScroll = (e: React.MouseEvent, id: string) => {
 15 |         e.preventDefault();
 16 |         const element = document.getElementById(id);
 17 |         element?.scrollIntoView({ behavior: "smooth" });
 18 |         setIsMenuOpen(false);
 19 |     };
 20 | 
 21 |     return (
 22 |         <div className="mx-auto fixed top-4 left-0 right-0 z-50 max-w-7xl px-4 w-full">
 23 |             <Card padding="px-4 py-2" width="w-full">
 24 |                 <div className="flex flex-col">
 25 |                     <div className="flex justify-between items-center">
 26 |                         <Logo />
 27 | 
 28 |                         <div className="hidden md:flex items-center">
 29 |                             {NAV_OPTIONS.map((option) => (
 30 |                                 <Button
 31 |                                     key={option.id}
 32 |                                     variant="ghost"
 33 |                                     onClick={(e) => handleScroll(e, option.id)}
 34 |                                 >
 35 |                                     {option.label}
 36 |                                 </Button>
 37 |                             ))}
 38 |                         </div>
 39 | 
 40 |                         <MenuButton
 41 |                             isMenuOpen={isMenuOpen}
 42 |                             setIsMenuOpen={setIsMenuOpen}
 43 |                         />
 44 |                     </div>
 45 | 
 46 |                     <div
 47 |                         className={clsx(
 48 |                             "grid transition-all duration-300 md:hidden",
 49 |                             isMenuOpen ? "grid-rows-[1fr]" : "grid-rows-[0fr]"
 50 |                         )}
 51 |                     >
 52 |                         <div className="overflow-hidden">
 53 |                             <div className="flex flex-col items-center gap-4 w-full py-4">
 54 |                                 {NAV_OPTIONS.map((option) => (
 55 |                                     <Button
 56 |                                         key={option.id}
 57 |                                         variant="ghost"
 58 |                                         onClick={(e) =>
 59 |                                             handleScroll(e, option.id)
 60 |                                         }
 61 |                                     >
 62 |                                         {option.label}
 63 |                                     </Button>
 64 |                                 ))}
 65 |                             </div>
 66 |                         </div>
 67 |                     </div>
 68 |                 </div>
 69 |             </Card>
 70 |         </div>
 71 |     );
 72 | }
 73 | 
 74 | const MenuButton = ({
 75 |     isMenuOpen,
 76 |     setIsMenuOpen,
 77 | }: {
 78 |     isMenuOpen: boolean;
 79 |     setIsMenuOpen: (isMenuOpen: boolean) => void;
 80 | }) => {
 81 |     return (
 82 |         <button
 83 |             onClick={() => setIsMenuOpen(!isMenuOpen)}
 84 |             className="block md:hidden relative w-8 h-8"
 85 |         >
 86 |             <Iconify
 87 |                 icon="mdi:menu"
 88 |                 className={clsx(
 89 |                     "absolute inset-0 transition-all duration-300 text-3xl text-content/50",
 90 |                     isMenuOpen && "opacity-0 rotate-90"
 91 |                 )}
 92 |             />
 93 | 
 94 |             <Iconify
 95 |                 icon="mdi:close"
 96 |                 className={clsx(
 97 |                     "absolute inset-0 transition-all duration-300 text-3xl text-content/50",
 98 |                     !isMenuOpen && "opacity-0 -rotate-90"
 99 |                 )}
100 |             />
101 |         </button>
102 |     );
103 | };
104 |

--------------------------------------------------------------------------------
/liquid-glass/LGCard.tsx:
--------------------------------------------------------------------------------
  1 | import { ReactNode } from "react";
  2 | 
  3 | type Props = {
  4 |     p?: string;
  5 |     children: ReactNode;
  6 | };
  7 | 
  8 | export default function LGCard({ children, p = "p-6" }: Props) {
  9 |     return (
 10 |         <>
 11 |             <div className="relative font-semibold overflow-hidden rounded-2xl shadow-lg flex items-center justify-center gap-2 w-full">
 12 |                 {/* Glass effect layer */}
 13 |                 <div
 14 |                     className="absolute inset-0 z-0 backdrop-blur-[3px] overflow-hidden isolate"
 15 |                     style={{ filter: "url(#glass-distortion)" }}
 16 |                 ></div>
 17 | 
 18 |                 {/* Tint layer */}
 19 |                 <div className="absolute inset-0 z-10 bg-black/10"></div>
 20 | 
 21 |                 {/* Shine layer */}
 22 |                 <div className="absolute inset-0 z-20 overflow-hidden rounded-2xl shadow-[inset_2px_2px_1px_0_rgba(255,255,255,0.2),inset_-1px_-1px_1px_1px_rgba(255,255,255,0.2)]"></div>
 23 | 
 24 |                 {/* Content layer */}
 25 |                 <div className="z-30 text-2xl text-black w-full">
 26 |                     <div
 27 |                         className={`flex items-center justify-center gap-2 w-full rounded-2xl ${p}`}
 28 |                     >
 29 |                         {children}
 30 |                     </div>
 31 |                 </div>
 32 |             </div>
 33 | 
 34 |             {/* SVG Filter - keeping this unchanged as it's not convertible to Tailwind */}
 35 |             <svg style={{ display: "none" }}>
 36 |                 <filter
 37 |                     id="glass-distortion"
 38 |                     x="0%"
 39 |                     y="0%"
 40 |                     width="100%"
 41 |                     height="100%"
 42 |                     filterUnits="objectBoundingBox"
 43 |                 >
 44 |                     <feTurbulence
 45 |                         type="fractalNoise"
 46 |                         baseFrequency="0.01 0.01"
 47 |                         numOctaves="1"
 48 |                         seed="5"
 49 |                         result="turbulence"
 50 |                     />
 51 | 
 52 |                     <feComponentTransfer in="turbulence" result="mapped">
 53 |                         <feFuncR
 54 |                             type="gamma"
 55 |                             amplitude="1"
 56 |                             exponent="10"
 57 |                             offset="0.5"
 58 |                         />
 59 |                         <feFuncG
 60 |                             type="gamma"
 61 |                             amplitude="0"
 62 |                             exponent="1"
 63 |                             offset="0"
 64 |                         />
 65 |                         <feFuncB
 66 |                             type="gamma"
 67 |                             amplitude="0"
 68 |                             exponent="1"
 69 |                             offset="0.5"
 70 |                         />
 71 |                     </feComponentTransfer>
 72 | 
 73 |                     <feGaussianBlur
 74 |                         in="turbulence"
 75 |                         stdDeviation="3"
 76 |                         result="softMap"
 77 |                     />
 78 | 
 79 |                     <feSpecularLighting
 80 |                         in="softMap"
 81 |                         surfaceScale="5"
 82 |                         specularConstant="1"
 83 |                         specularExponent="100"
 84 |                         lighting-color="white"
 85 |                         result="specLight"
 86 |                     >
 87 |                         <fePointLight x="-200" y="-200" z="300" />
 88 |                     </feSpecularLighting>
 89 | 
 90 |                     <feComposite
 91 |                         in="specLight"
 92 |                         operator="arithmetic"
 93 |                         k1="0"
 94 |                         k2="1"
 95 |                         k3="1"
 96 |                         k4="0"
 97 |                         result="litImage"
 98 |                     />
 99 | 
100 |                     <feDisplacementMap
101 |                         in="SourceGraphic"
102 |                         in2="softMap"
103 |                         scale="150"
104 |                         xChannelSelector="R"
105 |                         yChannelSelector="G"
106 |                     />
107 |                 </filter>
108 |             </svg>
109 |         </>
110 |     );
111 | }
112 |

--------------------------------------------------------------------------------
/expo-auth-flow/index.tsx:
--------------------------------------------------------------------------------
  1 | import { AppleIcon, GoogleIcon, MailIcon } from "@/components/icons";
  2 | import Button from "@/components/ui/Button";
  3 | import { LinearGradient } from "expo-linear-gradient";
  4 | import { Link, router } from "expo-router";
  5 | import React, { useState } from "react";
  6 | import { Dimensions, Image, Text, TextInput, View } from "react-native";
  7 | 
  8 | export default function AuthScreen() {
  9 |     const screenHeight = Dimensions.get("window").height;
 10 | 
 11 |     const [showEmailInputs, setShowEmailInputs] = useState(false);
 12 |     const [email, setEmail] = useState("");
 13 |     const [password, setPassword] = useState("");
 14 | 
 15 |     return (
 16 |         <View className="flex-1 bg-white">
 17 |             <Image
 18 |                 // Note: You will need your own image here
 19 |                 source={require("@/assets/images/auth_bg.png")}
 20 |                 style={{
 21 |                     width: "100%",
 22 |                     height: screenHeight * 0.8,
 23 |                     position: "absolute",
 24 |                     top: 0,
 25 |                 }}
 26 |                 resizeMode="cover"
 27 |             />
 28 | 
 29 |             <LinearGradient
 30 |                 colors={["transparent", "white"]}
 31 |                 style={{
 32 |                     position: "absolute",
 33 |                     bottom: screenHeight * 0.2,
 34 |                     left: 0,
 35 |                     right: 0,
 36 |                     height: 350,
 37 |                 }}
 38 |             />
 39 | 
 40 |             <View className="flex-col gap-4 mt-auto mb-10 px-4">
 41 |                 <Text className="text-center text-black text-[24px] font-bold mb-2">
 42 |                     Login
 43 |                 </Text>
 44 | 
 45 |                 {!showEmailInputs ? (
 46 |                     <View className="flex-col gap-6">
 47 |                         <Button
 48 |                             icon={<MailIcon />}
 49 |                             onPress={() => setShowEmailInputs(true)}
 50 |                         >
 51 |                             Continue with Email
 52 |                         </Button>
 53 | 
 54 |                         <Button
 55 |                             icon={<GoogleIcon />}
 56 |                             onPress={() => router.push("/signin")}
 57 |                         >
 58 |                             Continue With Google
 59 |                         </Button>
 60 | 
 61 |                         <Button
 62 |                             icon={<AppleIcon />}
 63 |                             onPress={() => router.push("/signin")}
 64 |                         >
 65 |                             Continue With Apple
 66 |                         </Button>
 67 | 
 68 |                         <Text className="text-center text-gray-500">
 69 |                             Dont have an account?{" "}
 70 |                             <Link
 71 |                                 href="/signup"
 72 |                                 className="font-bold text-[#4B5119]"
 73 |                             >
 74 |                                 Create Account
 75 |                             </Link>
 76 |                         </Text>
 77 |                     </View>
 78 |                 ) : (
 79 |                     <View className="flex-col gap-6">
 80 |                         <TextInput
 81 |                             className="h-14 border border-gray-300 rounded-full px-6 bg-white placeholder:text-gray-500"
 82 |                             placeholder="Email"
 83 |                             value={email}
 84 |                             onChangeText={setEmail}
 85 |                             keyboardType="email-address"
 86 |                             autoCapitalize="none"
 87 |                             secureTextEntry={false}
 88 |                         />
 89 | 
 90 |                         <TextInput
 91 |                             className="h-14 border border-gray-300 rounded-full px-6 bg-white placeholder:text-gray-500"
 92 |                             placeholder="Password"
 93 |                             value={password}
 94 |                             onChangeText={setPassword}
 95 |                             secureTextEntry
 96 |                         />
 97 | 
 98 |                         <Button onPress={() => setShowEmailInputs(false)}>
 99 |                             Sign In
100 |                         </Button>
101 | 
102 |                         <Button
103 |                             variant="secondary"
104 |                             onPress={() => setShowEmailInputs(false)}
105 |                         >
106 |                             Back
107 |                         </Button>
108 |                     </View>
109 |                 )}
110 |             </View>
111 |         </View>
112 |     );
113 | }
114 |

--------------------------------------------------------------------------------
/ittybitFileUpload/components/MediaUpload.tsx:
--------------------------------------------------------------------------------
  1 | import React, { useCallback, useState } from "react";
  2 | import { useDropzone } from "react-dropzone";
  3 | 
  4 | type Props = {
  5 |     onMediaSelect: (url: string) => void;
  6 |     accept?: Partial<{
  7 |         "image/*": string[];
  8 |         "video/*": string[];
  9 |     }>;
 10 |     maxSize?: number;
 11 |     aspectRatio?: "square" | "16:9";
 12 |     height?: string;
 13 |     folder?: string;
 14 | };
 15 | 
 16 | export const MediaUpload = ({
 17 |     onMediaSelect,
 18 |     accept = {
 19 |         "image/*": [".jpg", ".jpeg", ".png"],
 20 |         "video/*": [".mp4", ".mov"],
 21 |     },
 22 |     maxSize = 10 * 1024 * 1024,
 23 |     aspectRatio = "16:9",
 24 |     height,
 25 |     folder = "uploads",
 26 | }: Props) => {
 27 |     const [preview, setPreview] = useState<string | null>(null);
 28 |     const [isUploading, setIsUploading] = useState(false);
 29 |     const [error, setError] = useState<string | null>(null);
 30 | 
 31 |     const uploadToIttyBit = async (file: File) => {
 32 |         try {
 33 |             const formData = new FormData();
 34 |             formData.append("file", file);
 35 |             formData.append("folder", folder);
 36 | 
 37 |             const response = await fetch("/api/upload", {
 38 |                 method: "POST",
 39 |                 body: formData,
 40 |             });
 41 | 
 42 |             if (!response.ok) {
 43 |                 const error = await response.json();
 44 |                 throw new Error(error.message || "Failed to upload file");
 45 |             }
 46 | 
 47 |             const { data } = await response.json();
 48 |             return data.url;
 49 |         } catch (err) {
 50 |             console.error("Upload error:", err);
 51 |             throw err;
 52 |         }
 53 |     };
 54 | 
 55 |     const onDrop = useCallback(
 56 |         async (acceptedFiles: File[]) => {
 57 |             if (acceptedFiles.length === 0) return;
 58 | 
 59 |             const file = acceptedFiles[0];
 60 |             const previewUrl = URL.createObjectURL(file);
 61 |             setPreview(previewUrl);
 62 |             setIsUploading(true);
 63 |             setError(null);
 64 | 
 65 |             try {
 66 |                 const finalUrl = await uploadToIttyBit(file);
 67 |                 onMediaSelect(finalUrl);
 68 |             } catch (err) {
 69 |                 setError("Failed to upload file. Please try again.");
 70 |                 setPreview(null);
 71 |             } finally {
 72 |                 setIsUploading(false);
 73 |             }
 74 |         },
 75 |         [onMediaSelect, folder]
 76 |     );
 77 | 
 78 |     const handleRemove = useCallback(
 79 |         (e: React.MouseEvent) => {
 80 |             e.stopPropagation();
 81 |             setPreview(null);
 82 |             onMediaSelect("");
 83 |         },
 84 |         [onMediaSelect]
 85 |     );
 86 | 
 87 |     const { getRootProps, getInputProps, isDragActive } = useDropzone({
 88 |         onDrop,
 89 |         accept,
 90 |         maxSize,
 91 |         multiple: false,
 92 |     });
 93 | 
 94 |     // Helper function to get accepted file types text
 95 |     const getAcceptedTypesText = () => {
 96 |         const types: string[] = [];
 97 |         if (accept["image/*"]) types.push(".jpg or .png");
 98 |         if (accept["video/*"]) types.push(".mp4 or .mov");
 99 |         return types.join(" | ");
100 |     };
101 | 
102 |     const containerClassName = [
103 |         "border-2 border-dashed rounded-lg text-center cursor-pointer",
104 |         "transition-colors duration-200 ease-in-out",
105 |         "bg-gray-50",
106 |         isDragActive ? "border-blue-500 bg-blue-50" : "border-gray-300",
107 |         isUploading ? "opacity-50 cursor-not-allowed" : "",
108 |         aspectRatio === "16:9" && !height ? "aspect-video" : "",
109 |         aspectRatio === "square" && !height ? "aspect-square" : "",
110 |     ]
111 |         .filter(Boolean)
112 |         .join(" ");
113 | 
114 |     const containerStyle = height ? { height } : undefined;
115 | 
116 |     return (
117 |         <div className="w-full">
118 |             <div
119 |                 {...getRootProps()}
120 |                 className={containerClassName}
121 |                 style={containerStyle}
122 |             >
123 |                 <input {...getInputProps()} disabled={isUploading} />
124 | 
125 |                 {preview ? (
126 |                     <div className="relative group h-full">
127 |                         {preview.includes("video") ? (
128 |                             <video
129 |                                 src={preview}
130 |                                 className="h-full w-full mx-auto object-contain"
131 |                                 controls
132 |                             />
133 |                         ) : (
134 |                             <img
135 |                                 src={preview}
136 |                                 alt="Preview"
137 |                                 className={`h-full w-full mx-auto hover:opacity-50 transition-opacity duration-300 rounded-lg ${
138 |                                     aspectRatio === "16:9"
139 |                                         ? "object-contain"
140 |                                         : "object-cover"
141 |                                 }`}
142 |                             />
143 |                         )}
144 | 
145 |                         {/* Hover overlay with remove button */}
146 |                         <div className="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-200">
147 |                             <button
148 |                                 className="px-3 py-1 bg-red-500 text-white text-sm rounded hover:bg-red-600 transition-colors duration-300"
149 |                                 onClick={handleRemove}
150 |                             >
151 |                                 Remove
152 |                             </button>
153 |                         </div>
154 |                     </div>
155 |                 ) : (
156 |                     <div className="h-full flex flex-col items-center justify-center">
157 |                         <p className="text-gray-500 text-sm text-center">
158 |                             Click to Upload Media
159 |                         </p>
160 | 
161 |                         <p className="text-gray-400 text-xs text-center mt-1">
162 |                             {getAcceptedTypesText()}
163 |                         </p>
164 |                     </div>
165 |                 )}
166 | 
167 |                 {isUploading && (
168 |                     <div className="absolute inset-0 flex items-center justify-center">
169 |                         <span className="text-gray-500 text-sm">
170 |                             Uploading...
171 |                         </span>
172 |                     </div>
173 |                 )}
174 | 
175 |                 {error && (
176 |                     <p className="text-red-500 text-sm text-center mt-2">
177 |                         {error}
178 |                     </p>
179 |                 )}
180 |             </div>
181 |         </div>
182 |     );
183 | };
184 |

--------------------------------------------------------------------------------
/ittybitFileUpload/components/MediaGallery.tsx:
--------------------------------------------------------------------------------
  1 | import React, { useCallback, useEffect, useState } from "react";
  2 | 
  3 | interface MediaItem {
  4 |     id: string;
  5 |     url: string;
  6 |     filename: string;
  7 |     mimetype: string;
  8 |     size: number;
  9 |     created_at: string;
 10 | }
 11 | 
 12 | interface MediaResponse {
 13 |     data: MediaItem[];
 14 |     meta: {
 15 |         page: number;
 16 |         limit: number;
 17 |         total: number;
 18 |         totalPages: number;
 19 |     };
 20 | }
 21 | 
 22 | type Props = {
 23 |     onMediaSelect: (url: string) => void;
 24 |     selectedUrl?: string;
 25 |     accept?: Partial<{
 26 |         "image/*": string[];
 27 |         "video/*": string[];
 28 |     }>;
 29 | };
 30 | 
 31 | export const MediaGallery = ({
 32 |     onMediaSelect,
 33 |     selectedUrl,
 34 |     accept = {
 35 |         "image/*": [".jpg", ".jpeg", ".png"],
 36 |         "video/*": [".mp4", ".mov"],
 37 |     },
 38 | }: Props) => {
 39 |     const [media, setMedia] = useState<MediaItem[]>([]);
 40 |     const [loading, setLoading] = useState(true);
 41 |     const [error, setError] = useState<string | null>(null);
 42 |     const [page, setPage] = useState(1);
 43 |     const [totalPages, setTotalPages] = useState(1);
 44 | 
 45 |     const fetchMedia = useCallback(async (pageNum: number) => {
 46 |         try {
 47 |             setLoading(true);
 48 |             setError(null);
 49 | 
 50 |             const response = await fetch(`/api/media?page=${pageNum}&limit=20`);
 51 | 
 52 |             if (!response.ok) {
 53 |                 const errorData = await response.json();
 54 |                 throw new Error(errorData.error || "Failed to fetch media");
 55 |             }
 56 | 
 57 |             const result: MediaResponse = await response.json();
 58 |             setMedia(result.data);
 59 |             setTotalPages(result.meta.totalPages);
 60 |         } catch (err) {
 61 |             setError(
 62 |                 err instanceof Error ? err.message : "Failed to load media"
 63 |             );
 64 |         } finally {
 65 |             setLoading(false);
 66 |         }
 67 |     }, []);
 68 | 
 69 |     useEffect(() => {
 70 |         fetchMedia(page);
 71 |     }, [fetchMedia, page]);
 72 | 
 73 |     const isAcceptedFile = (mimetype: string) => {
 74 |         if (accept["image/*"] && mimetype.startsWith("image/")) return true;
 75 |         if (accept["video/*"] && mimetype.startsWith("video/")) return true;
 76 |         return false;
 77 |     };
 78 | 
 79 |     const filteredMedia = media.filter((item) => isAcceptedFile(item.mimetype));
 80 | 
 81 |     const handleMediaClick = (url: string) => {
 82 |         onMediaSelect(url);
 83 |     };
 84 | 
 85 |     const renderMediaItem = (item: MediaItem) => {
 86 |         const isSelected = selectedUrl === item.url;
 87 |         const isImage = item.mimetype.startsWith("image/");
 88 |         const isVideo = item.mimetype.startsWith("video/");
 89 | 
 90 |         return (
 91 |             <div
 92 |                 key={item.id}
 93 |                 className={`relative aspect-square rounded-lg overflow-hidden cursor-pointer border-2 transition-all duration-200 ${
 94 |                     isSelected
 95 |                         ? "border-blue-500 ring-2 ring-blue-200"
 96 |                         : "border-gray-200 hover:border-gray-300"
 97 |                 }`}
 98 |                 onClick={() => handleMediaClick(item.url)}
 99 |             >
100 |                 {isImage && (
101 |                     <img
102 |                         src={item.url}
103 |                         alt={item.filename}
104 |                         className="w-full h-full object-cover"
105 |                         loading="lazy"
106 |                     />
107 |                 )}
108 | 
109 |                 {isVideo && (
110 |                     <div className="w-full h-full bg-gray-100 flex items-center justify-center relative">
111 |                         <video
112 |                             src={item.url}
113 |                             className="w-full h-full object-cover"
114 |                             muted
115 |                         />
116 |                         <div className="absolute inset-0 flex items-center justify-center">
117 |                             <span className="text-white bg-black bg-opacity-50 rounded px-2 py-1 text-xs">
118 |                                 Video
119 |                             </span>
120 |                         </div>
121 |                     </div>
122 |                 )}
123 | 
124 |                 {isSelected && (
125 |                     <div className="absolute top-2 right-2">
126 |                         <span className="bg-blue-500 text-white text-xs px-2 py-1 rounded">
127 |                             ✓
128 |                         </span>
129 |                     </div>
130 |                 )}
131 |             </div>
132 |         );
133 |     };
134 | 
135 |     if (loading && media.length === 0) {
136 |         return (
137 |             <div className="w-full">
138 |                 <div className="flex items-center justify-center py-12">
139 |                     <span className="text-gray-500">Loading media...</span>
140 |                 </div>
141 |             </div>
142 |         );
143 |     }
144 | 
145 |     if (error) {
146 |         return (
147 |             <div className="w-full">
148 |                 <div className="text-center py-12">
149 |                     <p className="text-red-500 text-sm mb-4">{error}</p>
150 |                     <button
151 |                         onClick={() => fetchMedia(page)}
152 |                         className="px-4 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600 transition-colors"
153 |                     >
154 |                         Try Again
155 |                     </button>
156 |                 </div>
157 |             </div>
158 |         );
159 |     }
160 | 
161 |     if (filteredMedia.length === 0) {
162 |         return (
163 |             <div className="w-full">
164 |                 <div className="text-center py-12">
165 |                     <p className="text-gray-500 text-sm">
166 |                         No media files found
167 |                     </p>
168 |                 </div>
169 |             </div>
170 |         );
171 |     }
172 | 
173 |     return (
174 |         <div className="w-full">
175 |             <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-4">
176 |                 {filteredMedia.map(renderMediaItem)}
177 |             </div>
178 | 
179 |             {totalPages > 1 && (
180 |                 <div className="flex items-center justify-between mt-6">
181 |                     <button
182 |                         onClick={() => setPage((prev) => Math.max(1, prev - 1))}
183 |                         disabled={page === 1}
184 |                         className="px-4 py-2 bg-gray-100 text-gray-700 rounded-md hover:bg-gray-200 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
185 |                     >
186 |                         Previous
187 |                     </button>
188 | 
189 |                     <span className="text-sm text-gray-600">
190 |                         Page {page} of {totalPages}
191 |                     </span>
192 | 
193 |                     <button
194 |                         onClick={() =>
195 |                             setPage((prev) => Math.min(totalPages, prev + 1))
196 |                         }
197 |                         disabled={page === totalPages}
198 |                         className="px-4 py-2 bg-gray-100 text-gray-700 rounded-md hover:bg-gray-200 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
199 |                     >
200 |                         Next
201 |                     </button>
202 |                 </div>
203 |             )}
204 |         </div>
205 |     );
206 | };
207 |

--------------------------------------------------------------------------------