ATlast — you'll never need to find your favorites on another platform again. Find your favs in the ATmosphere.
byarielm.fyi
atproto
1import { Settings } from "lucide-react";
2import { useRef } from "react";
3import PlatformSelector from "../components/PlatformSelector";
4import SetupPrompt from "./common/SetupPrompt";
5import Section from "./common/Section";
6
7interface UploadTabProps {
8 wizardCompleted: boolean;
9 onShowWizard: () => void;
10 onPlatformSelect: (platform: string) => void;
11 onFileUpload: (
12 e: React.ChangeEvent<HTMLInputElement>,
13 platform: string,
14 ) => void;
15 selectedPlatform: string;
16}
17
18export default function UploadTab({
19 wizardCompleted,
20 onShowWizard,
21 onPlatformSelect,
22 onFileUpload,
23 selectedPlatform,
24}: UploadTabProps) {
25 const fileInputRef = useRef<HTMLInputElement>(null);
26
27 const handlePlatformSelect = (platform: string) => {
28 onPlatformSelect(platform);
29 fileInputRef.current?.click();
30 };
31
32 return (
33 <Section
34 title="Upload Following Data"
35 description="Find your people on the ATmosphere"
36 action={
37 <SetupPrompt
38 variant="button"
39 isCompleted={wizardCompleted}
40 onShowWizard={onShowWizard}
41 />
42 }
43 >
44 <div className="space-y-3">
45 <PlatformSelector onPlatformSelect={handlePlatformSelect} />
46
47 <input
48 id="file-upload"
49 ref={fileInputRef}
50 type="file"
51 accept=".txt,.json,.html,.zip"
52 onChange={(e) => onFileUpload(e, selectedPlatform || "tiktok")}
53 className="sr-only"
54 aria-label="Upload following data file"
55 />
56 </div>
57 </Section>
58 );
59}