feat: playlist

packages/website/src/pages/[...locale]/performance/index.astro

@@ -12,7 +12,7 @@ const { locale } = Astro.params;
 
 <ToolOpenGraph tool={tools.performance} />
 
-<BaseLayout noFooter>
+<BaseLayout {locale} noFooter>
   <Page client:only="react" {locale}>
     <Page skeleton slot="fallback" {locale} />
   </Page>

packages/website/src/pages/[...locale]/playlist/_index.tsx

@@ -0,0 +1,21 @@
+import { PageWrapper } from "../../../components/PageWrapper";
+import { PlaylistPool } from "../../../components/PlaylistFilters";
+import { LocaleProvider } from "../../../hooks/useLocale";
+import type { MaybeSkeletonComponentProps } from "../../../types/maybeSkeletonComponentProps";
+
+interface Props {
+  locale: string;
+}
+
+export function Page({
+  locale,
+  skeleton,
+}: Props & MaybeSkeletonComponentProps) {
+  return (
+    <LocaleProvider locale={locale}>
+      <PageWrapper color="tomato" direction="row">
+        <PlaylistPool />
+      </PageWrapper>
+    </LocaleProvider>
+  );
+}

packages/website/src/pages/[...locale]/playlist/index.astro

@@ -0,0 +1,15 @@
+---
+import { tools } from "../../../constants/tools";
+import ToolLayout from "../../../layouts/ToolLayout.astro";
+import { Page } from "./_index.tsx";
+
+export { getStaticPaths } from "../index.astro";
+
+const { locale } = Astro.params;
+---
+
+<ToolLayout {locale} tool={tools.playlist}>
+  <Page {locale} client:only="react">
+    <Page {locale} skeleton slot="fallback" />
+  </Page>
+</ToolLayout>