File size: 1,669 Bytes
1798222 | 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 | import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@labas/ui/components/card";
import { MaterialIcon } from "@/components/ui/MaterialIcon";
export function TipsCard() {
return (
<Card className="clay-shadow bg-[var(--pure-white)] border-2 border-[var(--oat-border)] rounded-[var(--radius-xl)] sticky top-8">
<CardHeader>
<CardTitle className="font-headline text-[var(--clay-black)]">Tips</CardTitle>
<CardDescription className="text-[var(--warm-charcoal)]">
Panduan singkat mengelola API key.
</CardDescription>
</CardHeader>
<CardContent className="space-y-4">
<div className="text-xs text-[var(--warm-charcoal)] space-y-2">
<p className="flex items-start gap-2">
<MaterialIcon name="check_circle" className="text-xs text-[var(--matcha-600)] shrink-0 mt-0.5" />
BYOK — bawa key milik Anda sendiri
</p>
<p className="flex items-start gap-2">
<MaterialIcon name="check_circle" className="text-xs text-[var(--matcha-600)] shrink-0 mt-0.5" />
Platform tidak menyimpan key di server
</p>
<p className="flex items-start gap-2">
<MaterialIcon name="check_circle" className="text-xs text-[var(--matcha-600)] shrink-0 mt-0.5" />
Key dienkripsi secara lokal di browser
</p>
<p className="flex items-start gap-2">
<MaterialIcon name="check_circle" className="text-xs text-[var(--matcha-600)] shrink-0 mt-0.5" />
Anda bisa menambahkan beberapa config
</p>
</div>
</CardContent>
</Card>
);
}
|