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

<script>
  import { 
type Link = SvelteComponent<Record<string, any>, any, any>
const Link: LegacyComponentTypeLink } from '@sveltepress/theme-default/components' 
</script>
<div style: stringstyle="line-height: 24px;">
  <const Link: LegacyComponentTypeLink to: stringto="/" label: stringlabel="Home page" /> <br />
  <const Link: LegacyComponentTypeLink to: stringto="https://github.com/" label: stringlabel="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 { 
type TabPanel = SvelteComponent<Record<string, any>, any, any>
const TabPanel: LegacyComponentTypeTabPanel, 
type Tabs = SvelteComponent<Record<string, any>, any, any>
const Tabs: LegacyComponentTypeTabs } from '@sveltepress/theme-default/components' 
</script>
<const Tabs: LegacyComponentTypeTabs activeName: stringactiveName="Tab2">
  <const TabPanel: LegacyComponentTypeTabPanel name: stringname="Tab1">
    <div>Tab1 content</div>
  </const TabPanel: LegacyComponentTypeTabPanel>
  <const TabPanel: LegacyComponentTypeTabPanel name: stringname="Tab2">
    <div>Tab2 content</div>
  </const TabPanel: LegacyComponentTypeTabPanel>
</const Tabs: LegacyComponentTypeTabs>

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

<script>
  import { 
type Expansion = SvelteComponent<Record<string, any>, any, any>
const Expansion: LegacyComponentTypeExpansion } from '@sveltepress/theme-default/components'
</script>
<const Expansion: LegacyComponentTypeExpansion title: stringtitle="A expansion without custom icon and arrow">
  <div class: stringclass="p-4 text-[24px]">
    Look at the icon left. It gets colored when expanded!
  </div>
  {#snippet iconFold: () => anyiconFold()}
    <div class: stringclass="i-bxs-wink-smile"></div>
  {/snippet}
  {#snippet iconExpanded: () => anyiconExpanded()}
    <div class: stringclass="i-fxemoji-smiletongue"></div>
  {/snippet}
  {#snippet arrow: () => anyarrow()}
    <div class: stringclass="i-material-symbols-thumbs-up-down"></div>
  const iconFold: any{/const iconFold: anysniconst iconFold: anyppeconst iconExpanded: anytconst iconExpanded: any}
</const Expansion: LegacyComponentTypeExpansion>

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

<script>
  import { 
type IconifyIcon = SvelteComponent<Record<string, any>, any, any>
const IconifyIcon: LegacyComponentTypeIconifyIcon } from '@sveltepress/theme-default/components'
</script>
<div style: stringstyle="font-size: 28px;">
  <const IconifyIcon: LegacyComponentTypeIconifyIcon collection: stringcollection="vscode-icons" name: stringname="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 
type Floating = {
    $on?(type: string, callback: (e: any) => void): () => void;
    $set?(props: Partial<PropType>): void;
}
const Floating: Component<PropType, {}, "">Floating from '@sveltepress/twoslash/FloatingWrapper.svelte'
</script>
<const Floating: Component<PropType, {}, "">Floating PropType.placement?: Placement | undefinedplacement="right">
  <div class: stringclass="text-xl b-1 b-solid b-blue rounded py-10 px-4">
    এখানে-মাউস-আনুন-বা-টাচ-করুন
  </div>
  {#snippet PropType.floatingContent?: Snippet<[]> | undefinedfloatingContent()}
    <div class: stringclass="bg-white dark:bg-dark b-solid b-1 b-red rounded p-4">
      হাই, নির্দেশনা অনুযায়ী কাজ করার জন্য ধন্যবাদ
    </div>
  const floatingContent: Snippet<[]> | undefined{/const floatingContent: Snippet<[]> | undefinedsnippetconst floatingContent: Snippet<[]> | undefined}
</const Floating: Component<PropType, {}, "">Flconst Floating: Component<PropType, {}, "">oating>

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

<script>
  import { 
type CodeBlock = SvelteComponent<Record<string, any>, any, any>
const CodeBlock: LegacyComponentTypeCodeBlock } from '@sveltepress/theme-default/components'
</script>
<const CodeBlock: LegacyComponentTypeCodeBlock lang: stringlang="ts" code: stringcode="const foo = 'bar'" />