From 770471fc3d99b7a8ee5caf545dec1881e44d835a Mon Sep 17 00:00:00 2001
From: aibayanyu <aibayanyu@qq.com>
Date: Mon, 6 Mar 2023 07:28:23 +0800
Subject: [PATCH] feat: add basic

---
 components/button/index.tsx | 33 +++++++++++++++++++++++++++++++++
 site/demos/button/basic.vue |  8 ++++++--
 2 files changed, 39 insertions(+), 2 deletions(-)
 create mode 100644 components/button/index.tsx

diff --git a/components/button/index.tsx b/components/button/index.tsx
new file mode 100644
index 0000000..d5eddde
--- /dev/null
+++ b/components/button/index.tsx
@@ -0,0 +1,33 @@
+import { computed, defineComponent } from 'vue'
+import type { CSSInterpolation } from '@antd-tiny-vue/cssinjs'
+import { useStyleRegister } from '@antd-tiny-vue/cssinjs'
+import type { ThemeToken } from '../theme'
+import { useToken } from '../theme'
+
+export const generateButtonStyle = (prefixCls: string, token: ThemeToken): CSSInterpolation => ({
+  [`.${prefixCls}`]: {
+    backgroundColor: token.primaryColor,
+    padding: '10px 20px',
+    '&:hover': {
+      backgroundColor: 'red'
+    }
+  }
+})
+
+const Button = defineComponent({
+  name: 'AButton',
+  setup() {
+    const prefixCls = 'ant-btn'
+    const [theme, token, hashId] = useToken()
+    const info = computed<any>(() => ({
+      theme: theme.value,
+      token: token.value,
+      path: [prefixCls],
+      hashId: hashId.value
+    }))
+    const wrapSSR = useStyleRegister(info, () => [generateButtonStyle(prefixCls, token.value as any)])
+    return () => wrapSSR(<button class={[prefixCls, hashId.value]}>按钮</button>)
+  }
+})
+
+export default Button
diff --git a/site/demos/button/basic.vue b/site/demos/button/basic.vue
index 69fb3e7..9b87b67 100644
--- a/site/demos/button/basic.vue
+++ b/site/demos/button/basic.vue
@@ -7,10 +7,14 @@ title: 基础按钮
 
 </docs>
 
-<script lang="ts" setup></script>
+<script lang="ts" setup>
+  import Button from '../../../components/button'
+</script>
 
 <template>
-  <div>按钮</div>
+  <div>
+    <Button />
+  </div>
 </template>
 
 <style scoped></style>