i18n(tr): update components.md file

docs/src/content/docs/tr/guides/components.mdx

@@ -30,7 +30,7 @@ import AnotherComponent from '../../components/AnotherComponent.astro';
 </AnotherComponent>
 ```
 
-Starlight'ın Astro'dan aldığı güç sayesinde, MDX dosyalarınız içerisinde [desteklenen herhangi bir arayüz çerçevesi ile (React, Preact, Svelte, Vue, Solid, Lit, ve Alpine)](https://docs.astro.build/en/core-concepts/framework-components/) oluşturulmış bileşenlerinizi destekleyebilirsiniz.
+Starlight'ın Astro'dan aldığı güç sayesinde, MDX dosyalarınız içerisinde [desteklenen herhangi bir arayüz çerçevesi ile (React, Preact, Svelte, Vue, Solid, Lit, ve Alpine)](https://docs.astro.build/en/core-concepts/framework-components/) oluşturulmuş bileşenlerinizi destekleyebilirsiniz.
 Astro dokümantasyonunda [MDX içerisinde bileşen kullanmak](https://docs.astro.build/en/guides/markdown-content/#using-components-in-mdx) hakkında daha fazlasını öğrenin.
 
 ### Starlight stilleri ile uyumluluk
@@ -58,25 +58,73 @@ Bu bileşenler `@astrojs/starlight/components` paketinde mevcuttur.
 import { Tabs, TabItem } from '@astrojs/starlight/components';
 
 `<Tabs>` ve `<TabItem>` bileşenlerini kullanarak sekmeli arayüz gösterebilirsiniz.
-You can display a tabbed interface using the `<Tabs>` and `<TabItem>` components.
 Her `<TabItem>` bileşenini kullanıcılara göstermek için `label` sahibi olması zorunludur.
+[Starlight’ın yerleşik ikonlarından](#tüm-i̇konlar) birini, etiketin yanında kalması için zorunlu olmayan `icon` niteliğini kullanın.
 
 ```mdx
 import { Tabs, TabItem } from '@astrojs/starlight/components';
 
 <Tabs>
