Merge pull request #82 from tmg0/feat/use-zed

feat: use zed

.zed/settings.json

@@ -1,19 +1,7 @@
 {
-  "languages": {
-    "JavaScript": {
-      "formatter": {
-        "code_actions": {
-          "source.fixAll.eslint": true
-        }
-      }
-    },
-
-    "TypeScript": {
-      "formatter": {
-        "code_actions": {
-          "source.fixAll.eslint": true
-        }
-      }
+  "formatter": {
+    "code_actions": {
+      "source.fixAll.eslint": true
     }
   }
 }

playground/vite/README.md

@@ -2,7 +2,13 @@
 
 [![NPM version](https://img.shields.io/npm/v/hero-motion)](https://www.npmjs.com/package/hero-motion)
 
-`hero-motion` is typically used to optimize code structure, and here are some examples. You can also run `pnpm play:vite` in the root dir locally.
+`hero-motion` is typically used to optimize code structure, and here are some examples.
+
+You can also run `pnpm play:vite` in the root dir on your local environment.
+
+- `Tabs Component`
+
+- `Transition Across Different Pages`
 
 ## Tabs Component
 
@@ -52,7 +58,7 @@ const emit = defineEmits(['click'])
 </template>
 ```
 
-### Transition Across Different Pages
+## Transition Across Different Pages
 
 `hero-motion` support tansition across different pages, even when components are under different routes, ensure smooth transitions when navigating between them.
 

playground/vite/src/components/Tabs/Tab.vue

@@ -9,8 +9,13 @@ const emit = defineEmits(['click'])
 </script>
 
 <template>
-  <button class="z-0 w-full px-3 py-1 flex group relative justify-center items-center cursor-pointer transition-opacity tap-highlight-transparent data-[disabled=true]:cursor-not-allowed data-[disabled=true]:opacity-30 data-[hover-unselected=true]:opacity-disabled outline-none data-[focus-visible=true]:z-10 data-[focus-visible=true]:outline-2 data-[focus-visible=true]:outline-focus data-[focus-visible=true]:outline-offset-2 h-8 text-small rounded-small" @click="emit('click')">
-    <div class="relative z-10 whitespace-nowrap transition-colors text-black/75 text-sm group-data-[selected=true]:text-default-foreground">
+  <button
+    class="z-0 w-full px-3 py-1 flex group relative justify-center items-center cursor-pointer transition-opacity tap-highlight-transparent data-[disabled=true]:cursor-not-allowed data-[disabled=true]:opacity-30 data-[hover-unselected=true]:opacity-disabled outline-none data-[focus-visible=true]:z-10 data-[focus-visible=true]:outline-2 data-[focus-visible=true]:outline-focus data-[focus-visible=true]:outline-offset-2 h-8 text-small rounded-small"
+    @click="emit('click')"
+  >
+    <div
+      class="relative z-10 whitespace-nowrap transition-colors text-black/75 text-sm"
+    >
       <slot />
     </div>