"Fix code formatting issues and add translation language select compo…

…nent" (#25)
ttizze · Jul 15, 2024 · 368055e · 368055e
1 parent 6436101
commit 368055e
Show file tree

Hide file tree

Showing 34 changed files with 1,207 additions and 940 deletions.
diff --git a/web/ tailwind.config.ts b/web/ tailwind.config.ts
@@ -1,80 +1,80 @@
-import type { Config } from "tailwindcss"
+import type { Config } from "tailwindcss";
 
 const config = {
-  darkMode: ["class"],
-  content: [
-    './pages/**/*.{ts,tsx}',
-    './components/**/*.{ts,tsx}',
-    './app/**/*.{ts,tsx}',
-    './src/**/*.{ts,tsx}',
+	darkMode: ["class"],
+	content: [
+		"./pages/**/*.{ts,tsx}",
+		"./components/**/*.{ts,tsx}",
+		"./app/**/*.{ts,tsx}",
+		"./src/**/*.{ts,tsx}",
 	],
-  prefix: "",
-  theme: {
-    container: {
-      center: true,
-      padding: "2rem",
-      screens: {
-        "2xl": "1400px",
-      },
-    },
-    extend: {
-      colors: {
-        border: "hsl(var(--border))",
-        input: "hsl(var(--input))",
-        ring: "hsl(var(--ring))",
-        background: "hsl(var(--background))",
-        foreground: "hsl(var(--foreground))",
-        primary: {
-          DEFAULT: "hsl(var(--primary))",
-          foreground: "hsl(var(--primary-foreground))",
-        },
-        secondary: {
-          DEFAULT: "hsl(var(--secondary))",
-          foreground: "hsl(var(--secondary-foreground))",
-        },
-        destructive: {
-          DEFAULT: "hsl(var(--destructive))",
-          foreground: "hsl(var(--destructive-foreground))",
-        },
-        muted: {
-          DEFAULT: "hsl(var(--muted))",
-          foreground: "hsl(var(--muted-foreground))",
-        },
-        accent: {
-          DEFAULT: "hsl(var(--accent))",
-          foreground: "hsl(var(--accent-foreground))",
-        },
-        popover: {
-          DEFAULT: "hsl(var(--popover))",
-          foreground: "hsl(var(--popover-foreground))",
-        },
-        card: {
-          DEFAULT: "hsl(var(--card))",
-          foreground: "hsl(var(--card-foreground))",
-        },
-      },
-      borderRadius: {
-        lg: "var(--radius)",
-        md: "calc(var(--radius) - 2px)",
-        sm: "calc(var(--radius) - 4px)",
-      },
-      keyframes: {
-        "accordion-down": {
-          from: { height: "0" },
-          to: { height: "var(--radix-accordion-content-height)" },
-        },
-        "accordion-up": {
-          from: { height: "var(--radix-accordion-content-height)" },
-          to: { height: "0" },
-        },
-      },
-      animation: {
-        "accordion-down": "accordion-down 0.2s ease-out",
-        "accordion-up": "accordion-up 0.2s ease-out",
-      },
-    },
-  },
-  plugins: [require("tailwindcss-animate")],
-} satisfies Config
+	prefix: "",
+	theme: {
+		container: {
+			center: true,
+			padding: "2rem",
+			screens: {
+				"2xl": "1400px",
+			},
+		},
+		extend: {
+			colors: {
+				border: "hsl(var(--border))",
+				input: "hsl(var(--input))",
+				ring: "hsl(var(--ring))",
+				background: "hsl(var(--background))",
+				foreground: "hsl(var(--foreground))",
+				primary: {
+					DEFAULT: "hsl(var(--primary))",
+					foreground: "hsl(var(--primary-foreground))",
+				},
+				secondary: {
+					DEFAULT: "hsl(var(--secondary))",
+					foreground: "hsl(var(--secondary-foreground))",
+				},
+				destructive: {
+					DEFAULT: "hsl(var(--destructive))",
+					foreground: "hsl(var(--destructive-foreground))",
+				},
+				muted: {
+					DEFAULT: "hsl(var(--muted))",
+					foreground: "hsl(var(--muted-foreground))",
+				},
+				accent: {
+					DEFAULT: "hsl(var(--accent))",
+					foreground: "hsl(var(--accent-foreground))",
+				},
+				popover: {
+					DEFAULT: "hsl(var(--popover))",
+					foreground: "hsl(var(--popover-foreground))",
+				},
+				card: {
+					DEFAULT: "hsl(var(--card))",
+					foreground: "hsl(var(--card-foreground))",
+				},
+			},
+			borderRadius: {
+				lg: "var(--radius)",
+				md: "calc(var(--radius) - 2px)",
+				sm: "calc(var(--radius) - 4px)",
+			},
+			keyframes: {
+				"accordion-down": {
+					from: { height: "0" },
+					to: { height: "var(--radix-accordion-content-height)" },
+				},
+				"accordion-up": {
+					from: { height: "var(--radix-accordion-content-height)" },
+					to: { height: "0" },
+				},
+			},
+			animation: {
+				"accordion-down": "accordion-down 0.2s ease-out",
+				"accordion-up": "accordion-up 0.2s ease-out",
+			},
+		},
+	},
+	plugins: [require("tailwindcss-animate")],
+} satisfies Config;
 
