sapphic.moe
🏷️ Search for custom tailnet name offers with keywords.
1import type { FC } from 'react';
2import { BiListPlus, BiSolidKey } from 'react-icons/bi';
3import ActionCard from '$components/ActionCard';
4import HeaderSection from '$components/HeaderSection';
5import StatusControls from '$components/StatusControls';
6import type { Token } from '$types/tokens';
7
8interface MainScreenProps {
9 onShowWords: () => void;
10 onShowTokens: () => void;
11 status: string;
12 timer: number | null;
13 handleStart: () => void;
14 handleStop: () => void;
15 tailnetNames: string[];
16 tokens: Token[];
17}
18
19const MainScreen: FC<MainScreenProps> = ({
20 onShowWords,
21 onShowTokens,
22 status,
23 timer,
24 handleStart,
25 handleStop,
26 tailnetNames,
27 tokens,
28}) => (
29 <main className="rounded-none shadow-lg p-6 w-full h-full">
30 <HeaderSection />
31
32 <StatusControls
33 handleStart={handleStart}
34 handleStop={handleStop}
35 status={status}
36 tailnetNames={tailnetNames}
37 timer={timer}
38 redirectToTailnetList={onShowWords}
39 />
40
41 <div className="flex flex-col items-center justify-center gap-6">
42 <div className="grid grid-cols-1 md:grid-cols-2 gap-4 w-full px-4">
43 <ActionCard
44 icon={
45 <BiListPlus className="text-text" size={40} aria-hidden={true} />
46 }
47 title="Manage tailnet words"
48 subtitle="Search for specific tailnet names with keywords"
49 onClick={onShowWords}
50 />
51
52 <ActionCard
53 icon={
54 <BiSolidKey className="text-text" size={40} aria-hidden={true} />
55 }
56 title={`View tailnet offers ${tokens && tokens.length > 0 ? `(${tokens.length})` : ''}`}
57 subtitle="Claim offers to use as custom tailnet names"
58 onClick={onShowTokens}
59 />
60 </div>
61 </div>
62 </main>
63);
64
65export default MainScreen;