BasegBot/InvestWeb
5
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

head metadata and team init

Browse source
This commit is contained in:
3zachm 2022-12-10 02:54:00 -08:00
parent 63c8d394cc
commit d2d4ee5813
6 changed files with 107 additions and 54 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

17
layouts/HomeLayout.tsx
View file

@ -20,16 +20,27 @@ function HomeLayout(props: HomeLayoutProps) {
<>
<Head>
<title>InvestBot</title>
<meta name="description" content="Temporary home :)" />
<meta name="description" content="Serving anny's community est. 2022" />
<link rel="icon" href="/favicon.ico" />
<meta name="theme-color" content="#c084fc" />
<meta property="og:title" content="InvestBot" />
<meta
property="og:description"
content="Serving anny's community est. 2022"
/>
<meta property="og:image" content="/img/logo.webp" />
<meta property="og:type" content="website" />
<meta property="og:site_name" content="InvestBot" />
</Head>
<LazyMotion features={domAnimation}>
<AnimatePresence exitBeforeEnter>
<AnimatePresence mode="wait">
<NavBar options={navOptions} />
</AnimatePresence>
</LazyMotion>
<LazyMotion features={domAnimation}>
<AnimatePresence exitBeforeEnter>
<AnimatePresence mode="wait">
<m.div
key={router.route.concat("layout-fade")}
className="h-screen w-screen"

3
layouts/NavTemplates.tsx
View file

@ -27,7 +27,7 @@ const DefaultNavOption = ({
}}
>
<Link href={href} key={label}>
<p className="pointer-events-auto relative select-none pl-3 pr-3 text-white md:pl-5 md:pr-5">
<p className="pointer-events-auto relative select-none pl-3 pr-3 font-plusJakarta text-white md:pl-5 md:pr-5">
{label}
</p>
</Link>
@ -42,6 +42,7 @@ interface NavTemplate {
const homeMain: NavTemplate[] = [
{ content: <DefaultNavOption label="Home" href="/" /> },
{ content: <DefaultNavOption label="About" href="/about" /> },
{ content: <DefaultNavOption label="Team" href="/team" /> },
{ content: <DefaultNavOption label="Contact" href="/contact" /> },
];

5
pages/about.tsx
View file

@ -5,9 +5,14 @@ import { homeMain } from "../layouts/NavTemplates";
function About() {
return (
<>
<Head>
<title>About - InvestBot</title>
</Head>
<div className="flex min-h-screen flex-col items-center justify-center py-2">
<p>about</p>
</div>
</>
);
}

5
pages/contact.tsx
View file

@ -5,9 +5,14 @@ import { homeMain } from "../layouts/NavTemplates";
function About() {
return (
<>
<Head>
<title>Contact - InvestBot</title>
</Head>
<div className="flex min-h-screen flex-col items-center justify-center py-2">
<p>contact</p>
</div>
</>
);
}

8
pages/index.tsx
View file

@ -4,11 +4,13 @@ import HomeLayout from "../layouts/HomeLayout";
import { homeMain } from "../layouts/NavTemplates";
import type { NextPageWithLayout } from "./_app";
import Image from "next/image";
import Head from "next/head";
const Home: NextPageWithLayout = () => {
let api7tvEmotes = `/api/7tv/emotes?c=61ad997effa9aba101bcfddf`;
const [emotesUrls, setEmotes] = useState([]);
const [currentEmote, setCurrentEmote] = useState(0);
useEffect(() => {
fetch(api7tvEmotes)
.then((res) => res.json())
@ -40,6 +42,7 @@ const Home: NextPageWithLayout = () => {
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
// change emote every 5 seconds, separated from the fetch call so it only initializes once when the emotes are loaded
useEffect(() => {
const interval = setInterval(() => {
// choose a random emote
@ -72,6 +75,10 @@ const Home: NextPageWithLayout = () => {
}
return (
<>
<Head>
<title>Home - InvestBot</title>
</Head>
<div className="flex h-full w-full flex-col items-center justify-center">
<div className="inline-grid grid-cols-1 gap-10 text-white md:grid-cols-3">
<m.div
@ -121,6 +128,7 @@ const Home: NextPageWithLayout = () => {
</m.div>
</div>
</div>
</>
);
};

23
pages/team.tsx Normal file
View file

@ -0,0 +1,23 @@
import Head from "next/head";
import { ReactElement } from "react";
import HomeLayout from "../layouts/HomeLayout";
import { homeMain } from "../layouts/NavTemplates";
function Team() {
return (
<>
<Head>
<title>Team - InvestBot</title>
</Head>
<div className="flex min-h-screen flex-col items-center justify-center py-2">
<p>Team</p>
</div>
</>
);
}
Team.getLayout = function getLayout(page: ReactElement) {
return <HomeLayout navOptions={homeMain}>{page}</HomeLayout>;
};
export default Team;