Fix TextInput props and search bar

nekiro · nekiro · commit fe1d1a5b3eb1 · 2024-11-24T17:29:22.000+01:00
diff --git a/src/components/TextInput.tsx b/src/components/TextInput.tsx
@@ -1,23 +1,16 @@
 import React from "react";
-import { Input } from "@chakra-ui/react";
+import { Input, InputProps } from "@chakra-ui/react";
 
-export interface TextInputProps {
-	placeholder?: string;
+export interface TextInputProps extends InputProps {
 	type?: string;
-	name?: string;
 }
 
-const TextInput = ({
-	placeholder,
-	type = "text",
-	name,
-	...props
-}: TextInputProps) => {
+const TextInput = ({ type = "text", ...props }: TextInputProps) => {
 	return (
 		<Input
 			{...props}
 			variant="filled"
-			_focus={{ borderColor: "violet.400" }}
+			_focus={{ borderColor: "violet.400", backgroundColor: "white" }}
 			_hover={{ borderColor: "violet.400" }}
 			borderColor="violet.200"
 			bg="white"
diff --git a/src/layout/Footer.tsx b/src/layout/Footer.tsx
@@ -4,7 +4,7 @@ import { Box } from "@chakra-ui/react";
 const Footer = () => {
 	return (
 		<Box bgColor="#f5f5f5" border="1px" borderRadius="md" padding="10px" textAlign="center">
-			Copyright © 2021-2023 Shibaac
+			Copyright © 2021-2025 Shibaac
 		</Box>
 	);
 };
diff --git a/src/layout/NavBar.tsx b/src/layout/NavBar.tsx
@@ -94,9 +94,11 @@ const DesktopNavigation = ({ user }) => {
 				<form
 					onSubmit={(event) => {
 						event.preventDefault();
-						if (event.target.search.value) {
-							router.push(`/character/${event.target.search.value}`);
-							event.target.reset();
+						const form = event.currentTarget;
+						const searchValue = (form.elements.namedItem("search") as any)?.value;
+						if (searchValue) {
+							router.push(`/character/${searchValue}`);
+							form.reset();
 						}
 					}}
 				>
diff --git a/src/layout/index.tsx b/src/layout/index.tsx
@@ -8,7 +8,7 @@ import { Box, Image, Flex } from "@chakra-ui/react";
 const Layout = ({ children }) => {
 	return (
 		<Box w={{ base: "95%", md: "70%" }} marginX={"auto"} marginY={{ base: "1em", md: 0 }}>
-			<Head title="layout" />
+			<Head />
 			<Image width="15%" marginLeft="auto" marginRight="auto" marginBottom="15px" marginTop="15px" src="/images/header.png" alt="shibaac" />
 			<NavBar />
 			<Flex flexDirection={{ base: "column", md: "row" }}>
