Update layout and page components

ProgrammingLab · Feb 9, 2024 · 1f910f6 · 1f910f6
1 parent fd61ed2
commit 1f910f6
Show file tree

Hide file tree

Showing 4 changed files with 39 additions and 73 deletions.
diff --git a/frontend/app/layout.tsx b/frontend/app/layout.tsx
@@ -45,15 +45,15 @@ export default function RootLayout({
 						<main className="container mx-auto max-w-7xl pt-16 px-6 flex-grow">
 							{children}
 						</main>
-						<footer className="w-full flex items-center justify-center py-3">
+						<footer className="w-full flex flex-col items-center justify-center py-3">
+							<p>このウェブサイトがカスいと思った？今すぐ入部して編集！</p>
 							<Link
 								isExternal
 								className="flex items-center gap-1 text-current"
 								href="https://nextui-docs-v2.vercel.app?utm_source=next-app-template"
 								title="nextui.org homepage"
 							>
-								<span className="text-default-600">Powered by</span>
-								<p className="text-primary">NextUI</p>
+								<span className="text-default-600">(c) 2024 久留米高専プログラミングラボ部</span>
 							</Link>
 						</footer>
 					</div>

diff --git a/frontend/app/page.tsx b/frontend/app/page.tsx
@@ -1,44 +1,55 @@
+"use client";
+
+import { useState } from "react";
 import { Link } from "@nextui-org/link";
-import { Snippet } from "@nextui-org/snippet";
 import { Code } from "@nextui-org/code"
 import { button as buttonStyles } from "@nextui-org/theme";
 import { siteConfig } from "@/config/site";
 import { title, subtitle } from "@/components/primitives";
 import { GithubIcon } from "@/components/icons";
-
+import { useEffect } from "react";
+import { Odor_Mean_Chey } from "next/font/google";
+import { Typography } from "@mui/material";
+import { Skeleton } from "@nextui-org/react";
 
 export default function Home() {
+	const [counter, setCounter] = useState(0);
+	const [isLoaded, setIsLoaded] = useState(false);
+	useEffect(() => {
+		setCounter(-1);
+		setIsLoaded(true);
+	}, []);
+
 	return (
 		<section className="flex flex-col items-center justify-center gap-4 py-8 md:py-10">
 			<div className="inline-block max-w-lg text-center justify-center">
-				<h1 className={title()}>Make&nbsp;</h1>
-				<h1 className={title({ color: "violet" })}>beautiful&nbsp;</h1>
-				<br />
 				<h1 className={title()}>
-					websites regardless of your design experience.
+					久留米高専
 				</h1>
-				<h2 className={subtitle({ class: "mt-4" })}>
-					Beautiful, fast and modern React UI library.
-				</h2>
+				<br />
+				<h1 className={title({color: "blue"})}>
+					プログラミングラボ部
+				</h1>
+				<p className={subtitle({ class: "mt-4" })}>
+					KNCT ProgrammingLab
+				</p>
 			</div>
 
-			<div className="flex gap-3">
-				<Link
-					isExternal
-					className={buttonStyles({ variant: "bordered", radius: "full" })}
-					href={siteConfig.links.github}
-				>
-					<GithubIcon size={20} />
-					GitHub
-				</Link>
+			<div className="mt-8">
+				<Skeleton isLoaded={isLoaded}>
+					<p>あなたは<Code>{counter}</Code>人目の訪問者ですわ！</p>
+				</Skeleton>
+				<p>// under construction</p>
 			</div>
 
 			<div className="mt-8">
-				<Snippet hideSymbol hideCopyButton variant="flat">
-					<span>
-						Get started by editing <Code color="primary">app/page.tsx</Code>
-					</span>
-				</Snippet>
+				<h2 className={subtitle()}>
+					活動について
+				</h2>
+				<p>毎週{"{"}月, 水, 金{"}"}曜日</p>
+				<p>午後4時頃から</p>
+				<p>○○棟2階 制御情報工学実験室(通称SJ)</p>
+				<p>入部希望者はSJに来て下さい!</p>
 			</div>
 		</section>
 	);

diff --git a/frontend/components/counter.tsx b/frontend/components/counter.tsx
diff --git a/frontend/components/navbar.tsx b/frontend/components/navbar.tsx
@@ -29,29 +29,9 @@ import {
 } from "@/components/icons";
 
 export const Navbar = () => {
-	const searchInput = (
-		<Input
-			aria-label="Search"
-			classNames={{
-				inputWrapper: "bg-default-100",
-				input: "text-sm",
-			}}
-			endContent={
-				<Kbd className="hidden lg:inline-block" keys={["command"]}>
-					K
-				</Kbd>
-			}
-			labelPlacement="outside"
-			placeholder="Search..."
-			startContent={
-				<SearchIcon className="text-base text-default-400 pointer-events-none flex-shrink-0" />
-			}
-			type="search"
-		/>
-	);
 
 	return (
-		<NextUINavbar maxWidth="xl" position="sticky">
+		<NextUINavbar isBordered maxWidth="xl" position="sticky">
 			<NavbarContent className="basis-1/5 sm:basis-full" justify="start">
 				<NavbarBrand as="li" className="gap-3 max-w-fit">
 					<NextLink className="flex justify-start items-center gap-1" href="/">
@@ -101,21 +81,10 @@ export const Navbar = () => {
 			</NavbarContent>
 
 			<NavbarMenu>
-				{searchInput}
 				<div className="mx-4 mt-2 flex flex-col gap-2">
 					{siteConfig.navMenuItems.map((item, index) => (
 						<NavbarMenuItem key={`${item}-${index}`}>
-							<Link
-								color={
-									index === 2
-										? "primary"
-										: index === siteConfig.navMenuItems.length - 1
-										? "danger"
-										: "foreground"
-								}
-								href="#"
-								size="lg"
-							>
+							<Link color="foreground">
 								{item.label}
 							</Link>
 						</NavbarMenuItem>