-export default config
+export default config;
diff --git a/web/app/components/GoogleForm.tsx b/web/app/components/GoogleForm.tsx
@@ -1,20 +1,20 @@
-import { Form } from '@remix-run/react'
-import { FaGoogle } from 'react-icons/fa'
-import { Button } from "~/components/ui/button"
+import { Form } from "@remix-run/react";
+import { FaGoogle } from "react-icons/fa";
+import { Button } from "~/components/ui/button";
 
 export const GoogleForm = () => {
-  return (
-    <Form method="POST" className="w-full">
-      <Button
-        type="submit"
-        name="_action"
-        value="SignInWithGoogle"
-        variant="outline"
-        className="w-full"
-      >
-        <FaGoogle className="mr-2 h-4 w-4" />
-        Sign In with Google
-      </Button>
-    </Form>
-  )
-}
+	return (
+		<Form method="POST" className="w-full">
+			<Button
+				type="submit"
+				name="_action"
+				value="SignInWithGoogle"
+				variant="outline"
+				className="w-full"
+			>
+				<FaGoogle className="mr-2 h-4 w-4" />
+				Sign In with Google
+			</Button>
+		</Form>
+	);
+};
diff --git a/web/app/components/Header.tsx b/web/app/components/Header.tsx
@@ -1,38 +1,46 @@
-import { Link } from '@remix-run/react'
-import { useLoaderData } from '@remix-run/react'
-import type { User } from '@prisma/client'
+import type { User } from "@prisma/client";
+import { Link } from "@remix-run/react";
 
-interface LoaderData {
-  user: User | null
-}
+type UserWithoutPassword = Omit<User, "password">;
 
