mirror of
https://github.com/QuivrHQ/quivr.git
synced 2024-12-15 17:43:03 +03:00
253e866a86
# Description Hope ya'll don't mind, I updated the User Profile's UI to be a bit more readable. Kept the design neutral to not impose styles. I also kept the original toggle buttons for Theme and Language in case we still want to use those in other places in the app, where a select menu isn't necessary. ## Checklist before requesting a review Please delete options that are not relevant. - [ ] My code follows the style guidelines of this project - [ ] I have performed a self-review of my code - [ ] I have commented hard-to-understand areas - [ ] I have ideally added tests that prove my fix is effective or that my feature works - [ ] New and existing unit tests pass locally with my changes - [ ] Any dependent changes have been merged ## Screenshots (if appropriate): https://github.com/StanGirard/quivr/assets/64866427/d0320852-ece1-4002-a180-0005df132e71 https://github.com/StanGirard/quivr/assets/64866427/be3c67ec-8d42-44f9-8131-35a70aec20ef --------- Co-authored-by: Zineb El Bachiri <100568984+gozineb@users.noreply.github.com> Co-authored-by: Stan Girard <girard.stanislas@gmail.com>
90 lines
2.4 KiB
TypeScript
90 lines
2.4 KiB
TypeScript
/* eslint-disable max-lines */
|
|
"use client";
|
|
import Link from "next/link";
|
|
import { useTranslation } from "react-i18next";
|
|
|
|
import Button from "@/lib/components/ui/Button";
|
|
import Card, { CardBody, CardHeader } from "@/lib/components/ui/Card";
|
|
import { useSupabase } from "@/lib/context/SupabaseProvider";
|
|
import { redirectToLogin } from "@/lib/router/redirectToLogin";
|
|
|
|
import { UserStatistics } from "./components";
|
|
import { ApiKeyConfig } from "./components/ApiKeyConfig";
|
|
import LanguageSelect from "./components/LanguageDropDown/LanguageSelect";
|
|
import ThemeSelect from "./components/ThemeSelect/ThemeSelect";
|
|
|
|
const UserPage = (): JSX.Element => {
|
|
const { session } = useSupabase();
|
|
|
|
if (!session) {
|
|
redirectToLogin();
|
|
}
|
|
|
|
const { user } = session;
|
|
const { t } = useTranslation(["translation", "user", "config"]);
|
|
|
|
return (
|
|
<main className="container lg:w-2/3 mx-auto py-10 px-5">
|
|
<Card className="mb-5 shadow-sm hover:shadow-none">
|
|
<CardHeader>
|
|
<h2 className="font-bold text-xl">
|
|
{t("accountSection", { ns: "config" })}
|
|
</h2>
|
|
</CardHeader>
|
|
|
|
<CardBody>
|
|
<p className="mb-3">
|
|
<strong>{t("email")}:</strong> <span>{user.email}</span>
|
|
</p>
|
|
|
|
<div className="inline-block">
|
|
<Link href={"/logout"}>
|
|
<Button className="px-3 py-2" variant="secondary">
|
|
{t("logoutButton")}
|
|
</Button>
|
|
</Link>
|
|
</div>
|
|
</CardBody>
|
|
</Card>
|
|
|
|
<Card className="mb-5 shadow-sm hover:shadow-none">
|
|
<CardHeader>
|
|
<h2 className="font-bold text-xl">
|
|
{t("settings", { ns: "config" })}
|
|
</h2>
|
|
</CardHeader>
|
|
|
|
<CardBody>
|
|
<LanguageSelect />
|
|
|
|
<ThemeSelect />
|
|
</CardBody>
|
|
</Card>
|
|
|
|
<Card className="mb-5 shadow-sm hover:shadow-none">
|
|
<CardHeader>
|
|
<h2 className="font-bold text-xl">
|
|
{t("brainUsage", { ns: "user" })}
|
|
</h2>
|
|
</CardHeader>
|
|
|
|
<CardBody>
|
|
<UserStatistics />
|
|
</CardBody>
|
|
</Card>
|
|
|
|
<Card className="mb-5 shadow-sm hover:shadow-none">
|
|
<CardHeader>
|
|
<h2 className="font-bold text-xl">{t("apiKey", { ns: "config" })}</h2>
|
|
</CardHeader>
|
|
|
|
<CardBody className="p-3 flex flex-col">
|
|
<ApiKeyConfig />
|
|
</CardBody>
|
|
</Card>
|
|
</main>
|
|
);
|
|
};
|
|
|
|
export default UserPage;
|