team page
This commit is contained in:
parent
e3efe0756e
commit
4aa73a9f5f
44
package.json
44
package.json
|
@ -10,38 +10,38 @@
|
||||||
"start": "next start"
|
"start": "next start"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@next-auth/prisma-adapter": "^1.0.5",
|
"@next-auth/prisma-adapter": "^1.0.7",
|
||||||
"@prisma/client": "^4.16.2",
|
"@prisma/client": "^4.16.2",
|
||||||
"@t3-oss/env-nextjs": "^0.3.1",
|
"@t3-oss/env-nextjs": "^0.3.1",
|
||||||
"@tanstack/react-query": "^4.29.7",
|
"@tanstack/react-query": "^4.32.6",
|
||||||
"@trpc/client": "^10.26.0",
|
"@trpc/client": "^10.37.1",
|
||||||
"@trpc/next": "^10.26.0",
|
"@trpc/next": "^10.37.1",
|
||||||
"@trpc/react-query": "^10.26.0",
|
"@trpc/react-query": "^10.37.1",
|
||||||
"@trpc/server": "^10.26.0",
|
"@trpc/server": "^10.37.1",
|
||||||
"next": "^13.4.2",
|
"next": "^13.4.17",
|
||||||
"next-auth": "^4.22.1",
|
"next-auth": "^4.23.1",
|
||||||
"react": "18.2.0",
|
"react": "18.2.0",
|
||||||
"react-dom": "18.2.0",
|
"react-dom": "18.2.0",
|
||||||
"superjson": "1.12.2",
|
"superjson": "1.12.2",
|
||||||
"zod": "^3.21.4"
|
"zod": "^3.22.1"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@types/eslint": "^8.37.0",
|
"@types/eslint": "^8.44.2",
|
||||||
"@types/node": "^18.16.0",
|
"@types/node": "^18.17.5",
|
||||||
"@types/prettier": "^2.7.2",
|
"@types/prettier": "^2.7.3",
|
||||||
"@types/react": "^18.2.6",
|
"@types/react": "^18.2.20",
|
||||||
"@types/react-dom": "^18.2.4",
|
"@types/react-dom": "^18.2.7",
|
||||||
"@typescript-eslint/eslint-plugin": "^5.59.6",
|
"@typescript-eslint/eslint-plugin": "^5.62.0",
|
||||||
"@typescript-eslint/parser": "^5.59.6",
|
"@typescript-eslint/parser": "^5.62.0",
|
||||||
"autoprefixer": "^10.4.14",
|
"autoprefixer": "^10.4.15",
|
||||||
"eslint": "^8.40.0",
|
"eslint": "^8.47.0",
|
||||||
"eslint-config-next": "^13.4.2",
|
"eslint-config-next": "^13.4.17",
|
||||||
"postcss": "^8.4.21",
|
"postcss": "^8.4.28",
|
||||||
"prettier": "^2.8.8",
|
"prettier": "^2.8.8",
|
||||||
"prettier-plugin-tailwindcss": "^0.2.8",
|
"prettier-plugin-tailwindcss": "^0.2.8",
|
||||||
"prisma": "^4.16.2",
|
"prisma": "^4.16.2",
|
||||||
"tailwindcss": "^3.3.0",
|
"tailwindcss": "^3.3.3",
|
||||||
"typescript": "^5.0.4"
|
"typescript": "^5.1.6"
|
||||||
},
|
},
|
||||||
"ct3aMetadata": {
|
"ct3aMetadata": {
|
||||||
"initVersion": "7.15.0"
|
"initVersion": "7.15.0"
|
||||||
|
|
1270
pnpm-lock.yaml
1270
pnpm-lock.yaml
File diff suppressed because it is too large
Load Diff
|
@ -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>
|
||||||
|
);
|
||||||
|
};
|
|
@ -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>
|
||||||
|
)}
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
|
@ -1,5 +1,4 @@
|
||||||
import Link from "next/link";
|
import Link from "next/link";
|
||||||
import { PropsWithChildren, useState } from "react";
|
|
||||||
|
|
||||||
export const LinkButton = (
|
export const LinkButton = (
|
||||||
props: {
|
props: {
|
||||||
|
|
|
@ -1,10 +1,11 @@
|
||||||
import { NavigationLink } from "./NavigationLink";
|
import { NavigationLink } from "./NavigationLink";
|
||||||
|
|
||||||
export const NavigationBar = () => {
|
export const NavigationBar = () => {
|
||||||
return (
|
return (
|
||||||
<div className="flex">
|
<div className="flex">
|
||||||
<NavigationLink href="/" text="Home" />
|
<NavigationLink href="/" text="Home" />
|
||||||
<NavigationLink href="/about" text="Our Mission" />
|
<NavigationLink href="/about" text="Our Mission" />
|
||||||
</div>
|
<NavigationLink href="/team" text="Our Team" />
|
||||||
);
|
</div>
|
||||||
};
|
);
|
||||||
|
};
|
||||||
|
|
|
@ -6,7 +6,7 @@ export const PageContentBox = (
|
||||||
} & PropsWithChildren
|
} & PropsWithChildren
|
||||||
) => {
|
) => {
|
||||||
return (
|
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 ? (
|
{props.title ? (
|
||||||
<h3 className="text-2xl font-bold">{props.title}</h3>
|
<h3 className="text-2xl font-bold">{props.title}</h3>
|
||||||
) : (
|
) : (
|
||||||
|
|
|
@ -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>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
Loading…
Reference in New Issue