Skip to content

Commit

Permalink
feat: add planing page
Browse files Browse the repository at this point in the history
  • Loading branch information
@yjose
yjose committed Nov 8, 2024
1 parent 2146857 commit 96fd966
Show file tree
Hide file tree
Showing 9 changed files with 824 additions and 0 deletions.
1 change: 1 addition & 0 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@
"@astrojs/rss": "^4.0.7",
"@astrolib/seo": "1.0.0-beta.8",
"@astropub/md": "^1.0.0",
"@notionhq/client": "^2.2.15",
"@radix-ui/react-slot": "^1.1.0",
"@resvg/resvg-js": "^2.6.2",
"@rive-app/canvas": "^2.21.6",
Expand Down
53 changes: 53 additions & 0 deletions pnpm-lock.yaml
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

118 changes: 118 additions & 0 deletions src/components/planning/episode-card.astro
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,118 @@
---
import type { NotionEpisodeProperties } from "@/lib/notion/types";
const formatDate = (dateStr: string) => {
if (!dateStr) return "";
return new Date(dateStr).toLocaleDateString("en-US", {
year: "numeric",
month: "long",
day: "numeric",
});
};
interface Props {
episode: NotionEpisodeProperties;
}
const { episode } = Astro.props as Props;
---

<div
class="group relative flex h-full flex-col rounded-xl border border-gray-200 bg-white"
>
<div class="flex-1 p-4">
<h3 class="text-lg font-semibold leading-tight text-gray-900">
{episode.title}
</h3>

<div class="space-y-2">
{
episode.date && (
<div class="flex items-center gap-2 pt-3 text-gray-600">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-4 w-4"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
/>
</svg>
<span class="text-sm">{formatDate(episode.date)}</span>
</div>
)
}

{
episode.assignedTo && (
<div class="flex items-center gap-2 text-gray-600">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-4 w-4"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"
/>
</svg>
<span class="text-sm">{episode.assignedTo}</span>
</div>
)
}
</div>
</div>

<div class="grid grid-cols-2 gap-0 divide-x-2 overflow-hidden border-t">
<button
class="inline-flex items-center justify-center gap-1 rounded-bl-md bg-gray-50 px-3 py-1.5 text-sm text-gray-700 transition-colors hover:bg-gray-100"
aria-label="Suggest guests for this episode"
>
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-4 w-4"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z"
></path>
</svg>
<span>Suggest Guests</span>
</button>

<button
class="inline-flex items-center justify-center gap-1 rounded-br-md bg-gray-50 px-3 py-1.5 text-sm text-gray-700 transition-colors hover:bg-gray-100"
aria-label="Add questions for this episode"
>
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-4 w-4"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z"
></path>
</svg>
<span>Add Questions</span>
</button>
</div>
</div>
75 changes: 75 additions & 0 deletions src/components/planning/index.astro
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,75 @@
---
import { getGeekBlablaEpisodesPlannings } from "@/lib/notion";
import EpisodeCard from "./episode-card.astro";
const episodes = await getGeekBlablaEpisodesPlannings();
// Group episodes by status
const scheduled = episodes
.filter(ep => ep.status === "scheduled")
.sort((a, b) => new Date(a.date).getTime() - new Date(b.date).getTime());
const nextUp = episodes.filter(ep => ep.status.toLowerCase() === "next up");
const backlog = episodes.filter(ep => ep.status === "backlog");
---

<div class="min-h-screen bg-gray-50 p-4">
<div class="mx-auto max-w-7xl">
<h1 class="text-center text-4xl font-bold text-gray-800">
GeekBlabla Episodes Planning
</h1>
<div class="mb-8 mt-2 text-center text-lg font-normal text-gray-600">
Track and manage upcoming episodes
</div>

<div class="grid grid-cols-1 gap-8 lg:grid-cols-3">
<!-- Backlog Column -->
<div class="flex flex-col rounded-xl bg-white shadow-sm">
<div class="mb-4 flex items-center justify-between p-4">
<h2 class="text-xl font-semibold text-gray-600">
<span class="mr-2">📝</span>Backlog
</h2>
<span
class="rounded-full bg-gray-100 px-3 py-1 text-sm text-gray-600"
>
{backlog.length}
</span>
</div>
<div class="flex flex-col gap-4 overflow-y-auto p-4">
{backlog.map(episode => <EpisodeCard episode={episode} />)}
</div>
</div>

<!-- Next Up Column -->
<div class="flex flex-col rounded-xl bg-white shadow-sm">
<div class="mb-4 flex items-center justify-between p-4">
<h2 class="text-xl font-semibold text-gray-600">
<span class="mr-2">🎯</span>Next Up
</h2>
<span
class="rounded-full bg-gray-100 px-3 py-1 text-sm text-gray-600"
>
{nextUp.length}
</span>
</div>
<div class="flex flex-col gap-4 p-4">
{nextUp.map(episode => <EpisodeCard episode={episode} />)}
</div>
</div>

<div class="flex flex-col rounded-xl bg-white shadow-sm">
<div class="mb-4 flex items-center justify-between p-4">
<h2 class="text-xl font-semibold text-gray-600">
<span class="mr-2">📅</span>Scheduled
</h2>
<span
class="rounded-full bg-gray-100 px-3 py-1 text-sm text-gray-600"
>
{scheduled.length}
</span>
</div>
<div class="flex flex-col gap-4 p-4">
{scheduled.map(episode => <EpisodeCard episode={episode} />)}
</div>
</div>
</div>
</div>
</div>
Loading

0 comments on commit 96fd966

Please sign in to comment.