-	<TabItem label="Yıldızlar">Sirius, Vega, Betelgeuse</TabItem>
-	<TabItem label="Uydular">Io, Europa, Ganymede</TabItem>
+	<TabItem label="Yıldızlar" icon="star">Sirius, Vega, Betelgeuse</TabItem>
+	<TabItem label="Uydular" icon="moon">Io, Europa, Ganymede</TabItem>
 </Tabs>
 ```
 
 Yukarıdaki kod, sayfa üzerinde aşağıdaki gibi sekmeler oluşturur:
 
 <Tabs>
-	<TabItem label="Yıldızlar">Sirius, Vega, Betelgeuse</TabItem>
-	<TabItem label="Uydular">Io, Europa, Ganymede</TabItem>
+	<TabItem label="Yıldızlar" icon="star">
+	Sirius, Vega, Betelgeuse
+	</TabItem>
+	<TabItem label="Uydular" icon="moon">
+	Io, Europa, Ganymede
+	</TabItem>
 </Tabs>
 
+#### Senkronize Sekmeler
+
+`syncKey` niteliği ekleyerek çoklu sekme gruplarınızı senkronize edin.
+
+Sayfadaki aynı `syncKey` değerine sahip tüm `<Tabs>` bileşenleri aynı etkin etiketi görüntüler. Bu, okuyucunuza bir kez seçme (örneğin okuyucunuzun işletim sistemi ya da paket yöneticisi) ve sayfa boyunca yansıyan seçimi görmesine olanak tanır.
+
+İlişkili sekmeleri senkronize etmek için, her `<Tabs>` bileşenine özdeş `syncKey` niteliği ekleyin ve hepsinin aynı `<TabItems>` etiketi kullandığına emin olun:
+
+```mdx 'syncKey="constellations"'
+# src/content/docs/example.mdx
+
+import { Tabs, TabItem } from '@astrojs/starlight/components';
+
+_Bazı yıldızlar:_
+
+<Tabs syncKey="constellations">
+	<TabItem label="Orion">Bellatrix, Rigel, Betelgeuse</TabItem>
+	<TabItem label="Gemini">Pollux, Castor A, Castor B</TabItem>
+</Tabs>
+
+_Bazı ötegezegenler:_
+
+<Tabs syncKey="constellations">
+	<TabItem label="Orion">HD 34445 b, Gliese 179 b, Wasp-82 b</TabItem>
+	<TabItem label="Gemini">Pollux b, HAT-P-24b, HD 50554 b</TabItem>
+</Tabs>
+```
+Yukarıdaki kod, sayfa üzerinde aşağıdaki gibi çıktı oluşturur:
+
+_Bazı yıldızlar:_
+
+<Tabs syncKey="constellations">
+	<TabItem label="Orion">Bellatrix, Rigel, Betelgeuse</TabItem>
+	<TabItem label="Gemini">Pollux, Castor A, Castor B</TabItem>
+</Tabs>
+
+_Bazı ötegezegenler:_
+
+<Tabs syncKey="constellations">
+	<TabItem label="Orion">HD 34445 b, Gliese 179 b, Wasp-82 b</TabItem>
+	<TabItem label="Gemini">Pollux b, HAT-P-24b, HD 50554 b</TabItem>
+</Tabs>
+
+
 ### Kartlar
 
 import { Card, CardGrid } from '@astrojs/starlight/components';
@@ -164,23 +212,219 @@ import { LinkCard } from '@astrojs/starlight/components';
 	<LinkCard title="Bileşenler" href="/tr/guides/components/" />
 </CardGrid>
 
+### Ara bölümler
+
+Ara bölümler (ayrıca "uyarı" ve "açıklama balonu" olarak da bilinir), sayfanın ana içeriği ile birlikte ikincil bilgi göstermek için kullanışlıdır.
+
+`<Aside>` bileşeni zorunlu olmayan `note` (varsayılan), `tip`, `caution` ya da `danger` değerini alan `type` niteliğine sahiptir. `title` niteliği eklemek varsayılan ara bölüm başlığını değiştirir.
+
+````mdx
+# src/content/docs/example.mdx
+
+import { Aside } from '@astrojs/starlight/components';
+
+<Aside>Özel başlığı olmayan bir varsayılan ara bölüm</Aside>
+
+<Aside type="caution" title="Dikkat Et!">
+	Özel bir başlık *ile* uyarı ara bölümü.
+</Aside>
+
+<Aside type="tip">
+
+Diğer içerikler de ara bölümde desteklenir.
+
+```js
+// Örneğin bir kod parçacığı.
+```
+
+</Aside>
+
+<Aside type="danger">Şifreni kimseye verme.</Aside>
+````
+
+Yukarıdaki kod, sayfa üzerinde aşağıdaki gibi çıktı oluşturur:
+
+import { Aside } from '@astrojs/starlight/components';
+
+<Aside>Özel başlığı olmayan bir varsayılan ara bölüm</Aside>
+
+<Aside type="caution" title="Dikkat Et!">
+	Özel bir başlık *ile* uyarı ara bölümü.
+</Aside>
+
+<Aside type="tip">
+
+Diğer içerikler de ara bölümde desteklenir.
+
+```js
+// Örneğin bir kod parçacığı.
+```
+
+</Aside>
+
+<Aside type="danger">Şifreni kimseye verme.</Aside>
+
+Starlight, ayrıca `<Aside>` bileşenine alternatif olarak Markdown ve MDX içerisinde ara bölüm oluşturmak için özel bir sözdizimi sağlar.
+[“Markdown'da İçerik Yazmak”](/tr/guides/authoring-content/#ara-bölümler) rehberine özel sözdizimi detayları için bakın.
+
+### Kod
+
+`<Code>` bileşenini [Markdown kod bloğu](/tr/guides/authoring-content/#kod-blokları) kullanmanın mümkün olmadığı zaman sözdizim vurgulu kod oluşturmak için kullanın - örneğin dosyalar, veritabanları ve API'ler gibi harici kaynaklardan gelen verileri oluşturmak için.
+
+`<Code>` bileşeninin destekleği niteliklerin tüm detaylarını [Expressive Code “Code Component” dokümanında](https://expressive-code.com/key-features/code-component/) inceleyin.
+
+```mdx
+# src/content/docs/example.mdx
+
+import { Code } from '@astrojs/starlight/components';
+
+export const exampleCode = `console.log('Bu bir dosya ya da İçerik Yönetim Sisteminden gelebilir!');`;
+export const fileName = 'example.js';
+export const highlights = ['file', 'CMS'];
+
+<Code code={exampleCode} lang="js" title={fileName} mark={highlights} />
+```
+
+Yukarıdaki kod, sayfa üzerinde aşağıdaki gibi çıktı oluşturur:
+
+import { Code } from '@astrojs/starlight/components';
+
+export const exampleCode = `console.log('Bu bir dosya ya da İçerik Yönetim Sisteminden gelebilir!');`;
+export const fileName = 'example.js';
+export const highlights = ['file', 'CMS'];
+
+<Code code={exampleCode} lang="js" title={fileName} mark={highlights} />
+
+#### Alınan kod
+
+[Vite’nin `?raw` son ekini](https://vitejs.dev/guide/assets#importing-asset-as-string) herhangi kod dosyasını string olarak almak için kullanın.
+`<Code>` bileşenine alınan bu string'i sayfanıza dahil etmek için ekleyin.
+
+```mdx title="src/content/docs/example.mdx" "?raw"
+import { Code } from '@astrojs/starlight/components';
+import importedCode from '/src/env.d.ts?raw';
+
+<Code code={importedCode} lang="ts" title="src/env.d.ts" />
+```
+
+Yukarıdaki kod, sayfa üzerinde aşağıdaki gibi çıktı oluşturur:
+
+import importedCode from '/src/env.d.ts?raw';
+
+<Code code={importedCode} lang="ts" title="src/env.d.ts" />
+
+### Dosya Ağacı
+
+`<FileTree>` bileşenini dizin yapısını dosya ikonları ve toplanabilir alt dizinleri göstermek için kullanın.
+
+Dosyalarınızın yapısını ve dizinleri `<FileTree>` içerisinde [numaralandırılmamış Markdown listesi](https://www.markdownguide.org/basic-syntax/#unordered-lists) ile açıkça belirtin.
+İç içe yerleşmiş liste kullanarak ya da belirli bir içeriksiz dizin oluşturmak için liste elemanının sonuna `/` ekleyerek  alt dizin oluşturun.
+
+Aşağıdaki sözdizimi dosya ağacınının görünümünü özelleştirmek için kullanılabilir:
+
+- Dosya ya da dizinin ismini kalın yaparak vurgulayın. Örneğin `**README.md**`.
+- Dosya ya da dizine isimden sonra metin ekleyerek yorum ekleyin.
+- Dosyalara ya da dizinlere isim olarak `...` ya da `…` yazımını kullanarak ayrılmış bilgi alanı ekleyin.
+
+```mdx
+# src/content/docs/example.mdx
+
+import { FileTree } from '@astrojs/starlight/components';
+
+<FileTree>
+
+- astro.config.mjs **önemli** bir dosya
+- package.json
+- README.md
+- src
+  - components
+    - **Header.astro**
+  - …
+- pages/
+
+</FileTree>
+```
+
+Yukarıdaki kod, sayfa üzerinde aşağıdaki gibi çıktı oluşturur:
+
+import { FileTree } from '@astrojs/starlight/components';
+
+<FileTree>
+
+- astro.config.mjs **önemli** bir dosya
+- package.json
+- README.md
+- src
+  - components
+    - **Header.astro**
+  - …
+- pages/
+
+</FileTree>
+
+### Adımlar
+
+`<Steps>` bileşenini numaralanmış görevler listesini biçimlendirmek için kullanın.
+Her aşamasının açıkça belirtilmeye ihtiyaç duyan çok karmaşık adım adım rehberleri oluşturmak için kullanışlıdır.
+
+Standart Markdown sıralanmış listesini `<Steps>` bileşeni ile sarmalayın.
+`<Steps>` bileşeni içerisinde tüm olağan Markdown sözdizimi uygulanabilir.
+
+````mdx title="src/content/docs/example.mdx"
+import { Steps } from '@astrojs/starlight/components';
+
+<Steps>
+
+1. Bileşeni MDX dosyasına dahil edin:
+
+   ```js
+   import { Steps } from '@astrojs/starlight/components';
+   ```
+
+2. Sıralanmış liste elemanlarını `<Steps>` ile sarmalayın.
+
+</Steps>
+````
+
+Yukarıdaki kod, sayfa üzerinde aşağıdaki gibi çıktı oluşturur:
+
+import { Steps } from '@astrojs/starlight/components';
+
+<Steps>
+
+1. Bileşeni MDX dosyasına dahil edin:
+
+   ```js
+   import { Steps } from '@astrojs/starlight/components';
+   ```
+
+2. Sıralanmış liste elemanlarını `<Steps>` ile sarmalayın.
+
+</Steps>
+
 ### İkon
 
 import { Icon } from '@astrojs/starlight/components';
 import IconsList from '~/components/icons-list.astro';
 
 Starlight, içeriğinizde görünmesi için `<Icon>` bileşenini kullanarak bir grup ortak ikonları kullanımınıza sunar.
-Her `<Icon>` [`name`](#tüm-i̇konlar) değerine ihtiyaç duyar ve isteğe bağlı olarak `label`, `size`, ve `color` özellikleri eklenebilir.
+
+Her `<Icon>` [`name`](#tüm-i̇konlar) değerine ihtiyaç duyar ve isteğe bağlı olarak `label` eklenebilir.
+`size` ve `color` nitelikleri ikonun görünümünü CSS birimleri ve renk değerleri ile ayarlamak için kullanılabilir.
 
 ```mdx
+# src/content/docs/example.mdx
+
 import { Icon } from '@astrojs/starlight/components';
 
 <Icon name="star" color="goldenrod" size="2rem" />
+<Icon name="rocket" color="var(--sl-color-text-accent)" />
 ```
 
 Yukarıdaki kod, aşağıdaki gibi çıktı oluşturur:
 
 <Icon name="star" color="goldenrod" size="2rem" />
+<Icon name="rocket" color="var(--sl-color-text-accent)" />
 
 #### Tüm İkonlar