Initial: saas template via tAI
This commit is contained in:
Joe Wee
@@ -0,0 +1,163 @@
|
||||
import Sidebar from "@/components/Sidebar";
|
||||
import DashboardHeader from "@/components/DashboardHeader";
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { Avatar, AvatarFallback } from "@/components/ui/avatar";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import { Checkbox } from "@/components/ui/checkbox";
|
||||
import { Copy, UserPlus } from "lucide-react";
|
||||
|
||||
const notifications = [
|
||||
{ label: "Email notifications", desc: "Receive email for important updates", defaultChecked: true },
|
||||
{ label: "Push notifications", desc: "Browser push notifications", defaultChecked: true },
|
||||
{ label: "Weekly digest", desc: "Summary of activity every Monday", defaultChecked: false },
|
||||
{ label: "Marketing emails", desc: "Product news and offers", defaultChecked: false },
|
||||
];
|
||||
|
||||
const apiKeys = [
|
||||
{ name: "Production", key: "sk-prod-****-****-****-7f3a", created: "Jan 5, 2024" },
|
||||
{ name: "Development", key: "sk-dev-****-****-****-2b8c", created: "Mar 12, 2024" },
|
||||
];
|
||||
|
||||
const teamMembers = [
|
||||
{ name: "John Doe", email: "john@company.com", role: "Owner", initials: "JD" },
|
||||
{ name: "Sarah Chen", email: "sarah@company.com", role: "Admin", initials: "SC" },
|
||||
{ name: "Marcus Johnson", email: "marcus@company.com", role: "Member", initials: "MJ" },
|
||||
];
|
||||
|
||||
export default function SettingsPage() {
|
||||
return (
|
||||
<div className="flex min-h-screen bg-slate-50">
|
||||
<Sidebar activePath="/settings" />
|
||||
<div className="flex-1 lg:ml-64">
|
||||
<DashboardHeader />
|
||||
<main className="p-6 space-y-6 max-w-4xl">
|
||||
{/* Profile */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Profile</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<div className="flex items-center gap-4 mb-4">
|
||||
<Avatar className="h-16 w-16">
|
||||
<AvatarFallback className="bg-indigo-100 text-indigo-600 text-xl font-semibold">JD</AvatarFallback>
|
||||
</Avatar>
|
||||
<div>
|
||||
<p className="font-semibold">John Doe</p>
|
||||
<p className="text-sm text-slate-500">john@company.com</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<Label className="text-sm">Name</Label>
|
||||
<Input defaultValue="John Doe" className="mt-1" />
|
||||
</div>
|
||||
<div>
|
||||
<Label className="text-sm">Email</Label>
|
||||
<Input defaultValue="john@company.com" className="mt-1" />
|
||||
</div>
|
||||
</div>
|
||||
<Button className="bg-indigo-600 hover:bg-indigo-500 text-white">Save Changes</Button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Billing */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Billing</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="font-semibold">Current Plan:</span>
|
||||
<Badge className="bg-indigo-100 text-indigo-700">Pro</Badge>
|
||||
</div>
|
||||
<p className="text-sm text-slate-500 mt-1">\$29/mo billed monthly</p>
|
||||
</div>
|
||||
<Button variant="outline">Upgrade</Button>
|
||||
</div>
|
||||
<div>
|
||||
<div className="flex justify-between text-sm mb-1">
|
||||
<span className="text-slate-500">Usage this period</span>
|
||||
<span className="font-medium">75%</span>
|
||||
</div>
|
||||
<div className="h-2 bg-slate-100 rounded-full overflow-hidden">
|
||||
<div className="h-full bg-indigo-500 rounded-full" style={{ width: "75%" }} />
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Notifications */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Notifications</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
{notifications.map((n) => (
|
||||
<div key={n.label} className="flex items-start gap-3">
|
||||
<Checkbox defaultChecked={n.defaultChecked} className="mt-1" />
|
||||
<div>
|
||||
<p className="font-medium text-sm">{n.label}</p>
|
||||
<p className="text-xs text-slate-400">{n.desc}</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* API Keys */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>API Keys</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-3">
|
||||
{apiKeys.map((k) => (
|
||||
<div key={k.name} className="flex items-center justify-between p-3 bg-slate-50 rounded-lg">
|
||||
<div>
|
||||
<p className="font-medium text-sm">{k.name}</p>
|
||||
<p className="text-xs text-slate-400 font-mono mt-0.5">{k.key}</p>
|
||||
</div>
|
||||
<Button variant="ghost" size="sm">
|
||||
<Copy className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
))}
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Team */}
|
||||
<Card>
|
||||
<CardHeader className="flex flex-row items-center justify-between">
|
||||
<CardTitle>Team</CardTitle>
|
||||
<Button size="sm" className="bg-indigo-600 hover:bg-indigo-500 text-white">
|
||||
<UserPlus className="h-4 w-4 mr-2" /> Invite
|
||||
</Button>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-3">
|
||||
{teamMembers.map((m) => (
|
||||
<div key={m.email} className="flex items-center justify-between p-3 bg-slate-50 rounded-lg">
|
||||
<div className="flex items-center gap-3">
|
||||
<Avatar className="h-8 w-8">
|
||||
<AvatarFallback className="bg-indigo-100 text-indigo-600 text-xs">{m.initials}</AvatarFallback>
|
||||
</Avatar>
|
||||
<div>
|
||||
<p className="font-medium text-sm">{m.name}</p>
|
||||
<p className="text-xs text-slate-400">{m.email}</p>
|
||||
</div>
|
||||
</div>
|
||||
<Badge variant={m.role === "Owner" ? "default" : m.role === "Admin" ? "secondary" : "outline"}>
|
||||
{m.role}
|
||||
</Badge>
|
||||
</div>
|
||||
))}
|
||||
</CardContent>
|
||||
</Card>
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user