Component Library

Achidemy projesinde 56+ paylaşılan React bileşeni bulunur. Bu bileşenler app/components/ klasöründe organize edilmiştir ve Radix UI, Tailwind CSS ve custom utility fonksiyonları kullanır.

Component Kategorileri

1. UI Primitives (app/components/ui/)

Radix UI tabanlı temel bileşenler:

Component	Dosya	Açıklama
Button	ui/button.tsx	Çoklu variant ve size desteği (default, destructive, outline, secondary, ghost, link)
Input	ui/input.tsx	Form input alanı
Textarea	ui/textarea.tsx	Çok satırlı metin alanı
Select	ui/select.tsx	Dropdown seçim bileşeni (Radix UI)
Dialog	ui/dialog.tsx	Modal dialog (Radix UI)
Tabs	ui/tabs.tsx	Sekme bileşeni (Radix UI)
Accordion	ui/accordion.tsx	Açılır/kapanır bölüm (Radix UI)
Checkbox	ui/checkbox.tsx	Checkbox input
Switch	ui/switch.tsx	Toggle switch
Badge	ui/badge.tsx	Etiket/badge bileşeni
Slider	ui/slider.tsx	Slider input
Pagination	ui/pagination.tsx	Sayfalama bileşeni
Carousel	ui/carousel.tsx	Carousel/slider bileşeni
Code Editor	ui/code-editor.tsx	Monaco Editor wrapper

Kullanım Örneği:

import { Button } from '~/components/ui/button';
import { Input } from '~/components/ui/input';
import { Dialog, DialogContent, DialogTrigger } from '~/components/ui/dialog';

<Button variant="default" size="lg">
  Kaydet
</Button>

<Input type="email" placeholder="E-posta" />

<Dialog>
  <DialogTrigger>Aç</DialogTrigger>
  <DialogContent>
    İçerik
  </DialogContent>
</Dialog>

---

2. Instructor Components (app/components/instructor/)

Eğitmen paneli için özel bileşenler:

Component	Açıklama
InstructorSidebar	Eğitmen paneli yan menü (kurslar, ödemeler, mesajlar, performans)
CourseEditSidebar	Kurs düzenleme adımları sidebar’ı
QuizAndCodingEditor	Quiz ve kodlama egzersizi editörü (geniş UI, Udemy tarzı)
QuizEditorModal	Quiz düzenleme modal’ı (soru ekleme/düzenleme)
CodeEditor	Monaco Editor tabanlı kod editörü
TestCaseManager	Test case yönetimi (coding exercises için)
RichTextEditor	TipTap tabanlı zengin metin editörü
CourseGoalsEditor	Kurs hedefleri editörü (dnd-kit ile sürükle-bırak)
DirectVideoUploader	Bunny TUS protokolü ile doğrudan video yükleme (resumable upload)
PerformanceReviewsCharts	Recharts ile performans grafikleri
VideoTranscodingStatusBar	Bunny video işleme durumu göstergesi

Kullanım:

import InstructorSidebar from '~/components/instructor/InstructorSidebar';
import { QuizAndCodingEditor } from '~/components/instructor/QuizAndCodingEditor';

<InstructorSidebar />

---

3. Learning Components (app/components/learn/)

Öğrenci öğrenme deneyimi bileşenleri:

Component	Açıklama
CodingWorkspace	Kodlama egzersizi çalışma alanı (Monaco Editor + test sonuçları)
QuizPlayer	Quiz oynatıcı (soru-cevap, çoktan seçmeli)

Kullanım:

import { CodingWorkspace } from '~/components/learn/CodingWorkspace';

<CodingWorkspace
  exercise={exercise}
  courseId={courseId}
  onComplete={() => {/* egzersiz tamamlandı */}}
/>

---

4. Course Components (app/components/courses/ ve app/components/)

Kurs sayfaları ve keşfet sayfaları için bileşenler:

Component	Dosya	Açıklama
CourseCard	app/components/CourseCard.tsx	Kurs kartı (thumbnail, başlık, fiyat, rating); grid görünümü.
CourseHorizontalCard	app/components/CourseHorizontalCard.tsx	Yatay kurs kartı; liste görünümü ve öne çıkan carousel.
CourseSelection	app/components/CourseSelection.tsx	Kategori bazlı kurs seçimi (tabs ile).
FilterSidebar	app/components/courses/FilterSidebar.tsx	Kurs filtreleme sidebar’ı (seviye, dil, süre, fiyat, puan).
BeginnerRecommendationsSection	app/components/courses/BeginnerRecommendationsSection.tsx	Başlangıç için önerilen kurslar (Popüler / Yeni sekmeleri, grid).
FeaturedCoursesSection	app/components/courses/FeaturedCoursesSection.tsx	Öne çıkan kurslar carousel (1 kart/slide, yatay kart, klavye desteği).
PopularTopicsSection	app/components/courses/PopularTopicsSection.tsx	Popüler konular (5x2 grid, kurs sayısına göre sıralı, konu linkleri).
PopularInstructorsSection	app/components/courses/PopularInstructorsSection.tsx	Popüler eğitmenler (kartlar, public profile link, öğrenci sayısı, eğitmen puanı).
CourseReviews	app/components/courses/CourseReviews.tsx	Kurs yorumları listesi.
CourseReviewModal	app/components/courses/CourseReviewModal.tsx	Yorum yazma modal’ı.
CourseNotes	app/components/courses/CourseNotes.tsx	Kurs notları bileşeni.
CourseQA	app/components/courses/CourseQA.tsx	Soru-cevap bileşeni (video timestamp ile).
CourseSkeleton	app/components/courses/CourseSkeleton.tsx	Loading skeleton (kurs kartları için).

