From b553dbb2a2e2d986c479bbd998125ff4d8fcd4bd Mon Sep 17 00:00:00 2001
From: thisagi <106305548+thisagi@users.noreply.github.com>
Date: Tue, 5 Nov 2024 17:47:53 +0900
Subject: [PATCH 1/3] feat: add LogginCard
---
app/components/LogginCard.stories.tsx | 15 ++++++++++++
app/components/LogginCard.tsx | 34 +++++++++++++++++++++++++++
2 files changed, 49 insertions(+)
create mode 100644 app/components/LogginCard.stories.tsx
create mode 100644 app/components/LogginCard.tsx
diff --git a/app/components/LogginCard.stories.tsx b/app/components/LogginCard.stories.tsx
new file mode 100644
index 0000000..7b67577
--- /dev/null
+++ b/app/components/LogginCard.stories.tsx
@@ -0,0 +1,15 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+import { LogginCard } from "./LogginCard";
+
+const meta: Meta<typeof LogginCard> = {
+ title: "Components/LogginCard",
+ component: LogginCard,
+ args: {
+ style: { width: "600px", height: "300px" },
+ },
+};
+
+export default meta;
+
+export const Default: StoryObj<typeof LogginCard> = {};
diff --git a/app/components/LogginCard.tsx b/app/components/LogginCard.tsx
new file mode 100644
index 0000000..4525925
--- /dev/null
+++ b/app/components/LogginCard.tsx
@@ -0,0 +1,34 @@
+import { Slot } from "@radix-ui/react-slot";
+import React, { type ComponentPropsWithRef, forwardRef } from "react";
+import { cn } from "~/libs/utils";
+import { Button } from "./Button";
+import { Card } from "./Card";
+import { Input } from "./Input";
+
+export interface LogginCardProps extends ComponentPropsWithRef<"div"> {
+ asChild?: boolean;
+}
+
+export const LogginCard = forwardRef<HTMLDivElement, LogginCardProps>(
+ ({ className }) => {
+ return (
+ <Card className={cn("flex flex-col items-center gap-y-4 p-4 text-[24px]", className)}>
+ <h1
+ className={cn(className)}
+ >
+ 名前を入力して登録！
+ </h1>
+ <Input
+ placeholder="名前"
+ className={cn("text-[16px]",className)}
+ />
+ <Button
+ type="submit"
+ className={cn("text-[16px]",className)}
+ >
+ 登録
+ </Button>
+ </Card>
+ );
+ },
+);
From a7e1ebaf5bdaaf2c740935d4c62f45cee9560c7a Mon Sep 17 00:00:00 2001
From: thisagi <106305548+thisagi@users.noreply.github.com>
Date: Tue, 5 Nov 2024 17:49:10 +0900
Subject: [PATCH 2/3] fix: lint
---
app/components/LogginCard.tsx | 23 +++++++++--------------
1 file changed, 9 insertions(+), 14 deletions(-)
diff --git a/app/components/LogginCard.tsx b/app/components/LogginCard.tsx
index 4525925..16fd515 100644
--- a/app/components/LogginCard.tsx
+++ b/app/components/LogginCard.tsx
@@ -12,20 +12,15 @@ export interface LogginCardProps extends ComponentPropsWithRef<"div"> {
export const LogginCard = forwardRef<HTMLDivElement, LogginCardProps>(
({ className }) => {
return (
- <Card className={cn("flex flex-col items-center gap-y-4 p-4 text-[24px]", className)}>
- <h1
- className={cn(className)}
- >
- 名前を入力して登録！
- </h1>
- <Input
- placeholder="名前"
- className={cn("text-[16px]",className)}
- />
- <Button
- type="submit"
- className={cn("text-[16px]",className)}
- >
+ <Card
+ className={cn(
+ "flex flex-col items-center gap-y-4 p-4 text-[24px]",
+ className,
+ )}
+ >
+ <h1 className={cn(className)}>名前を入力して登録！</h1>
+ <Input placeholder="名前" className={cn("text-[16px]", className)} />
+ <Button type="submit" className={cn("text-[16px]", className)}>
登録
</Button>
</Card>
From 53e69b365f7261de1a8dcc7fbcc1a205e75beebb Mon Sep 17 00:00:00 2001
From: thisagi <106305548+thisagi@users.noreply.github.com>
Date: Tue, 5 Nov 2024 18:06:23 +0900
Subject: [PATCH 3/3] fix: font size
---
app/components/LogginCard.tsx | 15 ++++-----------
1 file changed, 4 insertions(+), 11 deletions(-)
diff --git a/app/components/LogginCard.tsx b/app/components/LogginCard.tsx
index 16fd515..569a3fd 100644
--- a/app/components/LogginCard.tsx
+++ b/app/components/LogginCard.tsx
@@ -12,17 +12,10 @@ export interface LogginCardProps extends ComponentPropsWithRef<"div"> {
export const LogginCard = forwardRef<HTMLDivElement, LogginCardProps>(
({ className }) => {
return (
- <Card
- className={cn(
- "flex flex-col items-center gap-y-4 p-4 text-[24px]",
- className,
- )}
- >
- <h1 className={cn(className)}>名前を入力して登録！</h1>
- <Input placeholder="名前" className={cn("text-[16px]", className)} />
- <Button type="submit" className={cn("text-[16px]", className)}>
- 登録
- </Button>
+ <Card className={cn("flex flex-col items-center gap-y-4 p-4", className)}>
+ <h1 className={"text-2xl drop-shadow-base"}>名前を入力して登録！</h1>
+ <Input placeholder="名前" />
+ <Button type="submit">登録</Button>
</Card>
);
},