Komponent Kütüphanesi

PunkV Roleplay projesinde kullanılan tüm UI komponentleri, canlı örnekler ve kullanım talimatlarıyla.

Butonlar

Farklı varyantlarda ve boyutlarda buton komponentleri.

Varyantlar

<Button variant="default">Default</Button>
<Button variant="secondary">Secondary</Button>
<Button variant="outline">Outline</Button>
<Button variant="ghost">Ghost</Button>
<Button variant="link">Link</Button>
<Button variant="destructive">Destructive</Button>

Boyutlar

<Button size="sm">Small</Button>
<Button size="default">Default</Button>
<Button size="lg">Large</Button>
<Button size="icon">⭐</Button>

Kartlar

İçerik göstermek için kullanılan kart komponentleri.

Kart Başlığı

Kart açıklaması buraya gelir.

Kart içeriği buraya yazılır. Bu alan esnektir.

Vurgulu Kart

Border rengiyle vurgu yapılmış kart örneği.

Önemli içerik için kullanılabilir.

<Card>
  <CardHeader>
    <CardTitle>Kart Başlığı</CardTitle>
    <CardDescription>Kart açıklaması</CardDescription>
  </CardHeader>
  <CardContent>
    <p>Kart içeriği</p>
  </CardContent>
  <CardFooter>
    <Button>Aksiyon</Button>
  </CardFooter>
</Card>

Rozetler

Durum göstergeleri ve etiketler için kullanılan rozetler.

Default
Secondary
Outline
Destructive
<Badge>Default</Badge>
<Badge variant="secondary">Secondary</Badge>
<Badge variant="outline">Outline</Badge>
<Badge variant="destructive">Destructive</Badge>

Form Elemanları

Input, label ve diğer form komponentleri.

<div className="space-y-2">
  <Label htmlFor="email">Email</Label>
  <Input id="email" type="email" placeholder="ornek@email.com" />
</div>

<div className="flex items-center space-x-2">
  <Switch id="notifications" />
  <Label htmlFor="notifications">Bildirimleri etkinleştir</Label>
</div>

Uyarılar

Kullanıcıya bilgi vermek için kullanılan uyarı komponentleri.

<Alert>
  <Info className="h-4 w-4" />
  <AlertTitle>Bilgi</AlertTitle>
  <AlertDescription>Bilgilendirme mesajı</AlertDescription>
</Alert>

<Alert variant="destructive">
  <AlertCircle className="h-4 w-4" />
  <AlertTitle>Hata</AlertTitle>
  <AlertDescription>Hata mesajı</AlertDescription>
</Alert>

Akordeon

Gizlenebilir içerik panelleri.

<Accordion type="single" collapsible>
  <AccordionItem value="item-1">
    <AccordionTrigger>Başlık 1</AccordionTrigger>
    <AccordionContent>İçerik 1</AccordionContent>
  </AccordionItem>
  <AccordionItem value="item-2">
    <AccordionTrigger>Başlık 2</AccordionTrigger>
    <AccordionContent>İçerik 2</AccordionContent>
  </AccordionItem>
</Accordion>

Avatar

Kullanıcı profil resimleri için avatar komponentleri.

CNVGRP
<Avatar>
  <AvatarImage src="url" alt="Avatar" />
  <AvatarFallback>CN</AvatarFallback>
</Avatar>

<Avatar className="h-16 w-16">
  <AvatarFallback>RP</AvatarFallback>
</Avatar>

İlerleme Çubuğu

İşlem ilerlemesini göstermek için kullanılır.

<Progress value={33} />
<Progress value={66} />
<Progress value={100} />

Sekmeler

İçeriği organize etmek için kullanılan sekme komponentleri.

Birinci Sekme İçeriği

Bu birinci sekmenin içeriğidir.

<Tabs defaultValue="tab1">
  <TabsList>
    <TabsTrigger value="tab1">Sekme 1</TabsTrigger>
    <TabsTrigger value="tab2">Sekme 2</TabsTrigger>
  </TabsList>
  <TabsContent value="tab1">İçerik 1</TabsContent>
  <TabsContent value="tab2">İçerik 2</TabsContent>
</Tabs>

Tasarım Token'ları

Projede kullanılan renk paleti ve tasarım sistemi.

Ana Renkler

background

foreground

primary

secondary

muted

accent

destructive

card

Kullanım

Tüm renkler index.css ve tailwind.config.ts dosyalarında tanımlanmıştır. Komponentlerde doğrudan renk kullanmak yerine, bu token'ları kullanın.

// ✅ Doğru kullanım
<div className="bg-primary text-primary-foreground">

// ❌ Yanlış kullanım
<div className="bg-yellow-500 text-white">