Skip to content

Commit

Permalink
Merge pull request #25 from aanndch/feature/navbar
Browse files Browse the repository at this point in the history 
Navbar and Footer changes
  • Loading branch information
@coinmoles
coinmoles authored Jul 14, 2024
2 parents f1cf0ac + cc08e6f commit c9d3fc7
Show file tree
Hide file tree
Showing 4 changed files with 123 additions and 101 deletions.
16 changes: 7 additions & 9 deletions src/components/Footer.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,13 +2,11 @@ import React from "react";
import { Link } from "gatsby";

export default function Footer() {
return (
<>
<div className="container text-center">
<p className="border-t border-slate-400 dark:border-slate-700 pt-5">
PokeRogue Projects
</p>
</div>
</>
);
return (
<div className="container text-center">
<p className="border-t border-slate-400 dark:border-slate-700 py-5">
PokeRogue Projects
</p>
</div>
);
}
33 changes: 19 additions & 14 deletions src/components/Header.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,19 +1,24 @@
import { Link } from "gatsby";
import React from "react";
import React, { useState } from "react";
import { ModeToggle } from "./ModeToggle";
import DatePicker from "./DatePicker";
import { toZonedTime } from "date-fns-tz";

export default function Header() {
return (
<>
<div className="container mx-auto">
<nav className="flex justify-between py-3 ">
<div className="uppercase font-bold">Pokerogue Daily Runs</div>
<div className="flex gap-4 items-center">
<Link to="/">Homepage</Link>
<ModeToggle />
</div>
</nav>
</div>
</>
);
const [date, setDate] = useState<Date>(
toZonedTime(new Date(Date.now()), "UTC")
);

return (
<div className="container mx-auto">
<nav className="flex flex-col justify-between items-center gap-3 py-4 md:flex-row">
<div className="uppercase font-bold">Pokerogue Daily Runs</div>
<div className="flex gap-6 items-center">
<Link to="/">Home</Link>
<ModeToggle />
<DatePicker date={date} onDateChange={setDate} />
</div>
</nav>
</div>
);
}
18 changes: 9 additions & 9 deletions src/components/Layout.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,13 +4,13 @@ import Footer from "./Footer";
import { ThemeProvider } from "@/components/ThemeProvider";

export default function Layout({ children }) {
return (
<>
<ThemeProvider defaultTheme="dark" storageKey="vite-ui-theme">
<Header />
{children}
<Footer />
</ThemeProvider>
</>
);
return (
<ThemeProvider defaultTheme="dark" storageKey="vite-ui-theme">
<div className="flex flex-col min-h-screen">
<Header />
<div className="grow">{children}</div>
<Footer />
</div>
</ThemeProvider>
);
}
157 changes: 88 additions & 69 deletions src/pages/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,94 +3,113 @@ import { useState } from "react";
import { graphql, Link } from "gatsby";
import Layout from "@/components/Layout";
import {
Card,
CardContent,
CardFooter,
CardHeader,
CardTitle,
Card,
CardContent,
CardFooter,
CardHeader,
CardTitle,
} from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import DatePicker from "@/components/DatePicker";
import { formatDate } from "date-fns";
import { toZonedTime } from "date-fns-tz";

type DrpdEdge = {
node: {
parent: {
name: string;
node: {
parent: {
name: string;
};
title: string;
date: string;
authors: string[];
};
title: string;
date: string;
authors: string[];
};
};

const IndexPage: React.FC<{ data: { allDrpdJson: { edges: DrpdEdge[] } } }> = ({
data,
data,
}) => {
const drpdPages = data.allDrpdJson.edges;
const [date, setDate] = useState<Date>(toZonedTime(new Date(Date.now()), "UTC"));
const drpdPages = data.allDrpdJson.edges;
const [date, setDate] = useState<Date>(
toZonedTime(new Date(Date.now()), "UTC")
);

return (
<Layout>
<div className="container mx-auto px-4 py-8">
<h1 className="text-3xl font-bold mb-6">Available DRPD Pages</h1>
<DatePicker className="min-w-[300px] w-1/5 mb-3" date={date} onDateChange={setDate} />
<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
{drpdPages
.filter(({ node }) => node.date === formatDate(date, "yyyy-MM-dd"))
.map(({ node }) => (
<Card key={node.parent.name}>
<CardHeader>
<CardTitle>{node.title}</CardTitle>
</CardHeader>
<CardContent>
<p className="text-sm text-muted-foreground">
Date: {node.date}
</p>
<p className="text-sm text-muted-foreground">
Authors: {node.authors.join(", ")}
</p>
</CardContent>
<CardFooter className="flex justify-between">
<Button asChild variant="outline">
<Link to={`/${node.parent.name.replace(/_/g, "-")}/detailed`}>
Detailed
</Link>
</Button>
<Button asChild variant="outline">
<Link
to={`/${node.parent.name.replace(/_/g, "-")}/follow-along`}
>
Follow Along
</Link>
</Button>
</CardFooter>
</Card>
))}
</div>
</div>
</Layout>
);
return (
<Layout>
<div className="container mx-auto py-8">
<h1 className="text-3xl font-bold mb-6">
Available DRPD Pages
</h1>
<DatePicker
className="min-w-[300px] w-1/5 mb-3"
date={date}
onDateChange={setDate}
/>
<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
{drpdPages
.filter(
({ node }) =>
node.date === formatDate(date, "yyyy-MM-dd")
)
.map(({ node }) => (
<Card key={node.parent.name}>
<CardHeader>
<CardTitle>{node.title}</CardTitle>
</CardHeader>
<CardContent>
<p className="text-sm text-muted-foreground">
Date: {node.date}
</p>
<p className="text-sm text-muted-foreground">
Authors: {node.authors.join(", ")}
</p>
</CardContent>
<CardFooter className="flex justify-between">
<Button asChild variant="outline">
<Link
to={`/${node.parent.name.replace(
/_/g,
"-"
)}/detailed`}
>
Detailed
</Link>
</Button>
<Button asChild variant="outline">
<Link
to={`/${node.parent.name.replace(
/_/g,
"-"
)}/follow-along`}
>
Follow Along
</Link>
</Button>
</CardFooter>
</Card>
))}
</div>
</div>
</Layout>
);
};

export const query = graphql`
query {
allDrpdJson {
edges {
node {
parent {
... on File {
name
query {
allDrpdJson {
edges {
node {
parent {
... on File {
name
}
}
title
date
authors
}
}
}
title
date
authors
}
}
}
}
`;

export default IndexPage;

0 comments on commit c9d3fc7

Please sign in to comment.