123 lines
8.8 KiB
TypeScript
123 lines
8.8 KiB
TypeScript
"use client";
|
|
|
|
import React, { useState } from 'react';
|
|
import { Smartphone, Monitor, ChevronDown, ChevronRight, Copy, Check } from 'lucide-react';
|
|
import { cn } from '@/lib/utils';
|
|
|
|
export function MobileCookieInstructions() {
|
|
const [open, setOpen] = useState(false);
|
|
const [platform, setPlatform] = useState<'desktop' | 'android' | 'ios'>('desktop');
|
|
|
|
return (
|
|
<div className="border border-border/50 rounded-xl bg-card overflow-hidden shadow-soft">
|
|
<button
|
|
onClick={() => setOpen(!open)}
|
|
className="w-full flex items-center justify-between p-4 text-left hover:bg-muted/50 transition-colors"
|
|
>
|
|
<div className="flex items-center gap-2">
|
|
<Smartphone className="h-5 w-5 text-primary" />
|
|
<span className="font-bold text-sm text-foreground">How to get cookies on Mobile?</span>
|
|
</div>
|
|
{open ? <ChevronDown className="h-4 w-4 text-muted-foreground" /> : <ChevronRight className="h-4 w-4 text-muted-foreground" />}
|
|
</button>
|
|
|
|
{open && (
|
|
<div className="p-6 border-t border-border/10 bg-muted/20 space-y-6">
|
|
<div className="flex gap-2 overflow-x-auto pb-2 scrollbar-none">
|
|
<button
|
|
onClick={() => setPlatform('desktop')}
|
|
className={cn(
|
|
"flex items-center gap-2 px-4 py-2 rounded-xl text-xs font-bold whitespace-nowrap transition-all active:scale-95",
|
|
platform === 'desktop' ? "bg-primary/20 text-primary border border-primary/30 shadow-lg shadow-primary/10" : "bg-muted text-muted-foreground hover:bg-muted/80"
|
|
)}
|
|
>
|
|
<Monitor className="h-3.5 w-3.5" />
|
|
Desktop Sync (Best)
|
|
</button>
|
|
<button
|
|
onClick={() => setPlatform('android')}
|
|
className={cn(
|
|
"flex items-center gap-2 px-4 py-2 rounded-xl text-xs font-bold whitespace-nowrap transition-all active:scale-95",
|
|
platform === 'android' ? "bg-green-500/20 text-green-600 dark:text-green-400 border border-green-500/30 shadow-lg shadow-green-500/10" : "bg-muted text-muted-foreground hover:bg-muted/80"
|
|
)}
|
|
>
|
|
<Smartphone className="h-3.5 w-3.5" />
|
|
Android
|
|
</button>
|
|
<button
|
|
onClick={() => setPlatform('ios')}
|
|
className={cn(
|
|
"flex items-center gap-2 px-4 py-2 rounded-xl text-xs font-bold whitespace-nowrap transition-all active:scale-95",
|
|
platform === 'ios' ? "bg-blue-500/20 text-blue-600 dark:text-blue-400 border border-blue-500/30 shadow-lg shadow-blue-500/10" : "bg-muted text-muted-foreground hover:bg-muted/80"
|
|
)}
|
|
>
|
|
<Smartphone className="h-3.5 w-3.5" />
|
|
iPhone (iOS)
|
|
</button>
|
|
</div>
|
|
|
|
<div className="space-y-4 max-w-2xl">
|
|
{platform === 'desktop' && (
|
|
<div className="space-y-4 animate-in fade-in slide-in-from-left-4 duration-500">
|
|
<p className="text-sm font-medium text-muted-foreground leading-relaxed">Getting cookies on mobile is hard. The easiest way is to do it on a PC and send it to yourself.</p>
|
|
<ol className="space-y-3">
|
|
{[
|
|
{ step: 1, text: <>Install <strong className="text-foreground">Cookie-Editor</strong> extension on your PC browser (Chrome/Edge).</> },
|
|
{ step: 2, text: <>Go to <code className="bg-muted px-1.5 py-0.5 rounded text-primary">labs.google</code> (Whisk) or <code className="bg-muted px-1.5 py-0.5 rounded text-blue-500 dark:text-blue-400">facebook.com</code> (Meta) and login.</> },
|
|
{ step: 3, text: <>Open extension → Click <strong className="text-foreground">Export</strong> → <strong className="text-foreground">Export as JSON</strong>.</> },
|
|
{ step: 4, text: <>Paste into a Google Doc, Keep, Notes, or email it to yourself.</> },
|
|
{ step: 5, text: <>Open on phone and paste here.</> }
|
|
].map((item) => (
|
|
<li key={item.step} className="flex gap-3 text-sm text-foreground/80">
|
|
<span className="flex-shrink-0 w-6 h-6 rounded-full bg-primary/10 flex items-center justify-center text-[11px] font-black text-primary">{item.step}</span>
|
|
<span className="leading-tight">{item.text}</span>
|
|
</li>
|
|
))}
|
|
</ol>
|
|
</div>
|
|
)}
|
|
|
|
{platform === 'android' && (
|
|
<div className="space-y-4 animate-in fade-in slide-in-from-left-4 duration-500">
|
|
<p className="text-sm font-medium text-muted-foreground leading-relaxed">Android allows extensions via specific browsers.</p>
|
|
<ol className="space-y-3">
|
|
{[
|
|
{ step: 1, text: <>Install <strong className="text-foreground">Kiwi Browser</strong> or <strong className="text-foreground">Firefox Nightly</strong> from Play Store.</> },
|
|
{ step: 2, text: <>Open Kiwi/Firefox and install <strong className="text-foreground">Cookie-Editor</strong> from Chrome Web Store.</> },
|
|
{ step: 3, text: <>Login to the service (Whisk/Facebook).</> },
|
|
{ step: 4, text: <>Tap menu → Cookie-Editor → Export JSON.</> }
|
|
].map((item) => (
|
|
<li key={item.step} className="flex gap-3 text-sm text-foreground/80">
|
|
<span className="flex-shrink-0 w-6 h-6 rounded-full bg-primary/10 flex items-center justify-center text-[11px] font-black text-primary">{item.step}</span>
|
|
<span className="leading-tight">{item.text}</span>
|
|
</li>
|
|
))}
|
|
</ol>
|
|
</div>
|
|
)}
|
|
|
|
{platform === 'ios' && (
|
|
<div className="space-y-4 animate-in fade-in slide-in-from-left-4 duration-500">
|
|
<p className="text-sm font-medium text-muted-foreground leading-relaxed">iPhone is restrictive. Syncing from Desktop is recommended.</p>
|
|
<div className="p-4 bg-amber-500/5 border border-amber-500/20 rounded-2xl text-xs text-amber-700 dark:text-amber-200/80 leading-relaxed shadow-sm">
|
|
<strong className="text-amber-800 dark:text-amber-100 block mb-1">Alternative:</strong> Use "Alook Browser" app (Paid) which acts like a desktop browser with developer tools.
|
|
</div>
|
|
<ol className="space-y-3">
|
|
{[
|
|
{ step: 1, text: <>Use <strong className="text-foreground">Method 1 (Desktop Sync)</strong> - it's much faster.</> },
|
|
{ step: 2, text: <>Or access this site on your Mac/PC and configure it there first. Settings are saved to the browser.</> }
|
|
].map((item) => (
|
|
<li key={item.step} className="flex gap-3 text-sm text-foreground/80">
|
|
<span className="flex-shrink-0 w-6 h-6 rounded-full bg-primary/10 flex items-center justify-center text-[11px] font-black text-primary">{item.step}</span>
|
|
<span className="leading-tight">{item.text}</span>
|
|
</li>
|
|
))}
|
|
</ol>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|