-
Notifications
You must be signed in to change notification settings - Fork 3
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #171 from hackdays-io/feature/button-chakra
ChakraV3によるCommonButtonコンポーネント
- Loading branch information
Showing
2 changed files
with
103 additions
and
67 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,32 @@ | ||
| import { Button, ButtonProps } from "~/components/ui/button"; | ||
|
|
||
| interface CommonButtonProps extends Omit<ButtonProps, "width"> { | ||
| children: React.ReactNode; | ||
| width?: "full" | number; | ||
| size?: "sm" | "md" | "lg"; | ||
| backgroundColor?: string; | ||
| color?: string; | ||
| } | ||
|
|
||
| export const CommonButton = ({ | ||
| children, | ||
| width = "full", | ||
| size = "md", | ||
| backgroundColor, | ||
| color, | ||
| ...props | ||
| }: CommonButtonProps) => { | ||
| return ( | ||
| <Button | ||
| w={width === "full" ? "100%" : width} | ||
| size={size} | ||
| backgroundColor={backgroundColor} | ||
| color={color} | ||
| {...props} | ||
| > | ||
| {children} | ||
| </Button> | ||
| ); | ||
| }; | ||
|
|
||
| export default CommonButton; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,79 +1,83 @@ | ||
| import { | ||
| Box, | ||
| Button, | ||
| Checkbox, | ||
| ClientOnly, | ||
| HStack, | ||
| Heading, | ||
| Progress, | ||
| RadioGroup, | ||
| Skeleton, | ||
| VStack, | ||
| } from "@chakra-ui/react" | ||
| import type { MetaFunction } from "@remix-run/node" | ||
| import { ColorModeToggle } from "../components/color-mode-toggle" | ||
| Box, | ||
| Button, | ||
| Checkbox, | ||
| ClientOnly, | ||
| HStack, | ||
| Heading, | ||
| Progress, | ||
| RadioGroup, | ||
| Skeleton, | ||
| VStack, | ||
| } from "@chakra-ui/react"; | ||
| import type { MetaFunction } from "@remix-run/node"; | ||
| import { ColorModeToggle } from "../components/color-mode-toggle"; | ||
| import { CommonButton } from "~/components/CommonButton"; | ||
|
|
||
| export const meta: MetaFunction = () => { | ||
| return [ | ||
| { title: "New Remix App" }, | ||
| { name: "description", content: "Welcome to Remix!" }, | ||
| ] | ||
| } | ||
| return [ | ||
| { title: "New Remix App" }, | ||
| { name: "description", content: "Welcome to Remix!" }, | ||
| ]; | ||
| }; | ||
|
|
||
| export default function Index() { | ||
| return ( | ||
| <Box textAlign="center" fontSize="xl" pt="30vh"> | ||
| <VStack gap="8"> | ||
| <img alt="chakra logo" src="/static/logo.svg" width="80" height="80" /> | ||
| <Heading size="2xl" letterSpacing="tight"> | ||
| Welcome to Chakra UI v3 + Remix | ||
| </Heading> | ||
| return ( | ||
| <Box textAlign="center" fontSize="xl" pt="30vh"> | ||
| <CommonButton width="full" backgroundColor="red" size="lg" color="blue"> | ||
| <>Click me</> | ||
| </CommonButton> | ||
| <VStack gap="8"> | ||
| <img alt="chakra logo" src="/static/logo.svg" width="80" height="80" /> | ||
| <Heading size="2xl" letterSpacing="tight"> | ||
| Welcome to Chakra UI v3 + Remix | ||
| </Heading> | ||
|
|
||
| <HStack gap="10"> | ||
| <Checkbox.Root defaultChecked> | ||
| <Checkbox.HiddenInput /> | ||
| <Checkbox.Control> | ||
| <Checkbox.Indicator /> | ||
| </Checkbox.Control> | ||
| <Checkbox.Label>Checkbox</Checkbox.Label> | ||
| </Checkbox.Root> | ||
| <HStack gap="10"> | ||
| <Checkbox.Root defaultChecked> | ||
| <Checkbox.HiddenInput /> | ||
| <Checkbox.Control> | ||
| <Checkbox.Indicator /> | ||
| </Checkbox.Control> | ||
| <Checkbox.Label>Checkbox</Checkbox.Label> | ||
| </Checkbox.Root> | ||
|
|
||
| <RadioGroup.Root display="inline-flex" defaultValue="1"> | ||
| <RadioGroup.Item value="1" mr="2"> | ||
| <RadioGroup.ItemHiddenInput /> | ||
| <RadioGroup.ItemControl> | ||
| <RadioGroup.ItemIndicator /> | ||
| </RadioGroup.ItemControl> | ||
| <RadioGroup.ItemText lineHeight="1">Radio</RadioGroup.ItemText> | ||
| </RadioGroup.Item> | ||
| <RadioGroup.Root display="inline-flex" defaultValue="1"> | ||
| <RadioGroup.Item value="1" mr="2"> | ||
| <RadioGroup.ItemHiddenInput /> | ||
| <RadioGroup.ItemControl> | ||
| <RadioGroup.ItemIndicator /> | ||
| </RadioGroup.ItemControl> | ||
| <RadioGroup.ItemText lineHeight="1">Radio</RadioGroup.ItemText> | ||
| </RadioGroup.Item> | ||
|
|
||
| <RadioGroup.Item value="2"> | ||
| <RadioGroup.ItemHiddenInput /> | ||
| <RadioGroup.ItemControl> | ||
| <RadioGroup.ItemIndicator /> | ||
| </RadioGroup.ItemControl> | ||
| <RadioGroup.ItemText lineHeight="1">Radio</RadioGroup.ItemText> | ||
| </RadioGroup.Item> | ||
| </RadioGroup.Root> | ||
| </HStack> | ||
| <RadioGroup.Item value="2"> | ||
| <RadioGroup.ItemHiddenInput /> | ||
| <RadioGroup.ItemControl> | ||
| <RadioGroup.ItemIndicator /> | ||
| </RadioGroup.ItemControl> | ||
| <RadioGroup.ItemText lineHeight="1">Radio</RadioGroup.ItemText> | ||
| </RadioGroup.Item> | ||
| </RadioGroup.Root> | ||
| </HStack> | ||
|
|
||
| <Progress.Root width="300px" value={65} striped animated> | ||
| <Progress.Track> | ||
| <Progress.Range /> | ||
| </Progress.Track> | ||
| </Progress.Root> | ||
| <Progress.Root width="300px" value={65} striped animated> | ||
| <Progress.Track> | ||
| <Progress.Range /> | ||
| </Progress.Track> | ||
| </Progress.Root> | ||
|
|
||
| <HStack> | ||
| <Button>Lets go</Button> | ||
| <Button variant="outline">bun install @chakra-ui/react</Button> | ||
| </HStack> | ||
| </VStack> | ||
| <HStack> | ||
| <Button>Lets go</Button> | ||
| <Button variant="outline">bun install @chakra-ui/react</Button> | ||
| </HStack> | ||
| </VStack> | ||
|
|
||
| <Box pos="absolute" top="4" right="4"> | ||
| <ClientOnly fallback={<Skeleton w="10" h="10" rounded="md" />}> | ||
| <ColorModeToggle /> | ||
| </ClientOnly> | ||
| </Box> | ||
| </Box> | ||
| ) | ||
| <Box pos="absolute" top="4" right="4"> | ||
| <ClientOnly fallback={<Skeleton w="10" h="10" rounded="md" />}> | ||
| <ColorModeToggle /> | ||
| </ClientOnly> | ||
| </Box> | ||
| </Box> | ||
| ); | ||
| } |