Game calendar working

src/components/account/AccountStatusSelector.tsx

@@ -8,7 +8,7 @@ export default function AccountStatusSelector({
 	value: AccountStatus;
 	onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
 }){
-	const modalId = crypto.randomUUID().replace("-", "");
+	const modalId = crypto.randomUUID().replaceAll("-", "");
 
 
 	return (

src/components/game/GameSelector.tsx

@@ -18,7 +18,7 @@ export default function GameSelector({
 	const [ searchTerm, setSearchTerm ] = useState(game?.gameName ?? "");
 	const [ searching, setSearching ] = useState(false);
 
-	const modalId = crypto.randomUUID().replace("-", "");
+	const modalId = crypto.randomUUID().replaceAll("-", "");
 
 
 	const gameSearchQuery = useGetGames(0, 5, gameSearch);

src/components/input/DateInput.tsx

@@ -0,0 +1,47 @@
+import clsx from "clsx";
+import { ComponentProps } from "react";
+
+
+interface DateInputProps extends ComponentProps<"input">{
+	id: string;
+	inputClasses?: string;
+	labelClasses?: string;
+	accepted?: boolean;
+}
+
+
+export default function DateInput(props: DateInputProps){
+	const { id, placeholder, inputClasses, labelClasses } = props;
+
+
+	return (
+		<div
+			className="bg-inherit px-4 pb-4 rounded-sm w-full md:flex md:justify-center"
+		>
+			<div
+				className="relative bg-inherit w-full"
+			>
+				<input
+					{...props}
+					id={id}
+					className={clsx(
+						"peer px-2 py-1 rounded-lg ring-2 ring-gray-500 focus:ring-sky-600 outline-hidden w-full",
+						inputClasses
+					)}
+					type="datetime-local"
+				/>
+				<label
+					htmlFor={id}
+					id={`${id}Label`}
+					className={clsx(
+						"absolute cursor-pointer left-0 -top-3 mx-1 px-1",
+						"bg-white dark:bg-neutral-825 text-sm peer-focus:text-sky-600",
+						labelClasses
+					)}
+				>
+					{placeholder}
+				</label>
+			</div>
+		</div>
+	);
+}

src/components/input/TextArea.tsx

@@ -0,0 +1,64 @@
+import clsx from "clsx";
+import { ComponentProps } from "react";
+
+
+export interface TextAreaProps extends ComponentProps<"textarea">{
+	id: string;
+	inputClasses?: string;
+	labelClasses?: string;
+	accepted?: boolean;
+}
+
+export default function TextArea(props: TextAreaProps){
+	const { id, placeholder, name, inputClasses, labelClasses, accepted } = props;
+
+
+	return (
+		<div
+			className="bg-inherit p-4 rounded-sm w-full md:flex md:justify-center"
+		>
+			<div
+				className="relative bg-inherit w-full"
+			>
+				<textarea
+					{...props}
+					id={id}
+					name={name}
+					className={clsx(
+						"peer bg-transparent w-full md:min-w-72 h-24 px-2 py-1 rounded-lg",
+						"ring-2 ring-gray-500 focus:ring-sky-600 placeholder-transparent outline-hidden",
+						inputClasses,
+						{
+							"ring-gray-500": accepted === undefined,
+							"ring-red-600": accepted === false,
+							"ring-green-600": accepted === true
+						}
+					)}
+					style={{resize: "none"}}
+				/>
+				<label
+					htmlFor={id}
+					id={`${id}Label`}
+					className={clsx(
+						"absolute cursor-text left-0 -top-3 mx-1 px-1",
+						"bg-white dark:bg-neutral-825 text-sm",
+						"peer-placeholder-shown:text-base peer-placeholder-shown:text-gray-500 peer-placeholder-shown:top-1 peer-focus:-top-3 peer-focus:text-sky-600 peer-focus:text-sm",
+						labelClasses,
+						{
+							"text-gray-500": accepted === undefined,
+							"text-red-600": accepted === false,
+							"text-green-600": accepted === true
+						}
+					)}
+					style={{
+						transitionProperty: "top, font-size, line-height",
+						transitionTimingFunction: "cubic-bezier(0.4, 0, 0.2, 1)",
+						transitionDuration: "150ms"
+					}}
+				>
+					{placeholder}
+				</label>
+			</div>
+		</div>
+	);
+}

src/components/input/TextInput.tsx

@@ -51,7 +51,8 @@ export default function TextInput(props: TextInputProps){
 							"text-green-600": accepted === true
 						}
 					)}
-					style={{transitionProperty: "top, font-size, line-height",
+					style={{
+						transitionProperty: "top, font-size, line-height",
 						transitionTimingFunction: "cubic-bezier(0.4, 0, 0.2, 1)",
 						transitionDuration: "150ms"
 					}}

src/components/modal/ModalFooter.tsx

@@ -18,7 +18,7 @@ export default function ModalFooter(props: HTMLProps<HTMLDivElement>){
 			)}
 		>
 			<div
-				className="flex flex-row justify-center mx-8 my-3"
+				className="flex flex-row justify-center items-center w-full mx-8 my-3"
 			>
 				{children}
 			</div>

src/components/modal/RaidBuilderModal.tsx

@@ -49,7 +49,7 @@ export default function RaidBuilderModal({
 				className="bg-[#00000022] dark:bg-[#FFFFFF16]"
 			>
 				<div
-					className="flex flex-row items-center justify-center gap-4"
+					className="flex flex-row items-center justify-center gap-4 w-full"
 				>
 					{modalFooter}
 				</div>