feat(4.2): Encpasulate behaviour within component types

Author: one-aalam

src/components/Header.astro

@@ -1,7 +1,7 @@
 ---
     import { SITE } from '$/config'
     import SvgIcon from './SvgIcon.astro'
-    import ModeSwitcher from './ModeSwitcher.svelte'
+    import ModeSwitcherBtn from './ModeSwitcherBtn.svelte'
 ---
 
 <header class="header">
@@ -28,19 +28,7 @@
                         </a>
                     </li>
                     <li>
-                        <ModeSwitcher client:visible>
-                            <SvgIcon>
-                                <circle cx="12" cy="12" r="5"></circle>
-                                <line x1="12" y1="1" x2="12" y2="3"></line>
-                                <line x1="12" y1="21" x2="12" y2="23"></line>
-                                <line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line>
-                                <line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line>
-                                <line x1="1" y1="12" x2="3" y2="12"></line>
-                                <line x1="21" y1="12" x2="23" y2="12"></line>
-                                <line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line>
-                                <line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line>
-                            </SvgIcon>
-                        </ModeSwitcher>
+                        <ModeSwitcherBtn client:visible />
                     </li>
                 </ul>
             </nav>

src/components/ModeSwitcherBtn.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+    import ModeSwitcher from './ModeSwitcher.svelte'
+    import SvgIcon from './SvgIcon.svelte'
+</script>
+<ModeSwitcher let:theme>
+    <SvgIcon>
+        {#if theme === 'dark'}
+            <circle cx="12" cy="12" r="5"></circle>
+            <line x1="12" y1="1" x2="12" y2="3"></line>
+            <line x1="12" y1="21" x2="12" y2="23"></line>
+            <line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line>
+            <line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line>
+            <line x1="1" y1="12" x2="3" y2="12"></line>
+            <line x1="21" y1="12" x2="23" y2="12"></line>
+            <line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line>
+            <line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line>
+        {:else}
+            <path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"></path>
+        {/if}
+    </SvgIcon>
+</ModeSwitcher>

src/components/SvgIcon.svelte

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+    <slot/>
+</svg>