বিল্ট-ইন কম্পোনেন্ট

* <Link to="https://github.com/" label="Github" />
* <Link to="/" label="Home page" />

<script>
  import { Link  } from '@sveltepress/theme-default/components' 
</script>
<div style="line-height: 24px;">
  <Lin k  to = " /" label="Home page" /> <br />
  <Lin k  to = " https://github.com/" label="Github" />
</div>

<Tabs activeName="Svelte">
  <TabPanel name="Svelte">

```svelte title="Counter.svelte"
<script>
  let count = $state(0)
</script>
<button on:click={() => count++}>
  You've clicked {count} times
</button>
```

  </TabPanel>

  <TabPanel name="Vue">

```html  title="Counter.vue"
<script setup>
  import { ref } from 'vue'

  const count = ref(0)
</script>
<button @click="count++">
  You've clicked {count} times
</button>
```

  </TabPanel>
</Tabs>

<script>
  import { TabPanel , Tabs  } from '@sveltepress/theme-default/components' 
</script>
<Tab s  act i veName=" Tab2 " > 
  <TabPane l  nam e =" Tab1 " > 
    <div>Tab1 content</div>
  </TabPanel >
  <TabPane l  nam e =" Tab2 " > 
    <div>Tab2 content</div>
  </TabPanel >
</Tabs >

<Expansion title="Click to expand/fold panel">
  <div class="text-[24px]">Some content</div>
</Expansion>

<script>
  import { Expansion  } from '@sveltepress/theme-default/components'
</script>
<Expansio n  tit l e=" A expan sion without custom icon and arrow">
  <div class="p-4 text-[24px]">
    Look at the icon left. It gets colored when expanded!
  </div>
  {#snippet iconFold ()}
    <div class="i-bxs-wink-smile"></div>
  {/snippet}
  {#snippet iconExpanded ()}
    <div class="i-fxemoji-smiletongue"></div>
  {/snippet}
  {#snippet arrow ()}
    <div class="i-material-symbols-thumbs-up-down"></div>
  {/ sni ppe t } 
</Expansion >

<div style="font-size: 28px;">
  <IconifyIcon collection="vscode-icons" name="file-type-svelte" />
</div>

<script>
  import { IconifyIcon  } from '@sveltepress/theme-default/components'
</script>
<div style="font-size: 28px;">
  <IconifyIco n  col l ection="vscode-icons" name="file-type-svelte" />
</div>

<Floating placement="top">
  <div class="text-xl b-1 b-solid b-blue rounded py-10 px-4">
    এখানে-মাউস-আনুন-বা-টাচ-করুন
  </div>
  {#snippet floatingContent()}
    <div class="bg-white dark:bg-dark b-1 b-solid b-blue rounded p-4">
      হাই, নির্দেশনা অনুযায়ী কাজ করার জন্য ধন্যবাদ
    </div>
  {/snippet}
</Floating>

<script>
  import Floating  from '@sveltepress/twoslash/FloatingWrapper.svelte'
</script>
<Floatin g  pla c ement=" right " > 
  <div class="text-xl b-1 b-solid b-blue rounded py-10 px-4">
    এখানে-মাউস-আনুন-বা-টাচ-করুন
  </div>
  {#snippet floatingContent ()}
    <div class="bg-white dark:bg-dark b-solid b-1 b-red rounded p-4">
      হাই, নির্দেশনা অনুযায়ী কাজ করার জন্য ধন্যবাদ
    </div>
  {/ snippet } 
</Fl oating >

<CodeBlock lang="ts" code="const foo = 'bar'" />

<script>
  import { CodeBlock  } from '@sveltepress/theme-default/components'
</script>
<CodeBloc k  lan g ="ts" code="const foo = 'bar'" />