refactor code to improve readability and maintainability + redesigned announcement bar
This commit is contained in:
daniel31x13
+18
-20
@@ -120,30 +120,28 @@ export default function Dashboard() {
|
||||
<ViewDropdown viewMode={viewMode} setViewMode={setViewMode} />
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div className="flex justify-evenly flex-col xl:flex-row xl:items-center gap-2 xl:w-full h-full rounded-2xl p-8 border border-neutral-content bg-base-200">
|
||||
<DashboardItem
|
||||
name={numberOfLinks === 1 ? "Link" : "Links"}
|
||||
value={numberOfLinks}
|
||||
icon={"bi-link-45deg"}
|
||||
/>
|
||||
<div className="flex justify-evenly flex-col xl:flex-row xl:items-center gap-2 xl:w-full h-full rounded-2xl p-5 border border-neutral-content bg-base-200">
|
||||
<DashboardItem
|
||||
name={numberOfLinks === 1 ? "Link" : "Links"}
|
||||
value={numberOfLinks}
|
||||
icon={"bi-link-45deg"}
|
||||
/>
|
||||
|
||||
<div className="divider xl:divider-horizontal"></div>
|
||||
<div className="divider xl:divider-horizontal"></div>
|
||||
|
||||
<DashboardItem
|
||||
name={collections.length === 1 ? "Collection" : "Collections"}
|
||||
value={collections.length}
|
||||
icon={"bi-folder"}
|
||||
/>
|
||||
<DashboardItem
|
||||
name={collections.length === 1 ? "Collection" : "Collections"}
|
||||
value={collections.length}
|
||||
icon={"bi-folder"}
|
||||
/>
|
||||
|
||||
<div className="divider xl:divider-horizontal"></div>
|
||||
<div className="divider xl:divider-horizontal"></div>
|
||||
|
||||
<DashboardItem
|
||||
name={tags.length === 1 ? "Tag" : "Tags"}
|
||||
value={tags.length}
|
||||
icon={"bi-hash"}
|
||||
/>
|
||||
</div>
|
||||
<DashboardItem
|
||||
name={tags.length === 1 ? "Tag" : "Tags"}
|
||||
value={tags.length}
|
||||
icon={"bi-hash"}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-between items-center">
|
||||
|
||||
@@ -12,7 +12,7 @@ import Head from "next/head";
|
||||
import useLinks from "@/hooks/useLinks";
|
||||
import useLinkStore from "@/store/links";
|
||||
import ProfilePhoto from "@/components/ProfilePhoto";
|
||||
import ToggleDarkMode from "@/components/ui/ToggleDarkMode";
|
||||
import ToggleDarkMode from "@/components/ToggleDarkMode";
|
||||
import getPublicUserData from "@/lib/client/getPublicUserData";
|
||||
import Image from "next/image";
|
||||
import Link from "next/link";
|
||||
|
||||
+55
-38
@@ -13,6 +13,7 @@ import Link from "next/link";
|
||||
import Checkbox from "@/components/Checkbox";
|
||||
import { dropdownTriggerer } from "@/lib/client/utils";
|
||||
import EmailChangeVerificationModal from "@/components/ModalContent/EmailChangeVerificationModal";
|
||||
import Button from "@/components/ui/Button";
|
||||
|
||||
const emailEnabled = process.env.NEXT_PUBLIC_EMAIL_PROVIDER;
|
||||
|
||||
@@ -203,37 +204,56 @@ export default function Account() {
|
||||
|
||||
<div className="sm:row-span-2 sm:justify-self-center my-3">
|
||||
<p className="mb-2 sm:text-center">Profile Photo</p>
|
||||
<div className="w-28 h-28 flex items-center justify-center rounded-full relative">
|
||||
<div className="w-28 h-28 flex gap-3 sm:flex-col items-center">
|
||||
<ProfilePhoto
|
||||
priority={true}
|
||||
src={user.image ? user.image : undefined}
|
||||
large={true}
|
||||
/>
|
||||
{user.image && (
|
||||
<div
|
||||
onClick={() =>
|
||||
setUser({
|
||||
...user,
|
||||
image: "",
|
||||
})
|
||||
}
|
||||
className="absolute top-1 left-1 btn btn-xs btn-circle btn-neutral btn-outline bg-base-100"
|
||||
|
||||
<div className="dropdown dropdown-bottom">
|
||||
<Button
|
||||
tabIndex={0}
|
||||
role="button"
|
||||
size="small"
|
||||
intent="secondary"
|
||||
onMouseDown={dropdownTriggerer}
|
||||
className="text-sm"
|
||||
>
|
||||
<i className="bi-x"></i>
|
||||
</div>
|
||||
)}
|
||||
<div className="absolute -bottom-3 left-0 right-0 mx-auto w-fit text-center">
|
||||
<label className="btn btn-xs btn-neutral btn-outline bg-base-100">
|
||||
Browse...
|
||||
<input
|
||||
type="file"
|
||||
name="photo"
|
||||
id="upload-photo"
|
||||
accept=".png, .jpeg, .jpg"
|
||||
className="hidden"
|
||||
onChange={handleImageUpload}
|
||||
/>
|
||||
</label>
|
||||
<i className="bi-pencil-square text-md duration-100"></i>
|
||||
Edit
|
||||
</Button>
|
||||
<ul className="shadow menu dropdown-content z-[1] bg-base-200 border border-neutral-content rounded-box mt-1 w-60">
|
||||
<li>
|
||||
<label tabIndex={0} role="button">
|
||||
Upload a new photo...
|
||||
<input
|
||||
type="file"
|
||||
name="photo"
|
||||
id="upload-photo"
|
||||
accept=".png, .jpeg, .jpg"
|
||||
className="hidden"
|
||||
onChange={handleImageUpload}
|
||||
/>
|
||||
</label>
|
||||
</li>
|
||||
{user.image && (
|
||||
<li>
|
||||
<div
|
||||
tabIndex={0}
|
||||
role="button"
|
||||
onClick={() =>
|
||||
setUser({
|
||||
...user,
|
||||
image: "",
|
||||
})
|
||||
}
|
||||
>
|
||||
Remove Photo
|
||||
</div>
|
||||
</li>
|
||||
)}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -293,16 +313,18 @@ export default function Account() {
|
||||
<div>
|
||||
<p className="mb-2">Import your data from other platforms.</p>
|
||||
<div className="dropdown dropdown-bottom">
|
||||
<div
|
||||
<Button
|
||||
tabIndex={0}
|
||||
role="button"
|
||||
intent="secondary"
|
||||
onMouseDown={dropdownTriggerer}
|
||||
className="flex gap-2 text-sm btn btn-outline btn-neutral group"
|
||||
className="text-sm"
|
||||
id="import-dropdown"
|
||||
>
|
||||
<i className="bi-cloud-upload text-xl duration-100"></i>
|
||||
<p>Import From</p>
|
||||
</div>
|
||||
Import From
|
||||
</Button>
|
||||
|
||||
<ul className="shadow menu dropdown-content z-[1] bg-base-200 border border-neutral-content rounded-box mt-1 w-60">
|
||||
<li>
|
||||
<label
|
||||
@@ -351,7 +373,7 @@ export default function Account() {
|
||||
<div>
|
||||
<p className="mb-2">Download your data instantly.</p>
|
||||
<Link className="w-fit" href="/api/v1/migration">
|
||||
<div className="flex w-fit gap-2 text-sm btn btn-outline btn-neutral group">
|
||||
<div className="select-none relative duration-200 rounded-lg text-sm text-center w-fit flex justify-center items-center gap-2 disabled:pointer-events-none disabled:opacity-50 bg-neutral-content text-secondary-foreground hover:bg-neutral-content/80 border border-neutral/30 h-10 px-4 py-2">
|
||||
<i className="bi-cloud-download text-xl duration-100"></i>
|
||||
<p>Export Data</p>
|
||||
</div>
|
||||
@@ -374,17 +396,12 @@ export default function Account() {
|
||||
archived data you own.{" "}
|
||||
{process.env.NEXT_PUBLIC_STRIPE
|
||||
? "It will also cancel your subscription. "
|
||||
: undefined}{" "}
|
||||
You will be prompted to enter your password before the deletion
|
||||
process.
|
||||
: undefined}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<Link
|
||||
href="/settings/delete"
|
||||
className="text-white w-full sm:w-fit flex items-center gap-2 py-2 px-4 rounded-md text-lg tracking-wide select-none font-semibold duration-100 bg-red-500 hover:bg-red-400 cursor-pointer"
|
||||
>
|
||||
<p className="text-center w-full">Delete Your Account</p>
|
||||
<Link href="/settings/delete" className="underline">
|
||||
Account deletion page
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -21,6 +21,7 @@ export default function Billing() {
|
||||
<a
|
||||
href={process.env.NEXT_PUBLIC_STRIPE_BILLING_PORTAL_URL}
|
||||
className="underline"
|
||||
target="_blank"
|
||||
>
|
||||
Billing Portal
|
||||
</a>
|
||||
@@ -30,10 +31,7 @@ export default function Billing() {
|
||||
<p className="text-md">
|
||||
If you still need help or encountered any issues, feel free to reach
|
||||
out to us at:{" "}
|
||||
<a
|
||||
className="font-semibold underline"
|
||||
href="mailto:support@linkwarden.app"
|
||||
>
|
||||
<a className="font-semibold" href="mailto:support@linkwarden.app">
|
||||
support@linkwarden.app
|
||||
</a>
|
||||
</p>
|
||||
|
||||
@@ -4,6 +4,7 @@ import TextInput from "@/components/TextInput";
|
||||
import CenteredForm from "@/layouts/CenteredForm";
|
||||
import { signOut, useSession } from "next-auth/react";
|
||||
import Link from "next/link";
|
||||
import Button from "@/components/ui/Button";
|
||||
|
||||
const keycloakEnabled = process.env.NEXT_PUBLIC_KEYCLOAK_ENABLED === "true";
|
||||
const authentikEnabled = process.env.NEXT_PUBLIC_AUTHENTIK_ENABLED === "true";
|
||||
@@ -135,20 +136,14 @@ export default function Delete() {
|
||||
</fieldset>
|
||||
) : undefined}
|
||||
|
||||
<button
|
||||
className={`mx-auto text-white flex items-center gap-2 py-1 px-3 rounded-md text-lg tracking-wide select-none font-semibold duration-100 w-fit ${
|
||||
submitLoader
|
||||
? "bg-red-400 cursor-auto"
|
||||
: "bg-red-500 hover:bg-red-400 cursor-pointer"
|
||||
}`}
|
||||
onClick={() => {
|
||||
if (!submitLoader) {
|
||||
submit();
|
||||
}
|
||||
}}
|
||||
<Button
|
||||
className="mx-auto"
|
||||
intent="destructive"
|
||||
loading={submitLoader}
|
||||
onClick={submit}
|
||||
>
|
||||
<p className="text-center w-full">Delete Your Account</p>
|
||||
</button>
|
||||
</Button>
|
||||
</div>
|
||||
</CenteredForm>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user