add songs tab

app/[locale]/(default)/_components/share/index.tsx

@@ -4,9 +4,17 @@ import { CopyToClipboard } from "react-copy-to-clipboard";
 import { MdOutlineShare } from "react-icons/md";
 import { Song } from "@/types/song";
 import { toast } from "sonner";
+import { useParams } from "next/navigation";
 
 export default function ({ song }: { song: Song }) {
-  const shareUrl = `${process.env.NEXT_PUBLIC_WEB_BASE_URL}/song/${song.uuid}`;
+  const params = useParams();
+  const locale = params.locale as string;
+
+  const shareUrl = `${
+    locale === "zh" && process.env.NEXT_PUBLIC_SHARE_BASE_URL
+      ? process.env.NEXT_PUBLIC_SHARE_BASE_URL
+      : process.env.NEXT_PUBLIC_WEB_BASE_URL
+  }/song/${song.uuid}`;
 
   return (
     <CopyToClipboard

app/[locale]/(default)/_components/sidenav/index.tsx

@@ -36,13 +36,13 @@ export default function () {
       title: t("trending"),
       url: "/trending",
       icon: <MdLocalFireDepartment className="text-lg" />,
-      active: pathname.endsWith("trending"),
+      active: pathname.includes("trending"),
     },
     {
       title: t("newest"),
       url: "/newest",
       icon: <MdOutlineRssFeed className="text-lg" />,
-      active: pathname.endsWith("newest"),
+      active: pathname.includes("newest"),
     },
     {
       title: t("roaming"),

app/[locale]/(default)/_components/tab/index.tsx

@@ -0,0 +1,40 @@
+"use client";
+
+import { usePathname } from "next/navigation";
+
+export default function ({ type }: { type: string }) {
+  const pathname = usePathname();
+
+  return (
+    <div role="tablist" className="tabs tabs-boxed mt-2">
+      <a
+        href={`/${type}`}
+        className={`tab ${
+          pathname.endsWith(type) ? "bg-primary text-base-content" : ""
+        }`}
+      >
+        All
+      </a>
+      <a
+        href={`/${type}/suno-ai-songs`}
+        className={`tab ${
+          pathname.endsWith("suno-ai-songs")
+            ? "bg-primary text-base-content"
+            : ""
+        }`}
+      >
+        Suno AI Songs
+      </a>
+      <a
+        href={`/${type}/udio-ai-songs`}
+        className={`tab ${
+          pathname.endsWith("udio-ai-songs")
+            ? "bg-primary text-base-content"
+            : ""
+        }`}
+      >
+        Udio AI Songs
+      </a>
+    </div>
+  );
+}

app/[locale]/(default)/newest/page.tsx

@@ -2,6 +2,7 @@ import Crumb from "../_components/crumb";
 import { Metadata } from "next";
 import { Nav } from "@/types/nav";
 import Playlist from "../_components/playlist";
+import Tab from "../_components/tab";
 import { getLatestSongs } from "@/models/song";
 import { getTranslations } from "next-intl/server";
 
@@ -25,7 +26,7 @@ export async function generateMetadata({
   };
 }
 
-export default async function () {
+export default async function ({}) {
   const t = await getTranslations("nav");
   const songs = await getLatestSongs(1, 50);
   const loading = false;
@@ -46,11 +47,12 @@ export default async function () {
       <Crumb navs={crumbNavs} />
 
       <div className="flex items-center justify-between mb-4">
-        <div className="space-y-2">
+        <div className="space-y-4">
           <h1 className="text-2xl font-semibold tracking-tight">
             {t("newest")}
           </h1>
           <p className="text-sm text-muted-foreground"></p>
+          <Tab type="newest" />
         </div>
       </div>
 

app/[locale]/(default)/newest/suno-ai-songs/page.tsx

@@ -0,0 +1,66 @@
+import Crumb from "../../_components/crumb";
+import { Metadata } from "next";
+import { Nav } from "@/types/nav";
+import Playlist from "../../_components/playlist";
+import Tab from "../../_components/tab";
+import { getProviderLatestSongs } from "@/models/song";
+import { getTranslations } from "next-intl/server";
+
+export const maxDuration = 120;
+
+export async function generateMetadata({
+  params,
+}: {
+  params: { locale: string };
+}): Promise<Metadata> {
+  const t = await getTranslations("metadata");
+
+  return {
+    title: `Newest Suno AI Songs | ${t("newest_title")}`,
+    description: `Newest Suno AI Songs | ${t("newest_description")}`,
+    alternates: {
+      canonical: `${process.env.NEXTAUTH_URL}/${
+        params.locale !== "en" ? params.locale + "/" : ""
+      }newest/suno-ai-songs`,
+    },
+  };
+}
+
+export default async function ({}) {
+  const t = await getTranslations("nav");
+  const songs = await getProviderLatestSongs("suno", 1, 50);
+  const loading = false;
+
+  const crumbNavs: Nav[] = [
+    {
+      title: t("home"),
+      url: "/",
+    },
+    {
+      title: t("newest"),
+      url: "/newest",
+    },
+    {
+      title: "Suno AI Songs",
+      active: true,
+    },
+  ];
+
+  return (
+    <div>
+      <Crumb navs={crumbNavs} />
+
+      <div className="flex items-center justify-between mb-4">
+        <div className="space-y-4">
+          <h1 className="text-2xl font-semibold tracking-tight">
+            Suno AI Songs
+          </h1>
+          <p className="text-sm text-muted-foreground"></p>
+          <Tab type="newest" />
+        </div>
+      </div>
+
+      <Playlist loading={loading} songs={songs || []} />
+    </div>
+  );
+}

app/[locale]/(default)/newest/udio-ai-songs/page.tsx

@@ -0,0 +1,66 @@
+import Crumb from "../../_components/crumb";
+import { Metadata } from "next";
+import { Nav } from "@/types/nav";
+import Playlist from "../../_components/playlist";
+import Tab from "../../_components/tab";
+import { getProviderLatestSongs } from "@/models/song";
+import { getTranslations } from "next-intl/server";
+
+export const maxDuration = 120;
+
+export async function generateMetadata({
+  params,
+}: {
+  params: { locale: string };
+}): Promise<Metadata> {
+  const t = await getTranslations("metadata");
+
+  return {
+    title: `Newest Udio AI Songs | ${t("newest_title")}`,
+    description: `Newest Udio AI Songs | ${t("newest_description")}`,
+    alternates: {
+      canonical: `${process.env.NEXTAUTH_URL}/${
+        params.locale !== "en" ? params.locale + "/" : ""
+      }newest/udio-ai-songs`,
+    },
+  };
+}
+
+export default async function ({}) {
+  const t = await getTranslations("nav");
+  const songs = await getProviderLatestSongs("udio", 1, 50);
+  const loading = false;
+
+  const crumbNavs: Nav[] = [
+    {
+      title: t("home"),
+      url: "/",
+    },
+    {
+      title: t("newest"),
+      url: "/newest",
+    },
+    {
+      title: "Udio AI Songs",
+      active: true,
+    },
+  ];
+
+  return (
+    <div>
+      <Crumb navs={crumbNavs} />
+
+      <div className="flex items-center justify-between mb-4">
+        <div className="space-y-4">
+          <h1 className="text-2xl font-semibold tracking-tight">
+            Udio AI Songs
+          </h1>
+          <p className="text-sm text-muted-foreground"></p>
+          <Tab type="newest" />
+        </div>
+      </div>
+
+      <Playlist loading={loading} songs={songs || []} />
+    </div>
+  );
+}

app/[locale]/(default)/roaming/page.tsx

@@ -2,6 +2,7 @@ import Crumb from "../_components/crumb";
 import { Metadata } from "next";
 import { Nav } from "@/types/nav";
 import Playlist from "../_components/playlist";
+import Tab from "../_components/tab";
 import { getRandomSongs } from "@/models/song";
 import { getTranslations } from "next-intl/server";
 
@@ -51,6 +52,7 @@ export default async function () {
             {t("roaming")}
           </h1>
           <p className="text-sm text-muted-foreground"></p>
+          <Tab type="roaming" />
         </div>
       </div>
 

app/[locale]/(default)/roaming/suno-ai-songs/page.tsx

@@ -0,0 +1,66 @@
+import Crumb from "../../_components/crumb";
+import { Metadata } from "next";
+import { Nav } from "@/types/nav";
+import Playlist from "../../_components/playlist";
+import Tab from "../../_components/tab";
+import { getProviderRandomSongs } from "@/models/song";
+import { getTranslations } from "next-intl/server";
+
+export const maxDuration = 120;
+
+export async function generateMetadata({
+  params,
+}: {
+  params: { locale: string };
+}): Promise<Metadata> {
+  const t = await getTranslations("metadata");
+
+  return {
+    title: `Random Suno AI Songs | ${t("roaming_title")}`,
+    description: `Random Suno AI Songs | ${t("roaming_description")}`,
+    alternates: {
+      canonical: `${process.env.NEXTAUTH_URL}/${
+        params.locale !== "en" ? params.locale + "/" : ""
+      }roaming/suno-ai-songs`,
+    },
+  };
+}
+
+export default async function ({}) {
+  const t = await getTranslations("nav");
+  const songs = await getProviderRandomSongs("suno", 1, 50);
+  const loading = false;
+
+  const crumbNavs: Nav[] = [
+    {
+      title: t("home"),
+      url: "/",
+    },
+    {
+      title: t("roaming"),
+      url: "/roaming",
+    },
+    {
+      title: "Suno AI Songs",
+      active: true,
+    },
+  ];
+
+  return (
+    <div>
+      <Crumb navs={crumbNavs} />
+
+      <div className="flex items-center justify-between mb-4">
+        <div className="space-y-4">
+          <h1 className="text-2xl font-semibold tracking-tight">
+            Suno AI Songs
+          </h1>
+          <p className="text-sm text-muted-foreground"></p>
+          <Tab type="roaming" />
+        </div>
+      </div>
+
+      <Playlist loading={loading} songs={songs || []} />
+    </div>
+  );
+}

app/[locale]/(default)/roaming/udio-ai-songs/page.tsx

@@ -0,0 +1,66 @@
+import Crumb from "../../_components/crumb";
+import { Metadata } from "next";
+import { Nav } from "@/types/nav";
+import Playlist from "../../_components/playlist";
+import Tab from "../../_components/tab";
+import { getProviderRandomSongs } from "@/models/song";
+import { getTranslations } from "next-intl/server";
+
+export const maxDuration = 120;
+
+export async function generateMetadata({
+  params,
+}: {
+  params: { locale: string };
+}): Promise<Metadata> {
+  const t = await getTranslations("metadata");
+
+  return {
+    title: `Random Udio AI Songs | ${t("roaming_title")}`,
+    description: `Random Udio AI Songs | ${t("roaming_description")}`,
+    alternates: {
+      canonical: `${process.env.NEXTAUTH_URL}/${
+        params.locale !== "en" ? params.locale + "/" : ""
+      }roaming/udio-ai-songs`,
+    },
+  };
+}
+
+export default async function ({}) {
+  const t = await getTranslations("nav");
+  const songs = await getProviderRandomSongs("udio", 1, 50);
+  const loading = false;
+
+  const crumbNavs: Nav[] = [
+    {
+      title: t("home"),
+      url: "/",
+    },
+    {
+      title: t("roaming"),
+      url: "/roaming",
+    },
+    {
+      title: "Udio AI Songs",
+      active: true,
+    },
+  ];
+
+  return (
+    <div>
+      <Crumb navs={crumbNavs} />
+
+      <div className="flex items-center justify-between mb-4">
+        <div className="space-y-4">
+          <h1 className="text-2xl font-semibold tracking-tight">
+            Udio AI Songs
+          </h1>
+          <p className="text-sm text-muted-foreground"></p>
+          <Tab type="roaming" />
+        </div>
+      </div>
+
+      <Playlist loading={loading} songs={songs || []} />
+    </div>
+  );
+}