team page

This commit is contained in:
Hri7566 2023-09-01 17:42:17 -04:00
parent e3efe0756e
commit 4aa73a9f5f
8 changed files with 742 additions and 699 deletions

View File

@ -10,38 +10,38 @@
"start": "next start"
},
"dependencies": {
"@next-auth/prisma-adapter": "^1.0.5",
"@next-auth/prisma-adapter": "^1.0.7",
"@prisma/client": "^4.16.2",
"@t3-oss/env-nextjs": "^0.3.1",
"@tanstack/react-query": "^4.29.7",
"@trpc/client": "^10.26.0",
"@trpc/next": "^10.26.0",
"@trpc/react-query": "^10.26.0",
"@trpc/server": "^10.26.0",
"next": "^13.4.2",
"next-auth": "^4.22.1",
"@tanstack/react-query": "^4.32.6",
"@trpc/client": "^10.37.1",
"@trpc/next": "^10.37.1",
"@trpc/react-query": "^10.37.1",
"@trpc/server": "^10.37.1",
"next": "^13.4.17",
"next-auth": "^4.23.1",
"react": "18.2.0",
"react-dom": "18.2.0",
"superjson": "1.12.2",
"zod": "^3.21.4"
"zod": "^3.22.1"
},
"devDependencies": {
"@types/eslint": "^8.37.0",
"@types/node": "^18.16.0",
"@types/prettier": "^2.7.2",
"@types/react": "^18.2.6",
"@types/react-dom": "^18.2.4",
"@typescript-eslint/eslint-plugin": "^5.59.6",
"@typescript-eslint/parser": "^5.59.6",
"autoprefixer": "^10.4.14",
"eslint": "^8.40.0",
"eslint-config-next": "^13.4.2",
"postcss": "^8.4.21",
"@types/eslint": "^8.44.2",
"@types/node": "^18.17.5",
"@types/prettier": "^2.7.3",
"@types/react": "^18.2.20",
"@types/react-dom": "^18.2.7",
"@typescript-eslint/eslint-plugin": "^5.62.0",
"@typescript-eslint/parser": "^5.62.0",
"autoprefixer": "^10.4.15",
"eslint": "^8.47.0",
"eslint-config-next": "^13.4.17",
"postcss": "^8.4.28",
"prettier": "^2.8.8",
"prettier-plugin-tailwindcss": "^0.2.8",
"prisma": "^4.16.2",
"tailwindcss": "^3.3.0",
"typescript": "^5.0.4"
"tailwindcss": "^3.3.3",
"typescript": "^5.1.6"
},
"ct3aMetadata": {
"initVersion": "7.15.0"

File diff suppressed because it is too large Load Diff

View File

@ -0,0 +1,16 @@
export const EmployeeDescription = (
props: {
name: string;
position: string;
} = {
name: "Title",
position: "Text",
}
) => {
return (
<div className="m-3 flex max-w-xs flex-col gap-4 rounded-xl bg-white/10 p-4 text-white shadow-lg backdrop-blur-sm transition-all hover:bg-white/20 hover:shadow-2xl hover:backdrop-blur">
<h3 className="text-2xl font-bold">{props.name}</h3>
<div className="text-lg">{props.position}</div>
</div>
);
};

View File

@ -0,0 +1,48 @@
import { useEffect, useState } from "react";
import { EmployeeDescription } from "~/components/EmployeeDescription";
export const EmployeeList = () => {
const [employees, setEmployees] = useState({} as Record<string, string>);
const [loaded, setLoaded] = useState(false);
const getEmployees = () => {
fetch("https://xnl.hri7566.info/employment/", {
next: {
revalidate: 60,
},
})
.then((res) => {
res
.json()
.then((j) => {
setEmployees(j as Record<string, string>);
setLoaded(true);
})
.catch((err) => console.error(err));
})
.catch((err) => console.error(err));
};
useEffect(() => {
getEmployees();
}, []);
return (
<>
{/* <EmployeeDescription name="Test" position="test" /> */}
{loaded ? (
Object.keys(employees)
.sort()
.map((k) => (
<EmployeeDescription
name={k}
position={employees[k] || "<no position>"}
key={Object.keys(employees).indexOf(k)}
/>
))
) : (
<p>Loading...</p>
)}
</>
);
};

View File

@ -1,5 +1,4 @@
import Link from "next/link";
import { PropsWithChildren, useState } from "react";
export const LinkButton = (
props: {

View File

@ -1,10 +1,11 @@
import { NavigationLink } from "./NavigationLink";
export const NavigationBar = () => {
return (
<div className="flex">
<NavigationLink href="/" text="Home" />
<NavigationLink href="/about" text="Our Mission" />
</div>
);
};
import { NavigationLink } from "./NavigationLink";
export const NavigationBar = () => {
return (
<div className="flex">
<NavigationLink href="/" text="Home" />
<NavigationLink href="/about" text="Our Mission" />
<NavigationLink href="/team" text="Our Team" />
</div>
);
};

View File

@ -6,7 +6,7 @@ export const PageContentBox = (
} & PropsWithChildren
) => {
return (
<div className="flex max-w-xs flex-col gap-4 rounded-xl bg-white/10 p-4 text-white shadow-lg backdrop-blur-sm">
<div className="flex flex-col gap-4 rounded-xl bg-white/10 p-4 text-white shadow-lg backdrop-blur-sm">
{props.title ? (
<h3 className="text-2xl font-bold">{props.title}</h3>
) : (

39
src/pages/team.tsx Normal file
View File

@ -0,0 +1,39 @@
import { signIn, signOut, useSession } from "next-auth/react";
import Head from "next/head";
import Link from "next/link";
import { Logo } from "../components/Logo";
import { NavigationBar } from "~/components/NavigationBar";
import { PageContentBox } from "~/components/PageContentBox";
import { EmployeeList } from "~/components/EmployeeList";
export default function Employment() {
return (
<>
<Head>
<title>XCL</title>
<meta name="description" content="XCL homepage" />
<link rel="icon" href="/favicon.ico" />
</Head>
{/* <main className="flex min-h-screen flex-col items-center justify-center bg-gradient-to-b from-[#993800] to-[#250e00]"> */}
<main className="bg-[url(/bg.png)] bg-cover bg-center">
<div className="bg-black/60">
<div className="flex min-h-screen flex-col items-center justify-center bg-orange-800/40">
<Link className="absolute left-0 top-0" href="/">
<Logo />
</Link>
<div className="absolute right-0 top-0">
<NavigationBar />
</div>
<div className="container flex flex-col items-center justify-center gap-12 px-4 py-16">
<PageContentBox title="Employees">
<div className="grid grid-cols-1 md:grid-cols-3">
<EmployeeList />
</div>
</PageContentBox>
</div>
</div>
</div>
</main>
</>
);
}