@@ -26,12 +26,12 @@ export default async function Home() {
Build smarter with pre-built modules today
-
diff --git a/apps/next/app/settings/accounts/page.tsx b/apps/next/app/settings/accounts/page.tsx
new file mode 100644
index 0000000..cdecc47
--- /dev/null
+++ b/apps/next/app/settings/accounts/page.tsx
@@ -0,0 +1,18 @@
+import { Accounts } from "@/components/user/accounts";
+import { useSupabaseServer } from "@/modules/utils/server";
+import { cookies } from "next/headers";
+import { redirect } from "next/navigation";
+
+export default async function Page() {
+ const supabase = useSupabaseServer({ cookies });
+
+ const {
+ data: { user },
+ } = await supabase.auth.getUser();
+
+ if (!user) {
+ redirect("/login");
+ }
+
+ return
;
+}
diff --git a/apps/next/app/settings/account/page.tsx b/apps/next/app/settings/credentials/page.tsx
similarity index 66%
rename from apps/next/app/settings/account/page.tsx
rename to apps/next/app/settings/credentials/page.tsx
index afa4306..5bbe81a 100644
--- a/apps/next/app/settings/account/page.tsx
+++ b/apps/next/app/settings/credentials/page.tsx
@@ -1,4 +1,4 @@
-import { AccountForm } from "@/components/user/account-form";
+import { CredentialsForm } from "@/components/user/credentials-form";
import { useSupabaseServer } from "@/modules/utils/server";
import { cookies } from "next/headers";
import { redirect } from "next/navigation";
@@ -14,9 +14,5 @@ export default async function Page() {
redirect("/login");
}
- return (
-
- );
+ return
;
}
diff --git a/apps/next/app/settings/layout.tsx b/apps/next/app/settings/layout.tsx
new file mode 100644
index 0000000..f321c6e
--- /dev/null
+++ b/apps/next/app/settings/layout.tsx
@@ -0,0 +1,35 @@
+import { DynamicBreadCrumbs } from "@/components/dynamic-breadcrumbs";
+import { DynamicNavigationLinks } from "@/components/dynamic-navigation-links";
+
+export default function Layout({ children }: { children: React.ReactNode }) {
+ return (
+
+ );
+}
diff --git a/apps/next/app/settings/page.tsx b/apps/next/app/settings/page.tsx
index 39d7f31..4a7cf33 100644
--- a/apps/next/app/settings/page.tsx
+++ b/apps/next/app/settings/page.tsx
@@ -1,4 +1,3 @@
-import { Settings } from "@/components/user/settings";
import { useSupabaseServer } from "@/modules/utils/server";
import { cookies } from "next/headers";
import { redirect } from "next/navigation";
@@ -14,9 +13,5 @@ export default async function Page() {
redirect("/login");
}
- return (
-
-
-
- );
+ redirect("/settings/accounts");
}
diff --git a/apps/next/app/settings/profile/page.tsx b/apps/next/app/settings/profile/page.tsx
index 10b7a78..9a01cb4 100644
--- a/apps/next/app/settings/profile/page.tsx
+++ b/apps/next/app/settings/profile/page.tsx
@@ -14,9 +14,5 @@ export default async function Page() {
redirect("/login");
}
- return (
-
- );
+ return
;
}
diff --git a/apps/next/components/dynamic-breadcrumbs.tsx b/apps/next/components/dynamic-breadcrumbs.tsx
new file mode 100644
index 0000000..a7ccefb
--- /dev/null
+++ b/apps/next/components/dynamic-breadcrumbs.tsx
@@ -0,0 +1,55 @@
+"use client";
+
+import * as React from "react";
+import {
+ Breadcrumb,
+ BreadcrumbItem,
+ BreadcrumbLink,
+ BreadcrumbList,
+ BreadcrumbSeparator,
+} from "@/components/ui/breadcrumb";
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+
+export const DynamicBreadCrumbs: React.FC = () => {
+ const pathname = usePathname();
+
+ const paths = React.useMemo(() => {
+ const segments = pathname.split("/").filter(Boolean);
+
+ return segments.reduce<{ href: string; label: string }[]>(
+ (acc, curr, index) => {
+ const href = `/${segments.slice(0, index + 1).join("/")}`;
+ const label =
+ curr.charAt(0).toUpperCase() + curr.slice(1).replaceAll("-", " ");
+
+ acc.push({ href, label });
+ return acc;
+ },
+ [{ href: "/", label: "Home" }]
+ );
+ }, [pathname]);
+
+ return (
+
+
+ {paths.map(({ href, label }, index) => (
+
+ {index !== paths.length - 1 ? (
+
+
+ {label}
+
+
+ ) : (
+
+ {label}
+
+ )}
+ {index !== paths.length - 1 && }
+
+ ))}
+
+
+ );
+};
diff --git a/apps/next/components/dynamic-navigation-links.tsx b/apps/next/components/dynamic-navigation-links.tsx
new file mode 100644
index 0000000..71b0a2f
--- /dev/null
+++ b/apps/next/components/dynamic-navigation-links.tsx
@@ -0,0 +1,31 @@
+"use client";
+
+import * as React from "react";
+import { Button } from "@/components/ui/button";
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+
+export const DynamicNavigationLinks: React.FC<{
+ items: { href: string; label: string }[];
+}> = ({ items }) => {
+ const pathname = usePathname();
+
+ return (
+
+ {items.map(({ href, label }) => (
+
+ ))}
+
+ );
+};
diff --git a/apps/next/components/user/settings.tsx b/apps/next/components/user/accounts.tsx
similarity index 82%
rename from apps/next/components/user/settings.tsx
rename to apps/next/components/user/accounts.tsx
index 0c4a7c6..9f159c0 100644
--- a/apps/next/components/user/settings.tsx
+++ b/apps/next/components/user/accounts.tsx
@@ -20,24 +20,17 @@ import { Separator } from "@/components/ui/separator";
import { ChevronDownIcon, TrashIcon } from "@radix-ui/react-icons";
import Link from "next/link";
import { useRouter } from "next/navigation";
-import {
- Breadcrumb,
- BreadcrumbItem,
- BreadcrumbLink,
- BreadcrumbList,
- BreadcrumbSeparator,
-} from "@/components/ui/breadcrumb";
import { useGetProfile } from "@/modules/user/profile";
import { useSignOut } from "@/modules/user/auth";
-export const Settings: React.FC<{ userId: string }> = ({ userId }) => {
+export const Accounts: React.FC<{ userId: string }> = ({ userId }) => {
// #region useGetProfile
const { data, isLoading, isError, error } = useGetProfile({ id: userId });
// #endregion useGetProfile
if (isLoading) {
return (
-
+
@@ -47,7 +40,7 @@ export const Settings: React.FC<{ userId: string }> = ({ userId }) => {
if (isError) {
return (
-
+
Something went wrong!
@@ -61,7 +54,7 @@ export const Settings: React.FC<{ userId: string }> = ({ userId }) => {
if (!data) {
return (
-
+
No data found!
@@ -74,7 +67,7 @@ export const Settings: React.FC<{ userId: string }> = ({ userId }) => {
}
return (
- = ({ userId }) => {
);
};
-export const SettingsContainer: React.FC<{
+export const AccountsContainer: React.FC<{
username: string;
preferredName: string | null;
email: string;
@@ -108,7 +101,7 @@ export const SettingsContainer: React.FC<{
// #endregion useSignOut
return (
- {
return (
-
+
diff --git a/apps/next/components/user/account-form.tsx b/apps/next/components/user/credentials-form.tsx
similarity index 74%
rename from apps/next/components/user/account-form.tsx
rename to apps/next/components/user/credentials-form.tsx
index d02aed0..876a8c0 100644
--- a/apps/next/components/user/account-form.tsx
+++ b/apps/next/components/user/credentials-form.tsx
@@ -20,15 +20,10 @@ import {
import { Input } from "@/components/ui/input";
import { zodResolver } from "@hookform/resolvers/zod";
import { useUpdateUser } from "@/modules/user/auth";
-import {
- Breadcrumb,
- BreadcrumbItem,
- BreadcrumbLink,
- BreadcrumbList,
- BreadcrumbSeparator,
-} from "@/components/ui/breadcrumb";
-export const AccountForm: React.FC<{ userEmail: string }> = ({ userEmail }) => {
+export const CredentialsForm: React.FC<{ userEmail: string }> = ({
+ userEmail,
+}) => {
const router = useRouter();
// #region useUpdateUser
@@ -50,7 +45,7 @@ export const AccountForm: React.FC<{ userEmail: string }> = ({ userEmail }) => {
// #endregion useUpdateUser
return (
-
+
diff --git a/apps/next/components/user/new-reset-password-form.tsx b/apps/next/components/user/new-reset-password-form.tsx
index 4b8018b..2f0f6d1 100644
--- a/apps/next/components/user/new-reset-password-form.tsx
+++ b/apps/next/components/user/new-reset-password-form.tsx
@@ -20,13 +20,6 @@ import { CircleIcon, CrossCircledIcon } from "@radix-ui/react-icons";
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
import { useRouter } from "next/navigation";
import { useUpdateUser } from "@/modules/user/auth";
-import {
- Breadcrumb,
- BreadcrumbItem,
- BreadcrumbLink,
- BreadcrumbList,
- BreadcrumbSeparator,
-} from "@/components/ui/breadcrumb";
export const NewResetPasswordForm: React.FC = () => {
const router = useRouter();
@@ -79,34 +72,7 @@ const NewResetPasswordFormComponent: React.FC<{
return (