mirror of
https://github.com/temetro/temetro.git
synced 2026-08-03 07:30:56 +00:00
Khalid Abdi
97bf9ed8cc
- Linear-inspired dark theme (app/globals.css), forced dark in layout
- Clinical sidebar (components/sidebar-02) with temetro brand
- AI chat UI (components/chat): Cursor-style input, UI-only mock replies
- Settings page (components/settings): Polar-style tabs/sections, UI only
- Route-group app shell: app/(app)/{layout,page,settings}
- shadcn (Base UI) + ai-elements component libraries
- CLAUDE.md: architecture notes + per-folder commit policy
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
64 lines
2.0 KiB
TypeScript
64 lines
2.0 KiB
TypeScript
"use client";
|
|
|
|
import { cn } from "@/lib/utils";
|
|
import { Badge } from "@/components/ui/badge";
|
|
import { Button } from "@/components/ui/button";
|
|
import {
|
|
SettingsCard,
|
|
SettingsSection,
|
|
whiteButton,
|
|
} from "@/components/settings/settings-parts";
|
|
|
|
export function BillingPanel() {
|
|
return (
|
|
<>
|
|
<SettingsCard className="flex flex-col gap-6 p-6 sm:flex-row sm:items-start sm:justify-between">
|
|
<div className="space-y-4">
|
|
<div className="flex items-center gap-3">
|
|
<h3 className="text-xl font-semibold tracking-tight">Early Member</h3>
|
|
<Badge className="bg-emerald-500/15 text-emerald-400">Active</Badge>
|
|
</div>
|
|
<p className="text-sm text-muted-foreground">
|
|
For our founding community of early members.
|
|
</p>
|
|
<Button className={cn("rounded-lg", whiteButton)}>Change plan</Button>
|
|
</div>
|
|
<div className="sm:text-right">
|
|
<p className="text-3xl font-semibold tracking-tight">Free</p>
|
|
<p className="text-sm text-muted-foreground">
|
|
4.00% + $0.40 per transaction
|
|
</p>
|
|
</div>
|
|
</SettingsCard>
|
|
|
|
<SettingsSection
|
|
action={
|
|
<Button className="rounded-lg" variant="secondary">
|
|
Add payment method
|
|
</Button>
|
|
}
|
|
description="Cards used to pay for your temetro subscription"
|
|
title="Payment methods"
|
|
>
|
|
<SettingsCard className="flex items-center justify-center p-12">
|
|
<p className="text-sm text-muted-foreground">No payment methods on file</p>
|
|
</SettingsCard>
|
|
</SettingsSection>
|
|
|
|
<SettingsSection
|
|
action={
|
|
<Button className="rounded-lg" variant="secondary">
|
|
Edit
|
|
</Button>
|
|
}
|
|
description="Used on invoices for your temetro subscription"
|
|
title="Billing address"
|
|
>
|
|
<SettingsCard className="p-5">
|
|
<p className="text-sm">khalid</p>
|
|
</SettingsCard>
|
|
</SettingsSection>
|
|
</>
|
|
);
|
|
}
|