import { useState } from "react";
const chapters = [
{
id: 1,
emoji: " ",
title: "Python'a Giriş",
color: "from-green-500 to-emerald-600",
light: "bg-green-50 border-green-200",
badge: "bg-green-100 text-green-700",
sections: [
{
title: "Python Nedir?",
content: [
{ type: "text", value: "Python, 1991 yılında Guido van Rossum tarafından geliştiril
{ type: "list", items: [
" Açık kaynaklı ve ücretsiz",
" Platform bağımsız (Windows, Mac, Linux)",
" Geniş kütüphane desteği",
" Web, veri bilimi, yapay zeka, otomasyon için ideal",
]},
]
},
{
title: "İlk Program",
content: [
{ type: "text", value: "Python'da ekrana çıktı vermek için print() fonksiyonu kulla
{ type: "code", value: `print("Merhaba, Dünya!")
print("Python öğreniyorum!")` },
{ type: "tip", value: " Python dosyaları .py uzantısıyla kaydedilir." }
]
},
]
},
{
id: 2,
emoji: " ",
title: "Değişkenler & Veri Tipleri",
color: "from-blue-500 to-indigo-600",
light: "bg-blue-50 border-blue-200",
badge: "bg-blue-100 text-blue-700",
sections: [
{
title: "Değişken Tanımlama",
content: [
{ type: "text", value: "Python'da değişken tanımlarken tür belirtmeye gerek yoktur.
{ type: "code", value: `isim = "Ahmet" # str (metin)
yas = 25 # int (tam sayı)
boy = 1.78 # float (ondalıklı)
ogrenci = True # bool (mantıksal)` },
]
},
{
title: "Temel Veri Tipleri",
content: [
{ type: "table", headers: ["Tip", "Örnek", "Açıklama"], rows: [
["str", '"Merhaba"', "Metin"],
["int", "42", "Tam sayı"],
["float", "3.14", "Ondalıklı sayı"],
["bool", "True / False", "Mantıksal"],
["list", "[1, 2, 3]", "Liste"],
["dict", '{"ad": "Ali"}', "Sözlük"],
]},
{ type: "code", value: `# Tip öğrenmek için:
x = 3.14
print(type(x)) # <class 'float'>` },
]
},
{
title: "String İşlemleri",
content: [
{ type: "code", value: `metin = "Python"
print(len(metin)) # 6 - uzunluk
print([Link]()) # PYTHON
print([Link]()) # python
print(metin[0]) # P - ilk karakter
print(metin[1:4]) # yth - dilimleme
# f-string ile formatlama
ad = "Ayşe"
print(f"Merhaba, {ad}!") # Merhaba, Ayşe!` },
{ type: "tip", value: " String'ler değiştirilemez (immutable). Değiştirmek için y
]
}
]
},
{
id: 3,
emoji: " ",
title: "Operatörler",
color: "from-purple-500 to-violet-600",
light: "bg-purple-50 border-purple-200",
badge: "bg-purple-100 text-purple-700",
sections: [
{
title: "Aritmetik Operatörler",
content: [
{ type: "code", value: `a, b = 10, 3
print(a + b) # 13 → Toplama
print(a - b) # 7 → Çıkarma
print(a * b) # 30 → Çarpma
print(a / b) # 3.33 → Bölme
print(a // b) # 3 → Tam bölme
print(a % b) # 1 → Kalan (modül)
print(a ** b) # 1000 → Üs alma` },
]
},
{
title: "Karşılaştırma & Mantıksal",
content: [
{ type: "code", value: `# Karşılaştırma
print(5 > 3) # True
print(5 == 5) # True
print(5 != 3) # True
# Mantıksal
print(True and False) # False
print(True or False) # True
print(not True) # False` },
]
}
]
},
{
id: 4,
emoji: " ",
title: "Koşul İfadeleri",
color: "from-orange-500 to-amber-600",
light: "bg-orange-50 border-orange-200",
badge: "bg-orange-100 text-orange-700",
sections: [
{
title: "if / elif / else",
content: [
{ type: "text", value: "Python'da girintileme (indentation) zorunludur. Bloklar 4 b
{ type: "code", value: `yas = 20
if yas < 18:
print("Çocuk")
elif yas < 65:
print("Yetişkin")
else:
print("Yaşlı")
# Tek satır (ternary)
durum = "Geçti" if yas >= 18 else "Kaldı"` },
{ type: "tip", value: " Python'da { } kullanılmaz, girintileme zorunludur!" }
]
}
]
},
{
id: 5,
emoji: " ",
title: "Döngüler",
color: "from-teal-500 to-cyan-600",
light: "bg-teal-50 border-teal-200",
badge: "bg-teal-100 text-teal-700",
sections: [
{
title: "for Döngüsü",
content: [
{ type: "code", value: `# range() ile
for i in range(5):
print(i) # 0, 1, 2, 3, 4
# Liste üzerinde
meyveler = ["elma", "armut", "kiraz"]
for meyve in meyveler:
print(meyve)
# enumerate ile indeks almak
for i, meyve in enumerate(meyveler):
print(f"{i}: {meyve}")` },
]
},
{
title: "while Döngüsü",
content: [
{ type: "code", value: `sayac = 0
while sayac < 5:
print(sayac)
sayac += 1
# Önemli anahtar kelimeler
for i in range(10):
if i == 3:
continue # Bu adımı atla
if i == 7:
break # Döngüyü bitir
print(i)` },
{ type: "tip", value: " Sonsuz döngüden kaçınmak için while koşulunun bir noktada
]
}
]
},
{
id: 6,
emoji: " ",
title: "Listeler & Sözlükler",
color: "from-pink-500 to-rose-600",
light: "bg-pink-50 border-pink-200",
badge: "bg-pink-100 text-pink-700",
sections: [
{
title: "Listeler (List)",
content: [
{ type: "code", value: `sayilar = [1, 2, 3, 4, 5]
[Link](6) # Sona ekle
[Link](0, 0) # Başa ekle
[Link](3) # Değere göre sil
[Link]() # Son elemanı sil
print(len(sayilar)) # Uzunluk
# List comprehension
kareler = [x**2 for x in range(6)]
# [0, 1, 4, 9, 16, 25]` },
]
},
{
title: "Sözlükler (Dict)",
content: [
{ type: "code", value: `kisi = {
"ad": "Mehmet",
"yas": 30,
"sehir": "İstanbul"
}
print(kisi["ad"]) # Mehmet
kisi["email"] = "m@[Link]" # Ekle/güncelle
del kisi["sehir"] # Sil
# Güvenli erişim
print([Link]("telefon", "Yok")) # Yok
# Döngü
for anahtar, deger in [Link]():
print(f"{anahtar}: {deger}")` },
]
}
]
},
{
id: 7,
emoji: " ",
title: "Fonksiyonlar",
color: "from-red-500 to-orange-600",
light: "bg-red-50 border-red-200",
badge: "bg-red-100 text-red-700",
sections: [
{
title: "Fonksiyon Tanımlama",
content: [
{ type: "code", value: `def selamla(isim):
return f"Merhaba, {isim}!"
print(selamla("Zeynep")) # Merhaba, Zeynep!
# Varsayılan parametre
def topla(a, b=0):
return a + b
print(topla(5)) # 5
print(topla(5, 3)) # 8` },
]
},
{
title: "Lambda & *args",
content: [
{ type: "code", value: `# Lambda (isimsiz) fonksiyon
kare = lambda x: x ** 2
print(kare(4)) # 16
# Birden fazla argüman
def toplam(*sayilar):
return sum(sayilar)
print(toplam(1, 2, 3, 4)) # 10
# Keyword argümanlar
def bilgi(**kwargs):
for k, v in [Link]():
print(f"{k} = {v}")
bilgi(ad="Ali", yas=25)` },
{ type: "tip", value: " Fonksiyonlar da birer nesnedir. Başka fonksiyonlara param
]
}
]
},
{
id: 8,
emoji: " ",
title: "Sınıflar (OOP)",
color: "from-slate-600 to-gray-700",
light: "bg-slate-50 border-slate-200",
badge: "bg-slate-100 text-slate-700",
sections: [
{
title: "Sınıf Tanımlama",
content: [
{ type: "code", value: `class Araba:
def __init__(self, marka, model):
[Link] = marka
[Link] = model
[Link] = 0
def hizlan(self, miktar):
[Link] += miktar
print(f"Hız: {[Link]} km/h")
def __str__(self):
return f"{[Link]} {[Link]}"
# Kullanım
araba = Araba("Toyota", "Corolla")
[Link](60)
print(araba) # Toyota Corolla` },
]
},
{
title: "Kalıtım (Inheritance)",
content: [
{ type: "code", value: `class ElektrikliAraba(Araba):
def __init__(self, marka, model, batarya):
super().__init__(marka, model)
[Link] = batarya
def sarj_et(self):
print(f"{[Link]} kWh şarj ediliyor...")
tesla = ElektrikliAraba("Tesla", "Model 3", 75)
[Link](100) # Üst sınıftan miras
tesla.sarj_et()` },
{ type: "tip", value: " OOP'nin 4 temel ilkesi: Kapsülleme, Kalıtım, Çok Biçimlil
]
}
]
},
];
const CodeBlock = ({ code }) => (
<pre className="bg-gray-900 text-green-300 rounded-xl p-4 text-sm overflow-x-auto font-mono
{code}
</pre>
);
const TipBlock = ({ text }) => (
<div className="bg-yellow-50 border-l-4 border-yellow-400 rounded-r-xl p-3 text-sm text-yel
{text}
</div>
);
const TableBlock = ({ headers, rows }) => (
<div className="overflow-x-auto">
<table className="w-full text-sm border-collapse">
<thead>
<tr className="bg-gray-100">
{[Link]((h, i) => (
<th key={i} className="text-left p-2 px-3 font-semibold text-gray-700 border bord
))}
</tr>
</thead>
<tbody>
{[Link]((row, i) => (
<tr key={i} className={i % 2 === 0 ? "bg-white" : "bg-gray-50"}>
{[Link]((cell, j) => (
<td key={j} className="p-2 px-3 border border-gray-200 font-mono text-xs">{cell
))}
</tr>
))}
</tbody>
</table>
</div>
);
export default function PythonNotes() {
const [active, setActive] = useState(0);
const chapter = chapters[active];
return (
<div className="min-h-screen bg-gradient-to-br from-gray-50 to-gray-100 flex flex-col" st
{/* Header */}
<div className={`bg-gradient-to-r ${[Link]} text-white p-5 shadow-lg`}>
<div className="max-w-4xl mx-auto">
<div className="flex items-center gap-3 mb-1">
<span className="text-3xl">{[Link]}</span>
<div>
<p className="text-white/70 text-xs uppercase tracking-widest font-medium">Pyth
<h1 className="text-xl font-bold">{[Link]}</h1>
</div>
</div>
</div>
</div>
<div className="max-w-4xl mx-auto w-full flex flex-col md:flex-row gap-4 p-4 flex-1">
{/* Sidebar */}
<div className="md:w-56 flex-shrink-0">
<div className="bg-white rounded-2xl shadow-sm border border-gray-200 overflow-hidd
<div className="p-3 bg-gray-50 border-b border-gray-100">
<p className="text-xs font-semibold text-gray-500 uppercase tracking-wider">Böl
</div>
{[Link]((ch, i) => (
<button
key={[Link]}
onClick={() => setActive(i)}
className={`w-full text-left px-3 py-2.5 flex items-center gap-2.5 text-sm tr
active === i
? `bg-gradient-to-r ${[Link]} text-white font-semibold`
: "text-gray-600 hover:bg-gray-50"
}`}
>
<span className="text-base">{[Link]}</span>
<span className="leading-tight">{[Link]}</span>
</button>
))}
</div>
</div>
{/* Content */}
<div className="flex-1 space-y-4">
{[Link]((section, si) => (
<div key={si} className="bg-white rounded-2xl shadow-sm border border-gray-200 ov
<div className={`px-5 py-3 border-b ${[Link]}`}>
<h2 className="font-bold text-gray-800 flex items-center gap-2">
<span className={`text-xs px-2 py-0.5 rounded-full font-mono ${[Link]
{String(si + 1).padStart(2, "0")}
</span>
{[Link]}
</h2>
</div>
<div className="p-5 space-y-3">
{[Link]((item, ii) => {
if ([Link] === "text") return <p key={ii} className="text-gray-700 text-
if ([Link] === "code") return <CodeBlock key={ii} code={[Link]} />;
if ([Link] === "tip") return <TipBlock key={ii} text={[Link]} />;
if ([Link] === "table") return <TableBlock key={ii} {...item} />;
if ([Link] === "list") return (
<ul key={ii} className="space-y-1">
{[Link]((li, j) => (
<li key={j} className="text-sm text-gray-700 flex items-start gap-2">
))}
</ul>
);
return null;
})}
</div>
</div>
))}
{/* Navigation */}
<div className="flex justify-between gap-3">
<button
onClick={() => setActive([Link](0, active - 1))}
disabled={active === 0}
className="flex-1 py-3 px-4 rounded-xl border-2 border-gray-200 text-sm font-me
>
← Önceki
</button>
<div className="flex items-center gap-1">
{[Link]((_, i) => (
<div key={i} onClick={() => setActive(i)} className={`w-2 h-2 rounded-full cu
))}
</div>
<button
onClick={() => setActive([Link]([Link] - 1, active + 1))}
disabled={active === [Link] - 1}
className="flex-1 py-3 px-4 rounded-xl border-2 border-gray-200 text-sm font-me
>
Sonraki →
</button>
</div>
</div>
</div>
</div>
);
}