react-vite-demo

commit c07e5a803be1dec9933ff010debb66a93db6b954
parent b7e7c23f0c78de7967cf0bbbf3e7f2f94aa9e025
Author: Jul <jul@9o.is>
Date:   Wed, 14 Aug 2024 20:24:29 +0800

create button component

Diffstat:
A
src/components/headless/Button.tsx
 | 
12
++++++++++++
M
src/components/headless/index.ts
 | 
1
+
M
src/components/page/EventsPage/EventsPage.tsx
 | 
4
++--

3 files changed, 15 insertions(+), 2 deletions(-)
diff --git a/src/components/headless/Button.tsx b/src/components/headless/Button.tsx
@@ -0,0 +1,11 @@
+import { ReactNode } from "react"
+
+type ButtonProps = {
+    children: ReactNode
+    type?: "submit" | "button" | "reset"
+    disabled?: boolean
+}
+
+export function Button({ type = "button", ...props }: ButtonProps) {
+    return <button type={type} {...props} />
+}
+\ No newline at end of file
diff --git a/src/components/headless/index.ts b/src/components/headless/index.ts
@@ -1,4 +1,5 @@
 export * from './Alert'
+export * from './Button'
 export * from './ComboBox'
 export * from './Checkbox'
 export * from './Form'
diff --git a/src/components/page/EventsPage/EventsPage.tsx b/src/components/page/EventsPage/EventsPage.tsx
@@ -1,4 +1,4 @@
-import { Checkbox, ComboBox, Select, Progress, Alert, Form, FormDataMap } from '../../headless'
+import { Checkbox, ComboBox, Select, Progress, Alert, Form, FormDataMap, Button } from '../../headless'
 import { useNumberFormatter } from '../../hooks'
 import { useSHEvents } from './useSHEvents'
 import { useFilteredSHEvents } from './useFilteredSHEvents'
@@ -34,7 +34,7 @@ export function EventsPage() {
           <ComboBox label="City" name="city" options={cities} />
           <Select label="Sort by price" name="priceSort" options={['ascending', 'descending']} />
           <Checkbox label="Find Cheapest" name="cheapest" />
-          <button type="submit" disabled={loading}>Search</button>
+          <Button type="submit" disabled={loading}>Search</Button>
         </Form>
         <Progress loading={loading}>
           <Progress.Bar>