+
+
+
+ {t("email")}: {user.email}
+
+ {is_premium === true ? null : (
+ {t("monetization:upgrade")}}
+ />
+ )}
diff --git a/frontend/lib/components/Sidebar/components/SidebarFooter/SidebarFooter.tsx b/frontend/lib/components/Sidebar/components/SidebarFooter/SidebarFooter.tsx
index 13b9ab881..aa2097995 100644
--- a/frontend/lib/components/Sidebar/components/SidebarFooter/SidebarFooter.tsx
+++ b/frontend/lib/components/Sidebar/components/SidebarFooter/SidebarFooter.tsx
@@ -12,12 +12,16 @@ type SidebarFooterProps = {
export const SidebarFooter = ({
showButtons,
}: SidebarFooterProps): JSX.Element => {
+ const buttons = {
+ myBrains:
,
+ upgradeToPlus:
,
+ user:
,
+ };
+
return (
- {showButtons.includes("myBrains") && }
- {showButtons.includes("upgradeToPlus") && }
- {showButtons.includes("user") && }
+ {showButtons.map((button) => buttons[button])}
);
diff --git a/frontend/lib/components/Sidebar/components/SidebarFooter/components/BrainManagementButton.tsx b/frontend/lib/components/Sidebar/components/SidebarFooter/components/BrainManagementButton.tsx
index 590b3c417..de9ceccb2 100644
--- a/frontend/lib/components/Sidebar/components/SidebarFooter/components/BrainManagementButton.tsx
+++ b/frontend/lib/components/Sidebar/components/SidebarFooter/components/BrainManagementButton.tsx
@@ -1,22 +1,20 @@
-import Link from "next/link";
import { useTranslation } from "react-i18next";
import { FaBrain } from "react-icons/fa";
-import { sidebarLinkStyle } from "@/lib/components/Sidebar/components/SidebarFooter/styles/SidebarLinkStyle";
import { useBrainContext } from "@/lib/context/BrainProvider/hooks/useBrainContext";
+import { SidebarFooterButton } from "./SidebarFooterButton";
+
export const BrainManagementButton = (): JSX.Element => {
const { currentBrainId } = useBrainContext();
const { t } = useTranslation("brain");
return (
-
}
+ label={t("myBrains")}
data-testid="brain-management-button"
- >
-
-
{t("myBrains")}
-
+ />
);
};
diff --git a/frontend/lib/components/Sidebar/components/SidebarFooter/components/SidebarFooterButton.tsx b/frontend/lib/components/Sidebar/components/SidebarFooter/components/SidebarFooterButton.tsx
new file mode 100644
index 000000000..0a57721bd
--- /dev/null
+++ b/frontend/lib/components/Sidebar/components/SidebarFooter/components/SidebarFooterButton.tsx
@@ -0,0 +1,34 @@
+import { useRouter } from "next/navigation";
+
+type SidebarFooterButtonProps = {
+ icon: JSX.Element;
+ label: string | JSX.Element;
+ href?: string;
+ onClick?: () => void;
+};
+
+export const SidebarFooterButton = ({
+ icon,
+ label,
+ href,
+ onClick,
+}: SidebarFooterButtonProps): JSX.Element => {
+ const router = useRouter();
+
+ if (href !== undefined) {
+ onClick = () => {
+ void router.push(href);
+ };
+ }
+
+ return (
+
+ );
+};
diff --git a/frontend/lib/components/Sidebar/components/SidebarFooter/components/UpgradeToPlus.tsx b/frontend/lib/components/Sidebar/components/SidebarFooter/components/UpgradeToPlus.tsx
index 806a2ccb1..8b5c47c5d 100644
--- a/frontend/lib/components/Sidebar/components/SidebarFooter/components/UpgradeToPlus.tsx
+++ b/frontend/lib/components/Sidebar/components/SidebarFooter/components/UpgradeToPlus.tsx
@@ -5,7 +5,7 @@ import { FiUser } from "react-icons/fi";
import { StripePricingModal } from "@/lib/components/Stripe";
import { useUserData } from "@/lib/hooks/useUserData";
-import { sidebarLinkStyle } from "../styles/SidebarLinkStyle";
+import { SidebarFooterButton } from "./SidebarFooterButton";
export const UpgradeToPlus = (): JSX.Element => {
const { userData } = useUserData();
@@ -20,15 +20,17 @@ export const UpgradeToPlus = (): JSX.Element => {
return (
-
-
- {t("upgrade")}{" "}
-
- {t("new")}
-
-
-
+ }
+ label={
+ <>
+ {t("upgrade")}{" "}
+
+ {t("new")}
+
+ >
+ }
+ />
}
/>
);
diff --git a/frontend/lib/components/Sidebar/components/SidebarFooter/components/UserButton.tsx b/frontend/lib/components/Sidebar/components/SidebarFooter/components/UserButton.tsx
index 77bc2fe67..29df10a94 100644
--- a/frontend/lib/components/Sidebar/components/SidebarFooter/components/UserButton.tsx
+++ b/frontend/lib/components/Sidebar/components/SidebarFooter/components/UserButton.tsx
@@ -1,21 +1,18 @@
-import Link from "next/link";
-
import { Avatar } from "@/lib/components/ui/Avatar";
import { useSupabase } from "@/lib/context/SupabaseProvider";
+import { SidebarFooterButton } from "./SidebarFooterButton";
import { useGravatar } from "../../../../../hooks/useGravatar";
-import { sidebarLinkStyle } from "../styles/SidebarLinkStyle";
export const UserButton = (): JSX.Element => {
const { session } = useSupabase();
const { gravatarUrl } = useGravatar();
return (
-
-
-
- {session?.user.email ?? ""}
-
-
+ }
+ label={session?.user.email ?? ""}
+ />
);
};
diff --git a/frontend/lib/components/Sidebar/components/SidebarFooter/styles/SidebarLinkStyle.tsx b/frontend/lib/components/Sidebar/components/SidebarFooter/styles/SidebarLinkStyle.tsx
deleted file mode 100644
index a968954ed..000000000
--- a/frontend/lib/components/Sidebar/components/SidebarFooter/styles/SidebarLinkStyle.tsx
+++ /dev/null
@@ -1,2 +0,0 @@
-export const sidebarLinkStyle =
- "w-full rounded-lg px-5 py-2 text-base flex justify-start items-center gap-4 hover:bg-gray-200 dark:hover:bg-gray-800 focus:outline-none";
diff --git a/frontend/lib/components/ui/Avatar.tsx b/frontend/lib/components/ui/Avatar.tsx
index b4cdc524f..e472aaa57 100644
--- a/frontend/lib/components/ui/Avatar.tsx
+++ b/frontend/lib/components/ui/Avatar.tsx
@@ -4,20 +4,18 @@ import { cn } from "@/lib/utils";
type AvatarProps = {
url: string;
- alt: string;
imgClassName?: string;
className?: string;
};
export const Avatar = ({
url,
- alt,
imgClassName,
className,
}: AvatarProps): JSX.Element => {
return (
-