Spaces:
Sleeping
Sleeping
File size: 4,095 Bytes
bea55e2 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 | 'use client';
import { useEffect, useState } from 'react';
import { useRouter } from 'next/navigation';
import Link from 'next/link';
import { X, Package, Video, Radio, BookOpen, Sparkles, ShoppingBag, ChevronLeft } from 'lucide-react';
import { useAuth } from '@/components/auth-provider';
import { PageSkeleton } from '@/components/page-skeleton';
import { API_BASE } from '@/lib/api';
export default function CreatePage() {
const { user, loading: authLoading } = useAuth();
const router = useRouter();
const [isSeller, setIsSeller] = useState(false);
const [checking, setChecking] = useState(true);
useEffect(() => {
if (!authLoading && !user) {
router.push('/login?next=/create');
return;
}
if (user) {
(async () => {
try {
const resp = await fetch(`${API_BASE}/api/seller-profile`, {
credentials: 'include',
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ op: 'get' }),
});
if (resp.ok) {
const data = await resp.json();
if (data.success && data.seller) {
setIsSeller(true);
}
}
} catch {}
setChecking(false);
})();
}
}, [user, authLoading, router]);
if (authLoading || checking) {
return (
<PageSkeleton variant="create" />
);
}
// Buyer create options (limited)
const buyerOptions = [
{ href: '/ai-chat', icon: Sparkles, label: 'Ask AI', desc: 'Find products with AI' },
{ href: '/become-seller', icon: Package, label: 'Become a Seller', desc: 'Start your store' },
];
// Seller create options (full)
const sellerOptions = [
{ href: '/seller/products', icon: Package, label: 'Add Product', desc: 'List a new product' },
{ href: '/seller/videos', icon: Video, label: 'Post Video', desc: 'Showcase a product' },
{ href: '/seller/go-live', icon: Radio, label: 'Go Live', desc: 'Start a live session' },
{ href: '/seller/stories', icon: BookOpen, label: 'Post Story', desc: '24h story post' },
];
const options = isSeller ? sellerOptions : buyerOptions;
return (
<div className="ig-container min-h-screen ig-topbar-offset">
{/* Top bar */}
<div className="fx-topbar ig-topbar">
<button onClick={() => router.back()} className="ig-icon-btn" aria-label="Back">
<ChevronLeft className="w-6 h-6" />
</button>
<h1 className="text-base font-semibold flex-1 ml-2">Create</h1>
<button onClick={() => router.push('/')} className="ig-icon-btn" aria-label="Close">
<X className="w-5 h-5" />
</button>
</div>
<div className="p-4 space-y-2">
{!isSeller && (
<div className="bg-white/5 rounded-md p-4 mb-4 text-center">
<ShoppingBag className="w-8 h-8 mx-auto text-slate-500 mb-2" />
<p className="text-sm text-slate-400 mb-3">
Want to sell? Become a seller to unlock product posting, live streaming, and more.
</p>
<Link
href="/become-seller"
className="inline-block bg-indigo-600 text-white text-sm font-semibold px-6 py-2.5 rounded-md"
>
Become a Seller
</Link>
</div>
)}
{options.map((opt) => {
const Icon = opt.icon;
return (
<Link
key={opt.href}
href={opt.href}
className="flex items-center gap-3 p-3 rounded-md border border-white/10 hover:bg-white/5 transition-colors"
>
<div className="w-10 h-10 rounded-md bg-white/5 flex items-center justify-center shrink-0">
<Icon className="w-5 h-5 text-white" />
</div>
<div className="flex-1">
<div className="font-semibold text-sm">{opt.label}</div>
<div className="text-xs text-slate-400">{opt.desc}</div>
</div>
</Link>
);
})}
</div>
</div>
);
}
|