From 58872bff3e0e2ad94588f6fd41c67c25cf6b50d5 Mon Sep 17 00:00:00 2001
From: David Day <dj6082013@gmail.com>
Date: Wed, 11 Sep 2024 14:57:36 -0700
Subject: [PATCH] Add button component.

---
 src/components/Button.tsx    | 11 ++++++-----
 src/routes/events/create.tsx |  3 ++-
 2 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/src/components/Button.tsx b/src/components/Button.tsx
index eea6a84..495efec 100644
--- a/src/components/Button.tsx
+++ b/src/components/Button.tsx
@@ -1,13 +1,14 @@
 import { ReactNode } from "react"
 
 type Props = {
-  children: ReactNode
+  children: ReactNode,
+  type: 'submit' | 'reset' | 'button',
 }
 
-export function Button({ children }: Props) {
+export function Button(props: Props) {
   return (
-    <div className="flex">
-      {children}
-    </div>
+    <button className="bg-cyan-600 text-white p-2 rounded" type={props.type} >
+      {props.children}
+    </button>
   )
 }
diff --git a/src/routes/events/create.tsx b/src/routes/events/create.tsx
index ca7c587..8771014 100644
--- a/src/routes/events/create.tsx
+++ b/src/routes/events/create.tsx
@@ -1,5 +1,6 @@
 import { createFileRoute, Link } from '@tanstack/react-router';
 import { ChangeEvent, FormEvent, useEffect, useState } from 'react';
+import { Button } from '../../components/Button';
 import { UserController } from '../../controllers/user';
 import { AuthGuard } from '../../utils/auth';
 import { supabase } from '../../utils/supabase';
@@ -149,7 +150,7 @@ function CreateEventScreen() {
           )}
       </div>
       <div className='mt-3'>
-        <button className='text-white' type='submit'>確認新增</button>
+        <Button type='submit'>確認新增</Button>
       </div>
     </form>
   );