Add Switch

.vitepress/theme/components/Switch.vue

@@ -0,0 +1,52 @@
+<script setup>
+import { ref } from "vue";
+import { Switch } from "@headlessui/vue";
+
+const enabled = ref(false);
+</script>
+
+<template>
+  <Switch v-model="enabled" class="switch" :class="{ enabled }">
+    <span class="thumb" />
+  </Switch>
+</template>
+
+<style>
+.switch {
+  display: inline-flex;
+  position: relative;
+  width: 40px;
+  height: 22px;
+  flex-shrink: 0;
+  border: 1px solid var(--vp-input-border-color);
+  background-color: var(--vp-input-switch-bg-color);
+  transition:
+    border-color 0.25s,
+    background-color 0.4s ease;
+  border-radius: 11px;
+}
+
+.switch.enabled {
+  background-color: var(--vp-c-brand);
+}
+</style>
+
+<style scoped>
+.switch:hover {
+  border-color: var(--vp-input-hover-border-color);
+}
+
+.thumb {
+  display: inline-block;
+  background-color: #fff;
+  transition: transform 0.25s;
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  box-shadow: var(--vp-shadow-1);
+}
+
+.switch.enabled .thumb {
+  transform: translateX(18px);
+}
+</style>

.vitepress/theme/components/ToggleStarred.vue

@@ -1,9 +1,11 @@
 <script setup lang="ts">
+import Switch from "./Switch.vue";
+
 const toggleStarred = () => document.documentElement.classList.toggle("starred-only");
 </script>
 
 <template>
-  <button class="p-[4px 8px] text-xl i-carbon:star" @click="toggleStarred()" />
+  <Switch @click="toggleStarred()" />
 </template>
 
 <style>

package.json

@@ -15,6 +15,7 @@
     "postinstall": "nitropack prepare"
   },
   "dependencies": {
+    "@headlessui/vue": "^1.7.16",
     "@resvg/resvg-js": "^2.6.0",
     "fast-glob": "^3.3.1",
     "itty-fetcher": "^0.9.4",

pnpm-lock.yaml

@@ -10,6 +10,9 @@ patchedDependencies:
     path: patches/vitepress@1.0.0-rc.25.patch
 
 dependencies:
+  '@headlessui/vue':
+    specifier: ^1.7.16
+    version: 1.7.16(vue@3.3.7)
   '@resvg/resvg-js':
     specifier: ^2.6.0
     version: 2.6.0
@@ -1808,6 +1811,15 @@ packages:
     engines: {node: '>=14'}
     dev: false
 
+  /@headlessui/vue@1.7.16(vue@3.3.7):
+    resolution: {integrity: sha512-nKT+nf/q6x198SsyK54mSszaQl/z+QxtASmgMEJtpxSX2Q0OPJX0upS/9daDyiECpeAsvjkoOrm2O/6PyBQ+Qg==}
+    engines: {node: '>=10'}
+    peerDependencies:
+      vue: ^3.2.0
+    dependencies:
+      vue: 3.3.7
+    dev: false
+
   /@iconify-json/carbon@1.1.21:
     resolution: {integrity: sha512-bK2cMVM4noBU+FGlay433flpXLRzQu0ED095iAnoO6ka3yb4uz0lvb8acpN5gthyGLJ89C4HpfIbQZLQnMKQww==}
     dependencies: