feat: add LogginCard (#50)

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> = {};

app/components/LogginCard.tsx

@@ -0,0 +1,22 @@
+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", className)}>
+				<h1 className={"text-2xl drop-shadow-base"}>名前を入力して登録！</h1>
+				<Input placeholder="名前" />
+				<Button type="submit">登録</Button>
+			</Card>
+		);
+	},
+);