add switch component

src/App.vue

@@ -1,6 +1,4 @@
 <script setup lang="ts">
-import { ref } from 'vue';
-import LoginCard from './components/LoginCard.vue';
 import { useThemeStore } from './stores/theme';
 
 const theme = useThemeStore()
@@ -12,7 +10,9 @@ const theme = useThemeStore()
     <header>
       <RouterLink to="/user"> Go to User</RouterLink>
       <RouterLink to="/login"> Go to Login</RouterLink>
+      <router-link to="/test"> Go to Test</router-link>
     </header>
+    <div></div>
 
     <main>
       <RouterView />

src/components/Sidebar.vue

@@ -65,7 +65,7 @@ const items = [
   { id: 4, icon: iconMenu, msg: "btn4" },
 ]
 
-const themeSidebar = ref("")
+const themeSidebar = ref("card-dash sidebar-base sidebar-open")
 
 function closeSidebar() {
   isClose.value = true;
@@ -104,6 +104,4 @@ function toggleSidebar() {
 .sidebar-close {
   @apply w-31
 }
-
-@custom-variant
 </style>

src/components/equipments/Switch.vue

@@ -0,0 +1,81 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" :width="props.width" :height="props.height" viewBox="0 0 16 16">
+    <def>
+      <filter id="glow">
+        <feFlood result="flood" flood-color="#f08a5d" flood-opacity="1"></feFlood>
+        <feComposite in="flood" result="mask" in2="SourceGraphic" operator="in"></feComposite>
+        <feMorphology in="mask" result="dilated" operator="dilate" radius="0.02"></feMorphology>
+        <feGaussianBlur in="dilated" stdDeviation="0.05" result="blur1" />
+        <feGaussianBlur in="dilated" stdDeviation="0.1" result="blur2" />
+        <feGaussianBlur in="dilated" stdDeviation="0.2" result="blur3" />
+        <feMerge>
+          <feMergeNode in="blur3" />
+          <feMergeNode in="blur2" />
+          <feMergeNode in="blur1" />
+          <feMergeNode in="SourceGraphic" />
+        </feMerge>
+      </filter>
+    </def>
+    <g>
+      <rect width="8" height="4" x="4" y="6" fill="#c01401" rx="0.1" />
+      <text fill="white" font-size="0.7" x="4.25" y="6.75">ON</text>
+      <g>
+        <rect @click="toggleBtnStatus(0)" width="0.7" height="2" fill="#68716f" x="5.15" y="7" rx="0.1" />
+        <rect @click="toggleBtnStatus(1)" width="0.7" height="2" fill="#68716f" x="6.15" y="7" rx="0.1" />
+        <rect @click="toggleBtnStatus(2)" width="0.7" height="2" fill="#68716f" x="7.15" y="7" rx="0.1" />
+        <rect @click="toggleBtnStatus(3)" width="0.7" height="2" fill="#68716f" x="8.15" y="7" rx="0.1" />
+        <rect @click="toggleBtnStatus(4)" width="0.7" height="2" fill="#68716f" x="9.15" y="7" rx="0.1" />
+        <rect @click="toggleBtnStatus(5)" width="0.7" height="2" fill="#68716f" x="10.15" y="7" rx="0.1" />
+      </g>
+      <g>
+        <rect @click="toggleBtnStatus(0)" width="0.65" height="0.65" fill="white" x="5.175" :y="btnLocation[0]" rx="0.1"
+          opacity="1" />
+        <rect @click="toggleBtnStatus(1)" width="0.65" height="0.65" fill="white" x="6.175" :y="btnLocation[1]" rx="0.1"
+          opacity="1" />
+        <rect @click="toggleBtnStatus(2)" width="0.65" height="0.65" fill="white" x="7.175" :y="btnLocation[2]" rx="0.1"
+          opacity="1" />
+        <rect @click="toggleBtnStatus(3)" width="0.65" height="0.65" fill="white" x="8.175" :y="btnLocation[3]" rx="0.1"
+          opacity="1" />
+        <rect @click="toggleBtnStatus(4)" width="0.65" height="0.65" fill="white" x="9.175" :y="btnLocation[4]" rx="0.1"
+          opacity="1" />
+        <rect @click="toggleBtnStatus(5)" width="0.65" height="0.65" fill="white" x="10.175" :y="btnLocation[5]"
+          rx="0.1" opacity="1" />
+      </g>
+    </g>
+  </svg>
+</template>
+
+<script lang="ts" setup>
+import { computed, ref } from 'vue';
+
+interface Props {
+  width?: string | number
+  height?: string | number
+}
+const props = withDefaults(defineProps<Props>(), {
+  width: 160,
+  height: 160,
+})
+
+const btnStatus = ref([false, false, false, false, false, false])
+const btnLocation = computed(() => {
+  return btnStatus.value.map((status) => { return status ? 7.025 : 8.325 })
+})
+
+function setBtnStatus(btnNum: number, isOn: boolean): void {
+  btnStatus.value[btnNum] = isOn
+}
+
+function toggleBtnStatus(btnNum: number): void {
+  btnStatus.value[btnNum] = !btnStatus.value[btnNum]
+}
+
+</script>
+
+<style scoped lang="postcss">
+@import "@/assets/main.css";
+
+rect {
+  transition: all 100ms ease-in-out;
+}
+</style>

src/router/index.ts

@@ -1,11 +1,13 @@
 import { createMemoryHistory, createRouter } from 'vue-router'
 import LoginView from "@/views/LoginView.vue"
-import User from '@/views/UserView.vue'
+import UserView from '@/views/UserView.vue'
+import TestSVG from '@/views/TestSVG.vue'
 
 const routes = [
   { path: "/", redirect: "/user" },
   { path: "/login", name: "Login", component: LoginView },
-  { path: "/user", name: "User", component: User },
+  { path: "/user", name: "User", component: UserView },
+  { path: "/test", name: "Test", component: TestSVG },
 ]
 
 const router = createRouter({

src/views/LabView.vue

@@ -0,0 +1,11 @@
+<template>
+  <div>
+
+  </div>
+</template>
+
+<script setup lang="ts">
+
+</script>
+
+<style scoped lang="postcss"></style>

src/views/TestSVG.vue

@@ -0,0 +1,15 @@
+<template>
+  <div class="w-screen h-screen">
+    <Switch width="720" height="720" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import Switch from '@/components/equipments/Switch.vue';
+
+
+</script>
+
+<style scoped lang="postcss">
+@import "../assets/main.css"
+</style>