feat(custom): #4 add button componment.

package.json

@@ -2,7 +2,6 @@
   "name": "gpt-assistant",
   "private": true,
   "version": "0.0.1",
-  "type": "module",
   "scripts": {
     "dev": "vite",
     "build": "tsc && vite build",

src/App.tsx

@@ -1,9 +1,14 @@
 import { Box, Flex } from "@chakra-ui/react";
+import CustomButton from "./components/shared/Button";
 
 function App() {
   return (
-    <Box pos="fixed" zIndex={100} right={0} top={0} w="200px" h="90vh" mt="15px">
-      <Flex flexDirection="column" justifyContent="center"></Flex>
+    <Box pos="fixed" zIndex={100} top={50} right={0} w="200px" h="90vh" mr="15px">
+      <Box>Drawer</Box>
+      <Flex h="100%" flexDirection="column" alignItems="center" justifyContent="space-around" borderRadius="15px" bgColor="blue.100">
+        <CustomButton>Testing</CustomButton>
+        <CustomButton>Testing</CustomButton>
+      </Flex>
     </Box>
   );
 }

src/components/shared/Button/index.tsx

@@ -0,0 +1,15 @@
+import { Button } from "@chakra-ui/react";
+
+interface CustomButtonProps {
+  children: React.ReactNode;
+}
+
+function CustomButton({ children }: CustomButtonProps) {
+  return (
+    <Button w="180px" h="40px" variant="solid">
+      {children}
+    </Button>
+  );
+}
+
+export default CustomButton;