Keşfet bölümleri (BeginnerRecommendations, Featured, PopularTopics, PopularInstructors) hem courses.index hem courses.all route’larında “Başlangıç için önerilen kurslar”ın altında sırayla kullanılır. Detay için Kurs Keşfet ve Arama sayfasına bakın.

---

5. Pricing Components (app/components/pricing/)

Fiyatlandırma bileşenleri:

Component	Açıklama
PricingPlans	Abonelik planları (aylık/yıllık)
PricingFaq	Fiyatlandırma SSS

---

6. Teaching Components (app/components/teaching/)

Eğitmen ol sayfası bileşenleri:

Component	Açıklama
InstructorHero	Hero section
StepsSection	Adım adım rehber
ReasonsSection	Neden eğitmen ol? bölümü
StatsBar	İstatistik çubuğu
TestimonialCarousel	Müşteri yorumları carousel
InstructorSupport	Destek bölümü

---

7. Messaging Components (app/components/messages/)

Mesajlaşma bileşenleri:

Component	Açıklama
ChatInput	Mesaj giriş alanı (metin, görsel yükleme)

---

8. Shared Components

Genel kullanım bileşenleri:

Component	Açıklama
Navbar	Ana navigasyon çubuğu (dil seçimi, Algolia anlık arama, kullanıcı menüsü, kategori bar, sepet badge + hover dropdown). Misafir kullanıcı sepet sayısını guest_cart çerezinden okur; “Giriş Yap ve Öde” CTA’sı /:lang/login?intent=checkout ile gelir ve girişten sonra /:lang/cart’a dönerek merge tetiklenir. Detay: Kurs Keşfet ve Arama
Footer	Footer bileşeni (sosyal medya, dil seçici, linkler)
NotificationBell	Bildirim zili dropdown (okunmamış bildirimler, gerçek zamanlı güncelleme)
ErrorBoundary	React Error Boundary (hata yakalama)
CookieConsent	Çerez onayı bileşeni
HeroCarousel	Ana sayfa hero carousel (Embla Carousel)
CourseSelection	Kategori bazlı kurs seçimi (tabs ile)
SkillsSection	Yetenekler bölümü (carousel)
AISection	AI özellikleri tanıtım bölümü
PlansSection	Planlar bölümü
SkeletonLoaders	Loading skeleton bileşenleri

---

Component Patterns

1. Variant Pattern (CVA)

Kullanım: class-variance-authority ile variant yönetimi

ui/button.tsx

const buttonVariants = cva(
  "base-classes",
  {
    variants: {
      variant: {
        default: "...",
        destructive: "...",
      },
      size: {
        default: "...",
        sm: "...",
      },
    },
  }
);

<Button variant="destructive" size="sm">Sil</Button>

2. Radix UI Composition

Kullanım: Radix UI primitives ile erişilebilir bileşenler

import * as Dialog from '@radix-ui/react-dialog';

<Dialog.Root>
  <Dialog.Trigger>...</Dialog.Trigger>
  <Dialog.Content>...</Dialog.Content>
</Dialog.Root>

3. i18n Entegrasyonu

Kullanım: react-i18next ile çoklu dil desteği

import { useTranslation } from 'react-i18next';

function MyComponent() {
  const { t } = useTranslation();
  return <h1>{t('common.welcome')}</h1>;
}

4. Tailwind CSS Styling

Kullanım: Utility-first CSS ile stil yönetimi

<div className="flex items-center gap-2 p-4 bg-white rounded-lg shadow-md">
  Content
</div>

---

Component Best Practices

1. Props Interface

interface ComponentProps {
  title: string;
  description?: string;
  onAction?: () => void;
}

export default function Component({ title, description, onAction }: ComponentProps) {
  // ...
}

2. Default Props

Component.defaultProps = {
  description: '',
  onAction: () => {},
};

3. Event Handlers

Naming: handle prefix kullanılır

const handleClick = () => {
  // ...
};

const handleSubmit = (e: React.FormEvent) => {
  e.preventDefault();
  // ...
};

4. Accessibility

• ARIA labels: aria-label, aria-describedby
• Keyboard navigation: tabIndex, onKeyDown
• Focus management: focus-visible states

---

İlgili Dosyalar

• app/components/ui/* — UI primitives
• app/components/instructor/* — Eğitmen bileşenleri
• app/components/learn/* — Öğrenme bileşenleri
• app/components/courses/* — Kurs bileşenleri
• app/lib/utils.ts — cn fonksiyonu (className merge)

Shadcn UI geliştirmeleri ve daha fazla bilgi için: Shadcn UI Dokümantasyonu
Radix UI geliştirmeleri ve daha fazla bilgi için: Radix UI Dokümantasyonu
Tailwind CSS geliştirmeleri ve daha fazla bilgi için: Tailwind CSS Dokümantasyonu