-export function Header() {
-  const { user } = useLoaderData<LoaderData>()
+interface HeaderProps {
+	user: UserWithoutPassword | null;
+}
 
-  return (
-<header className="bg-white shadow-sm">
-<div className="max-w-7xl mx-auto py-4 px-4 sm:px-6 lg:px-8 flex justify-between items-center">
-  <h1 className="text-3xl font-bold text-gray-900">EveEve</h1>
-  <nav>
-    {user ? (
-      <div className="flex items-center space-x-4">
-        <span className="text-gray-700">ようこそ、{user.name}さん！</span>
-        <Link to="/auth/logout" className="text-blue-600 hover:text-blue-800 font-medium">
-          ログアウト
-        </Link>
-      </div>
-    ) : (
-      <div className="space-x-4">
-        <Link to="/auth/login" className="text-blue-600 hover:text-blue-800 font-medium">
-          ログイン
-        </Link>
-        <Link to="/auth/signup" className="text-blue-600 hover:text-blue-800 font-medium">
-          サインアップ
-        </Link>
-      </div>
-    )}
-  </nav>
-</div>
-</header>
-  )
-}
+export function Header({ user }: HeaderProps) {
+	return (
+		<header className="bg-white shadow-sm">
+			<div className="max-w-7xl mx-auto py-4 px-4 sm:px-6 lg:px-8 flex justify-between items-center">
+				<h1 className="text-3xl font-bold text-gray-900">EveEve</h1>
+				<nav>
+					{user ? (
+						<div className="flex items-center space-x-4">
+							<span className="text-gray-700">ようこそ、{user.name}さん！</span>
+							<Link
+								to="/auth/logout"
+								className="text-blue-600 hover:text-blue-800 font-medium"
+							>
+								ログアウト
+							</Link>
+						</div>
+					) : (
+						<div className="space-x-4">
+							<Link
+								to="/auth/login"
+								className="text-blue-600 hover:text-blue-800 font-medium"
+							>
+								ログイン
+							</Link>
+							<Link
+								to="/auth/signup"
+								className="text-blue-600 hover:text-blue-800 font-medium"
+							>
+								サインアップ
+							</Link>
+						</div>
+					)}
+				</nav>
+			</div>
+		</header>
+	);
+}
diff --git a/web/app/components/ui/alert.tsx b/web/app/components/ui/alert.tsx
@@ -1,59 +1,59 @@
-import * as React from "react"
-import { cva, type VariantProps } from "class-variance-authority"
+import { type VariantProps, cva } from "class-variance-authority";
+import * as React from "react";
 
-import { cn } from "~/utils"
+import { cn } from "~/utils";
 
 const alertVariants = cva(
-  "relative w-full rounded-lg border px-4 py-3 text-sm [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground [&>svg~*]:pl-7",
-  {
-    variants: {
-      variant: {
-        default: "bg-background text-foreground",
-        destructive:
-          "border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-    },
-  }
-)
+	"relative w-full rounded-lg border px-4 py-3 text-sm [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground [&>svg~*]:pl-7",
+	{
+		variants: {
+			variant: {
+				default: "bg-background text-foreground",
+				destructive:
+					"border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive",
+			},
+		},
+		defaultVariants: {
+			variant: "default",
+		},
+	},
+);
 
 const Alert = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVariants>
+	HTMLDivElement,
+	React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVariants>
 >(({ className, variant, ...props }, ref) => (
-  <div
-    ref={ref}
-    role="alert"
-    className={cn(alertVariants({ variant }), className)}
-    {...props}
-  />
-))
-Alert.displayName = "Alert"
+	<div
+		ref={ref}
+		role="alert"
+		className={cn(alertVariants({ variant }), className)}
+		{...props}
+	/>
+));
+Alert.displayName = "Alert";
 
 const AlertTitle = React.forwardRef<
-  HTMLParagraphElement,
-  React.HTMLAttributes<HTMLHeadingElement>
+	HTMLParagraphElement,
+	React.HTMLAttributes<HTMLHeadingElement>
 >(({ className, ...props }, ref) => (
-  <h5
-    ref={ref}
-    className={cn("mb-1 font-medium leading-none tracking-tight", className)}
-    {...props}
-  />
-))
-AlertTitle.displayName = "AlertTitle"
+	<h5
+		ref={ref}
+		className={cn("mb-1 font-medium leading-none tracking-tight", className)}
+		{...props}
+	/>
+));
+AlertTitle.displayName = "AlertTitle";
 
 const AlertDescription = React.forwardRef<
-  HTMLParagraphElement,
-  React.HTMLAttributes<HTMLParagraphElement>
+	HTMLParagraphElement,
+	React.HTMLAttributes<HTMLParagraphElement>
 >(({ className, ...props }, ref) => (
-  <div
-    ref={ref}
-    className={cn("text-sm [&_p]:leading-relaxed", className)}
-    {...props}
-  />
-))
-AlertDescription.displayName = "AlertDescription"
+	<div
+		ref={ref}
+		className={cn("text-sm [&_p]:leading-relaxed", className)}
+		{...props}
+	/>
+));
+AlertDescription.displayName = "AlertDescription";
 
-export { Alert, AlertTitle, AlertDescription }
+export { Alert, AlertTitle, AlertDescription };