ATlast — you'll never need to find your favorites on another platform again. Find your favs in the ATmosphere.
byarielm.fyi
atproto
1import { PLATFORMS } from "../config/platforms";
2
3interface PlatformSelectorProps {
4 onPlatformSelect: (platform: string) => void;
5}
6
7export default function PlatformSelector({
8 onPlatformSelect,
9}: PlatformSelectorProps) {
10 return (
11 <div className="grid grid-cols-2 md:grid-cols-4 gap-3">
12 {Object.entries(PLATFORMS).map(([key, p]) => {
13 const PlatformIcon = p.icon;
14 const isEnabled = p.enabled;
15 return (
16 <button
17 key={key}
18 onClick={() => isEnabled && onPlatformSelect(key)}
19 disabled={!isEnabled}
20 className={`relative p-4 rounded-xl border-2 transition-all ${
21 isEnabled
22 ? "bg-purple-100/20 dark:bg-slate-900/50 hover:bg-purple-100/40 dark:hover:bg-slate-900/70 border-orange-500/50 dark:border-amber-400/50 hover:border-amber-400 dark:hover:border-amber-400/80 hover:shadow-lg cursor-pointer"
23 : "border-cyan-500/30 dark:border-purple-500/30 opacity-50 cursor-not-allowed bg-slate-100/30 dark:bg-slate-900/30"
24 }`}
25 title={isEnabled ? `Upload ${p.name} data` : "Coming soon"}
26 >
27 <PlatformIcon
28 className={`w-6 h-6 mx-auto mb-2 ${isEnabled ? "text-purple-750 dark:text-cyan-250" : "text-purple-750/50 dark:text-cyan-250/50"}`}
29 />
30 <div className="text-sm font-medium text-center text-purple-900 dark:text-cyan-100">
31 {p.name}
32 </div>
33 {!isEnabled && (
34 <div className="absolute top-2 right-2">
35 <span className="text-xs bg-purple-100 dark:bg-cyan-900 text-purple-600 dark:text-cyan-400 px-2 py-0.5 rounded-full">
36 Soon
37 </span>
38 </div>
39 )}
40 </button>
41 );
42 })}
43 </div>
44 );
45}