xwx.moe/el.xwx.moe
xwx.moe/ el.xwx.moe
1
0
Disbranĉigi 0
Fontkodo Issues Tirpetoj Actions Packages Projects Eldonoj Wiki Activity

final touch

This commit is contained in:
daniel31x13 2023-12-17 23:32:33 -05:00
parent 141ca8f60b
commit 1677e132f3
23 changed files with 130 additions and 125 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
components/LinkViews/LinkComponents/LinkCollection.tsx
View File

@ -5,7 +5,10 @@ import {
import { useRouter } from "next/router"; import { useRouter } from "next/router";
import React from "react"; import React from "react";
export default function LinkCollection({ link, collection }: { export default function LinkCollection({
link,
collection,
}: {
link: LinkIncludingShortenedCollectionAndTags; link: LinkIncludingShortenedCollectionAndTags;
collection: CollectionIncludingMembersAndLinkCount; collection: CollectionIncludingMembersAndLinkCount;
}) { }) {
@ -19,7 +22,10 @@ export default function LinkCollection({ link, collection }: {
}} }}
className="flex items-center gap-1 max-w-full w-fit hover:opacity-70 duration-100" className="flex items-center gap-1 max-w-full w-fit hover:opacity-70 duration-100"
> >
<i className="bi-folder2 text-lg shadow" style={{ color: collection?.color }}></i> <i
className="bi-folder-fill text-lg drop-shadow"
style={{ color: collection?.color }}
></i>
<p className="truncate capitalize">{collection?.name}</p> <p className="truncate capitalize">{collection?.name}</p>
</div> </div>
); );

2
components/Modal/Collection/CollectionInfo.tsx
View File

@ -67,7 +67,7 @@ export default function CollectionInfo({
<div className="flex flex-col justify-between items-center w-32"> <div className="flex flex-col justify-between items-center w-32">
<p className="w-full mb-2">Color</p> <p className="w-full mb-2">Color</p>
<div style={{ color: collection.color }}> <div style={{ color: collection.color }}>
<i className={"bi-folder2"}></i> <i className={"bi-folder-fill"}></i>
</div> </div>
<div <div
className="btn btn-ghost btn-xs" className="btn btn-ghost btn-xs"

5
components/ModalContent/EditCollectionModal.tsx
View File

@ -68,7 +68,10 @@ export default function EditCollectionModal({
<p className="w-full mb-2">Color</p> <p className="w-full mb-2">Color</p>
<div className="color-picker flex justify-between"> <div className="color-picker flex justify-between">
<div className="flex flex-col gap-2 items-center w-32"> <div className="flex flex-col gap-2 items-center w-32">
<i className="bi-folder2 text-5xl drop-shadow" style={{ color: collection.color }}></i> <i
className="bi-folder-fill text-5xl drop-shadow"
style={{ color: collection.color }}
></i>
<div <div
className="btn btn-ghost btn-xs" className="btn btn-ghost btn-xs"
onClick={() => onClick={() =>

5
components/ModalContent/NewCollectionModal.tsx
View File

@ -68,7 +68,10 @@ export default function NewCollectionModal({ onClose }: Props) {
<p className="w-full mb-2">Color</p> <p className="w-full mb-2">Color</p>
<div className="color-picker flex justify-between"> <div className="color-picker flex justify-between">
<div className="flex flex-col gap-2 items-center w-32"> <div className="flex flex-col gap-2 items-center w-32">
<i className={"bi-folder2 text-5xl"} style={{ color: collection.color }}></i> <i
className={"bi-folder-fill text-5xl"}
style={{ color: collection.color }}
></i>
<div <div
className="btn btn-ghost btn-xs" className="btn btn-ghost btn-xs"
onClick={() => onClick={() =>

24
components/ModalContent/NewLinkModal.tsx
View File

@ -146,14 +146,6 @@ export default function NewLinkModal({ onClose }: Props) {
</div> </div>
<div className={"mt-2"}> <div className={"mt-2"}>
<div
onClick={() => setOptionsExpanded(!optionsExpanded)}
className={`cursor-pointer duration-100 flex items-center text-sm`}
>
<span>{optionsExpanded ? "Hide" : "More"} Options</span>
<i className={`ml-0.5 ${optionsExpanded ? 'bi-chevron-up' : 'bi-chevron-down'}`}></i>
</div>
{optionsExpanded ? ( {optionsExpanded ? (
<div className="mt-5"> <div className="mt-5">
{/* <hr className="mb-3 border border-neutral-content" /> */} {/* <hr className="mb-3 border border-neutral-content" /> */}
@ -194,7 +186,21 @@ export default function NewLinkModal({ onClose }: Props) {
) : undefined} ) : undefined}
</div> </div>
<div className="flex items-center justify-end mt-5"> <div className="flex justify-between items-center mt-5">
<div
onClick={() => setOptionsExpanded(!optionsExpanded)}
className={`rounded-md cursor-pointer btn btn-sm btn-ghost duration-100 flex items-center px-2 w-fit text-sm`}
>
<p className="font-normal">
{optionsExpanded ? "Hide" : "More"} Options
</p>
<i
className={`${
optionsExpanded ? "bi-chevron-up" : "bi-chevron-down"
}`}
></i>
</div>
<button <button
className="btn btn-accent dark:border-violet-400 text-white" className="btn btn-accent dark:border-violet-400 text-white"
onClick={submit} onClick={submit}

8
components/Navbar.tsx
View File

@ -55,7 +55,7 @@ export default function Navbar() {
onClick={toggleSidebar} onClick={toggleSidebar}
className="text-neutral btn btn-square btn-sm btn-ghost lg:hidden" className="text-neutral btn btn-square btn-sm btn-ghost lg:hidden"
> >
<i className="bi-list text-xl"></i> <i className="bi-list text-2xl leading-none"></i>
</div> </div>
<SearchBar /> <SearchBar />
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
@ -66,13 +66,13 @@ export default function Navbar() {
<div <div
tabIndex={0} tabIndex={0}
role="button" role="button"
className="flex min-w-[3.4rem] items-center group btn btn-accent dark:border-violet-400 text-white btn-sm px-2" className="flex min-w-[3.4rem] items-center btn btn-accent dark:border-violet-400 text-white btn-sm max-h-[2rem] px-2 relative"
> >
<span> <span>
<i className="bi-plus text-xl"></i> <i className="bi-plus text-4xl absolute -top-[0.3rem] left-0 pointer-events-none"></i>
</span> </span>
<span> <span>
<i className="bi-caret-down-fill text-xs"></i> <i className="bi-caret-down-fill text-xs absolute top-2 right-[0.3rem] pointer-events-none"></i>
</span> </span>
</div> </div>
</div> </div>

4
components/NoLinksFound.tsx
View File

@ -33,9 +33,7 @@ export default function NoLinksFound({ text }: Props) {
}} }}
className="inline-flex gap-1 relative w-[11rem] items-center btn btn-accent dark:border-violet-400 text-white group" className="inline-flex gap-1 relative w-[11rem] items-center btn btn-accent dark:border-violet-400 text-white group"
> >
<i <i className="bi-plus-lg text-3xl left-2 group-hover:ml-[4rem] absolute duration-100"></i>
className="bi-plus text-4xl left-2 group-hover:ml-[4rem] absolute duration-100"
></i>
<span className="group-hover:opacity-0 text-right w-full duration-100"> <span className="group-hover:opacity-0 text-right w-full duration-100">
Create New Link Create New Link
</span> </span>

2
components/PageHeader.tsx
View File

@ -16,7 +16,7 @@ export default function PageHeader({
></i> ></i>
<div> <div>
<p className="text-3xl capitalize font-thin">{title}</p> <p className="text-3xl capitalize font-thin">{title}</p>
<p>{description}</p> <p className="text-xs sm:text-sm">{description}</p>
</div> </div>
</div> </div>
); );

10
components/ProfilePhoto.tsx
View File

@ -6,7 +6,7 @@ type Props = {
className?: string; className?: string;
priority?: boolean; priority?: boolean;
name?: string; name?: string;
dimensionClass?: string; large?: boolean;
}; };
export default function ProfilePhoto({ export default function ProfilePhoto({
@ -14,7 +14,7 @@ export default function ProfilePhoto({
className, className,
priority, priority,
name, name,
dimensionClass, large,
}: Props) { }: Props) {
const [image, setImage] = useState(""); const [image, setImage] = useState("");
@ -30,14 +30,14 @@ export default function ProfilePhoto({
return !image ? ( return !image ? (
<div <div
className={`avatar drop-shadow-md placeholder ${className || ""} ${ className={`avatar drop-shadow-md placeholder ${className || ""} ${
dimensionClass || "w-8 h-8 " large ? "w-28 h-28" : "w-8 h-8"
}`} }`}
> >
<div className="bg-base-100 text-neutral rounded-full w-full h-full ring-2 ring-neutral-content select-none"> <div className="bg-base-100 text-neutral rounded-full w-full h-full ring-2 ring-neutral-content select-none">
{name ? ( {name ? (
<span className="text-2xl capitalize">{name.slice(0, 1)}</span> <span className="text-2xl capitalize">{name.slice(0, 1)}</span>
) : ( ) : (
<i className="bi-person text-xl"></i> <i className={`bi-person ${large ? "text-5xl" : "text-xl"}`}></i>
)} )}
</div> </div>
</div> </div>
@ -45,7 +45,7 @@ export default function ProfilePhoto({
<div <div
className={`avatar skeleton rounded-full drop-shadow-md ${ className={`avatar skeleton rounded-full drop-shadow-md ${
className || "" className || ""
} ${dimensionClass || "w-8 h-8 "}`} } ${large || "w-8 h-8"}`}
> >
<div className="rounded-full w-full h-full ring-2 ring-neutral-content"> <div className="rounded-full w-full h-full ring-2 ring-neutral-content">
<Image <Image

6
components/ReadableView.tsx
View File

@ -172,9 +172,7 @@ export default function ReadableView({ link }: Props) {
target="_blank" target="_blank"
className="hover:opacity-60 duration-100 break-all text-sm flex items-center gap-1 text-neutral w-fit" className="hover:opacity-60 duration-100 break-all text-sm flex items-center gap-1 text-neutral w-fit"
> >
<i <i className="bi-link-45deg"></i>
className="bi-link-45deg"
></i>
{isValidUrl(link?.url || "") {isValidUrl(link?.url || "")
? new URL(link?.url as string).host ? new URL(link?.url as string).host
@ -190,7 +188,7 @@ export default function ReadableView({ link }: Props) {
className="flex items-center gap-1 cursor-pointer hover:opacity-60 duration-100 mr-2 z-10" className="flex items-center gap-1 cursor-pointer hover:opacity-60 duration-100 mr-2 z-10"
> >
<i <i
className="bi-folder2 drop-shadow text-2xl" className="bi-folder-fill drop-shadow text-2xl"
style={{ color: link?.collection.color }} style={{ color: link?.collection.color }}
></i> ></i>
<p <p

18
components/Sidebar.tsx
View File

@ -15,7 +15,7 @@ export default function Sidebar({ className }: { className?: string }) {
() => { () => {
const storedValue = localStorage.getItem("collectionDisclosure"); const storedValue = localStorage.getItem("collectionDisclosure");
return storedValue ? storedValue === "true" : true; return storedValue ? storedValue === "true" : true;
}, }
); );
const { collections } = useCollectionStore(); const { collections } = useCollectionStore();
@ -32,7 +32,7 @@ export default function Sidebar({ className }: { className?: string }) {
useEffect(() => { useEffect(() => {
localStorage.setItem( localStorage.setItem(
"collectionDisclosure", "collectionDisclosure",
collectionDisclosure ? "true" : "false", collectionDisclosure ? "true" : "false"
); );
}, [collectionDisclosure]); }, [collectionDisclosure]);
@ -78,7 +78,7 @@ export default function Sidebar({ className }: { className?: string }) {
: "hover:bg-neutral/20" : "hover:bg-neutral/20"
} duration-100 py-5 px-2 cursor-pointer flex items-center gap-2 w-full rounded-md h-8 capitalize`} } duration-100 py-5 px-2 cursor-pointer flex items-center gap-2 w-full rounded-md h-8 capitalize`}
> >
<i className="bi-folder2 text-primary text-2xl drop-shadow"></i> <i className="bi-folder text-primary text-2xl drop-shadow"></i>
<p className="truncate w-full">All Collections</p> <p className="truncate w-full">All Collections</p>
</div> </div>
</Link> </Link>
@ -104,9 +104,9 @@ export default function Sidebar({ className }: { className?: string }) {
}} }}
className="flex items-center justify-between w-full text-left mb-2 pl-2 font-bold text-neutral mt-5" className="flex items-center justify-between w-full text-left mb-2 pl-2 font-bold text-neutral mt-5"
> >
<p className="text-sm ">Collections</p> <p className="text-sm">Collections</p>
<i <i
className={`bi-chevron-down text-primary drop-shadow ${ className={`bi-chevron-down ${
collectionDisclosure ? "rotate-reverse" : "rotate" collectionDisclosure ? "rotate-reverse" : "rotate"
}`} }`}
></i> ></i>
@ -134,14 +134,14 @@ export default function Sidebar({ className }: { className?: string }) {
} duration-100 py-1 px-2 cursor-pointer flex items-center gap-2 w-full rounded-md h-8 capitalize`} } duration-100 py-1 px-2 cursor-pointer flex items-center gap-2 w-full rounded-md h-8 capitalize`}
> >
<i <i
className="bi-folder2 text-2xl drop-shadow" className="bi-folder-fill text-2xl drop-shadow"
style={{ color: e.color }} style={{ color: e.color }}
></i> ></i>
<p className="truncate w-full">{e.name}</p> <p className="truncate w-full">{e.name}</p>
{e.isPublic ? ( {e.isPublic ? (
<i <i
className="bi-globe-americas text-sm text-black/50 dark:text-white/50 drop-shadow" className="bi-globe2 text-sm text-black/50 dark:text-white/50 drop-shadow"
title="This collection is being shared publicly." title="This collection is being shared publicly."
></i> ></i>
) : undefined} ) : undefined}
@ -173,8 +173,8 @@ export default function Sidebar({ className }: { className?: string }) {
> >
<p className="text-sm">Tags</p> <p className="text-sm">Tags</p>
<i <i
className={`bi-chevron-down text-primary drop-shadow ${ className={`bi-chevron-down ${
collectionDisclosure ? "rotate-reverse" : "rotate" tagDisclosure ? "rotate-reverse" : "rotate"
}`} }`}
></i> ></i>
</Disclosure.Button> </Disclosure.Button>

4
components/SortDropdown.tsx
View File

@ -14,9 +14,7 @@ export default function SortDropdown({ sortBy, setSort }: Props) {
role="button" role="button"
className="btn btn-sm btn-square btn-ghost" className="btn btn-sm btn-square btn-ghost"
> >
<i <i className="bi-chevron-expand text-neutral text-2xl"></i>
className="bi-filter text-neutral text-2xl"
></i>
</div> </div>
<ul className="dropdown-content z-[30] menu shadow bg-base-200 border border-neutral-content rounded-xl w-52 mt-1"> <ul className="dropdown-content z-[30] menu shadow bg-base-200 border border-neutral-content rounded-xl w-52 mt-1">
<li> <li>

4
components/ToggleDarkMode.tsx
View File

@ -32,8 +32,8 @@ export default function ToggleDarkMode({ className }: Props) {
className="theme-controller" className="theme-controller"
checked={localStorage.getItem("theme") === "light" ? false : true} checked={localStorage.getItem("theme") === "light" ? false : true}
/> />
<i className="bi-sun text-xl swap-on"></i> <i className="bi-sun-fill text-xl swap-on"></i>
<i className="bi-moon text-xl swap-off"></i> <i className="bi-moon-fill text-xl swap-off"></i>
</label> </label>
</div> </div>
); );

8
layouts/SettingsLayout.tsx
View File

@ -53,18 +53,14 @@ export default function SettingsLayout({ children }: Props) {
onClick={toggleSidebar} onClick={toggleSidebar}
className="text-neutral btn btn-square btn-sm btn-ghost lg:hidden" className="text-neutral btn btn-square btn-sm btn-ghost lg:hidden"
> >
<i <i className="bi-list text-2xl leading-none"></i>
className="bi-list text-xl"
></i>
</div> </div>
<Link <Link
href="/dashboard" href="/dashboard"
className="text-neutral btn btn-square btn-sm btn-ghost" className="text-neutral btn btn-square btn-sm btn-ghost"
> >
<i <i className="bi-chevron-left text-xl"></i>
className="bi-chevron-left text-xl"
></i>
</Link> </Link>
</div> </div>

7
pages/collections/[id].tsx
View File

@ -109,7 +109,7 @@ export default function Index() {
<div className="flex gap-3 items-start justify-between"> <div className="flex gap-3 items-start justify-between">
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<i <i
className="bi-folder2 text-3xl drop-shadow" className="bi-folder-fill text-3xl drop-shadow"
style={{ color: activeCollection?.color }} style={{ color: activeCollection?.color }}
></i> ></i>
@ -124,10 +124,7 @@ export default function Index() {
role="button" role="button"
className="btn btn-ghost btn-sm btn-square text-neutral" className="btn btn-ghost btn-sm btn-square text-neutral"
> >
<i <i className="bi-three-dots text-xl" title="More"></i>
className="bi-three-dots text-xl"
title="More"
></i>
</div> </div>
<ul className="dropdown-content z-[30] menu shadow bg-base-200 border border-neutral-content rounded-box w-52 mt-1"> <ul className="dropdown-content z-[30] menu shadow bg-base-200 border border-neutral-content rounded-box w-52 mt-1">
{permissions === true ? ( {permissions === true ? (

22
pages/collections/index.tsx
View File

@ -24,15 +24,17 @@ export default function Collections() {
return ( return (
<MainLayout> <MainLayout>
<div className="p-5 flex flex-col gap-5 w-full h-full"> <div className="p-5 flex flex-col gap-5 w-full h-full">
<PageHeader <div className="flex justify-between">
icon={"bi-folder2"} <PageHeader
title={"Collections"} icon={"bi-folder"}
description={"Collections you own"} title={"Collections"}
/> description={"Collections you own"}
/>
<div className="flex gap-3 justify-end"> <div className="flex gap-3 justify-end">
<div className="relative mt-2"> <div className="relative mt-2">
<SortDropdown sortBy={sortBy} setSort={setSortBy} /> <SortDropdown sortBy={sortBy} setSort={setSortBy} />
</div>
</div> </div>
</div> </div>
@ -48,14 +50,14 @@ export default function Collections() {
onClick={() => setNewCollectionModal(true)} onClick={() => setNewCollectionModal(true)}
> >
<p className="group-hover:opacity-0 duration-100">New Collection</p> <p className="group-hover:opacity-0 duration-100">New Collection</p>
<i className="bi-plus text-5xl group-hover:text-7xl group-hover:-mt-6 text-primary drop-shadow duration-100"></i> <i className="bi-plus-lg text-5xl group-hover:text-7xl group-hover:-mt-6 text-primary drop-shadow duration-100"></i>
</div> </div>
</div> </div>
{sortedCollections.filter((e) => e.ownerId !== data?.user.id)[0] ? ( {sortedCollections.filter((e) => e.ownerId !== data?.user.id)[0] ? (
<> <>
<div className="flex items-center gap-3 my-5"> <div className="flex items-center gap-3 my-5">
<i className="bi-folder2 text-3xl sm:text-2xl text-primary drop-shadow"></i> <i className="bi-folder text-3xl sm:text-2xl text-primary drop-shadow"></i>
<div> <div>
<p className="text-3xl capitalize font-thin"> <p className="text-3xl capitalize font-thin">

24
pages/dashboard.tsx
View File

@ -33,8 +33,8 @@ export default function Dashboard() {
collections.reduce( collections.reduce(
(accumulator, collection) => (accumulator, collection) =>
accumulator + (collection._count as any).links, accumulator + (collection._count as any).links,
0, 0
), )
); );
}, [collections]); }, [collections]);
@ -94,10 +94,13 @@ export default function Dashboard() {
return ( return (
<MainLayout> <MainLayout>
<div style={{ flex: "1 1 auto" }} className="p-5 flex flex-col gap-5"> <div style={{ flex: "1 1 auto" }} className="p-5 flex flex-col gap-5">
<PageHeader icon={'bi-house '} title={'Dashboard'} description={"A brief overview of your data"}/> <PageHeader
icon={"bi-house "}
title={"Dashboard"}
description={"A brief overview of your data"}
/>
<div> <div>
<div <div className="flex justify-evenly flex-col md:flex-row md:items-center gap-2 md:w-full h-full rounded-2xl p-8 border border-neutral-content bg-base-200">
className="flex justify-evenly flex-col md:flex-row md:items-center gap-2 md:w-full h-full rounded-2xl p-8 border border-neutral-content bg-base-200">
<DashboardItem <DashboardItem
name={numberOfLinks === 1 ? "Link" : "Links"} name={numberOfLinks === 1 ? "Link" : "Links"}
value={numberOfLinks} value={numberOfLinks}
@ -146,7 +149,7 @@ export default function Dashboard() {
className={`grid 2xl:grid-cols-3 xl:grid-cols-2 grid-cols-1 gap-5 w-full`} className={`grid 2xl:grid-cols-3 xl:grid-cols-2 grid-cols-1 gap-5 w-full`}
> >
{links.slice(0, showLinks).map((e, i) => ( {links.slice(0, showLinks).map((e, i) => (
<LinkCard key={i} link={e} count={i}/> <LinkCard key={i} link={e} count={i} />
))} ))}
</div> </div>
</div> </div>
@ -170,7 +173,7 @@ export default function Dashboard() {
}} }}
className="inline-flex items-center gap-2 text-sm btn btn-accent dark:border-accent text-white" className="inline-flex items-center gap-2 text-sm btn btn-accent dark:border-accent text-white"
> >
<i className="bi-plus text-xl duration-100"></i> <i className="bi-plus-lg text-xl duration-100"></i>
<span className="group-hover:opacity-0 text-right duration-100"> <span className="group-hover:opacity-0 text-right duration-100">
Add New Link Add New Link
</span> </span>
@ -186,8 +189,7 @@ export default function Dashboard() {
<i className="bi-cloud-upload text-xl duration-100"></i> <i className="bi-cloud-upload text-xl duration-100"></i>
<p>Import From</p> <p>Import From</p>
</div> </div>
<ul <ul className="shadow menu dropdown-content z-[1] bg-base-200 border border-neutral-content rounded-box mt-1 w-60">
className="shadow menu dropdown-content z-[1] bg-base-200 border border-neutral-content rounded-box mt-1 w-60">
<li> <li>
<label <label
tabIndex={0} tabIndex={0}
@ -260,7 +262,7 @@ export default function Dashboard() {
> >
{links {links
.filter((e) => e.pinnedBy && e.pinnedBy[0]) .filter((e) => e.pinnedBy && e.pinnedBy[0])
.map((e, i) => <LinkCard key={i} link={e} count={i}/>) .map((e, i) => <LinkCard key={i} link={e} count={i} />)
.slice(0, showLinks)} .slice(0, showLinks)}
</div> </div>
</div> </div>
@ -282,7 +284,7 @@ export default function Dashboard() {
</div> </div>
</div> </div>
{newLinkModal ? ( {newLinkModal ? (
<NewLinkModal onClose={() => setNewLinkModal(false)}/> <NewLinkModal onClose={() => setNewLinkModal(false)} />
) : undefined} ) : undefined}
</MainLayout> </MainLayout>
); );

23
pages/links/index.tsx
View File

@ -10,7 +10,6 @@ import ViewDropdown from "@/components/ViewDropdown";
import DefaultView from "@/components/LinkViews/DefaultView"; import DefaultView from "@/components/LinkViews/DefaultView";
import ListView from "@/components/LinkViews/ListView"; import ListView from "@/components/LinkViews/ListView";
export default function Links() { export default function Links() {
const { links } = useLinkStore(); const { links } = useLinkStore();
@ -33,21 +32,23 @@ export default function Links() {
return ( return (
<MainLayout> <MainLayout>
<div className="p-5 flex flex-col gap-5 w-full h-full"> <div className="p-5 flex flex-col gap-5 w-full h-full">
<PageHeader <div className="flex justify-between">
icon={"bi-link-45deg"} <PageHeader
title={"All Links"} icon={"bi-link-45deg"}
description={"Links from every Collections"} title={"All Links"}
/> description={"Links from every Collections"}
/>
<div className="mt-2 flex items-center justify-end gap-2"> <div className="mt-2 flex items-center justify-end gap-2">
<SortDropdown sortBy={sortBy} setSort={setSortBy}/> <SortDropdown sortBy={sortBy} setSort={setSortBy} />
<ViewDropdown viewMode={viewMode} setViewMode={setViewMode}/> <ViewDropdown viewMode={viewMode} setViewMode={setViewMode} />
</div>
</div> </div>
{links[0] ? ( {links[0] ? (
<LinkComponent links={links}/> <LinkComponent links={links} />
) : ( ) : (
<NoLinksFound text="You Haven't Created Any Links Yet"/> <NoLinksFound text="You Haven't Created Any Links Yet" />
)} )}
</div> </div>
</MainLayout> </MainLayout>

20
pages/links/pinned.tsx
View File

@ -31,18 +31,20 @@ export default function PinnedLinks() {
return ( return (
<MainLayout> <MainLayout>
<div className="p-5 flex flex-col gap-5 w-full h-full"> <div className="p-5 flex flex-col gap-5 w-full h-full">
<PageHeader <div className="flex justify-between">
icon={"bi-pin-angle"} <PageHeader
title={"Pinned Links"} icon={"bi-pin-angle"}
description={"Pinned Links from your Collections"} title={"Pinned Links"}
/> description={"Pinned Links from your Collections"}
<div className="mt-2 flex items-center justify-end gap-2"> />
<SortDropdown sortBy={sortBy} setSort={setSortBy}/> <div className="mt-2 flex items-center justify-end gap-2">
<ViewDropdown viewMode={viewMode} setViewMode={setViewMode}/> <SortDropdown sortBy={sortBy} setSort={setSortBy} />
<ViewDropdown viewMode={viewMode} setViewMode={setViewMode} />
</div>
</div> </div>
{links.some((e) => e.pinnedBy && e.pinnedBy[0]) ? ( {links.some((e) => e.pinnedBy && e.pinnedBy[0]) ? (
<LinkComponent links={links}/> <LinkComponent links={links} />
) : ( ) : (
<div <div
style={{ flex: "1 1 auto" }} style={{ flex: "1 1 auto" }}

21
pages/search.tsx
View File

@ -54,18 +54,21 @@ export default function Search() {
return ( return (
<MainLayout> <MainLayout>
<div className="p-5 flex flex-col gap-5 w-full"> <div className="p-5 flex flex-col gap-5 w-full">
<PageHeader icon={'bi-search'} title={'Search Results'}/> <div className="flex justify-between">
<PageHeader icon={"bi-search"} title={"Search Results"} />
<div className="flex gap-3 items-center justify-end"> <div className="flex gap-3 items-center justify-end">
<div className="flex gap-2 items-center mt-2"> <div className="flex gap-2 items-center mt-2">
<FilterSearchDropdown <FilterSearchDropdown
searchFilter={searchFilter} searchFilter={searchFilter}
setSearchFilter={setSearchFilter} setSearchFilter={setSearchFilter}
/> />
<SortDropdown sortBy={sortBy} setSort={setSortBy} /> <SortDropdown sortBy={sortBy} setSort={setSortBy} />
<ViewDropdown viewMode={viewMode} setViewMode={setViewMode} /> <ViewDropdown viewMode={viewMode} setViewMode={setViewMode} />
</div>
</div> </div>
</div> </div>
{links[0] ? ( {links[0] ? (
<LinkComponent links={links} /> <LinkComponent links={links} />
) : ( ) : (

14
pages/settings/account.tsx
View File

@ -197,7 +197,7 @@ export default function Account() {
<ProfilePhoto <ProfilePhoto
priority={true} priority={true}
src={user.image ? user.image : undefined} src={user.image ? user.image : undefined}
dimensionClass="w-28 h-28" large={true}
/> />
{user.image && ( {user.image && (
<div <div
@ -209,9 +209,7 @@ export default function Account() {
} }
className="absolute top-1 left-1 btn btn-xs btn-circle btn-neutral btn-outline bg-base-100" className="absolute top-1 left-1 btn btn-xs btn-circle btn-neutral btn-outline bg-base-100"
> >
<i <i className="bi-x"></i>
className="bi-x"
></i>
</div> </div>
)} )}
<div className="absolute -bottom-3 left-0 right-0 mx-auto w-fit text-center"> <div className="absolute -bottom-3 left-0 right-0 mx-auto w-fit text-center">
@ -250,9 +248,7 @@ export default function Account() {
className="flex gap-2 text-sm btn btn-outline btn-neutral group" className="flex gap-2 text-sm btn btn-outline btn-neutral group"
id="import-dropdown" id="import-dropdown"
> >
<i <i className="bi-cloud-upload text-xl duration-100"></i>
className="bi-cloud-upload text-xl duration-100"
></i>
<p>Import From</p> <p>Import From</p>
</div> </div>
<ul className="shadow menu dropdown-content z-[1] bg-base-200 border border-neutral-content rounded-box mt-1 w-60"> <ul className="shadow menu dropdown-content z-[1] bg-base-200 border border-neutral-content rounded-box mt-1 w-60">
@ -304,9 +300,7 @@ export default function Account() {
<p className="mb-2">Download your data instantly.</p> <p className="mb-2">Download your data instantly.</p>
<Link className="w-fit" href="/api/v1/migration"> <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="flex w-fit gap-2 text-sm btn btn-outline btn-neutral group">
<i <i className="bi-cloud-download text-xl duration-100"></i>
className="bi-cloud-download text-xl duration-100"
></i>
<p>Export Data</p> <p>Export Data</p>
</div> </div>
</Link> </Link>

12
pages/settings/appearance.tsx
View File

@ -67,31 +67,27 @@ export default function Appearance() {
<p className="mb-3">Select Theme</p> <p className="mb-3">Select Theme</p>
<div className="flex gap-3 w-full"> <div className="flex gap-3 w-full">
<div <div
className={`w-full text-center outline-solid outline-neutral-content outline dark:outline-neutral-700 h-28 duration-100 rounded-md flex items-center justify-center cursor-pointer select-none bg-black ${ className={`w-full text-center outline-solid outline-neutral-content outline dark:outline-neutral-700 h-36 duration-100 rounded-md flex items-center justify-center cursor-pointer select-none bg-black ${
localStorage.getItem("theme") === "dark" localStorage.getItem("theme") === "dark"
? "dark:outline-primary text-primary" ? "dark:outline-primary text-primary"
: "text-white" : "text-white"
}`} }`}
onClick={() => updateSettings({ theme: "dark" })} onClick={() => updateSettings({ theme: "dark" })}
> >
<i <i className="bi-moon-fill text-6xl"></i>
className="bi-moon text-6xl"
></i>
<p className="ml-2 text-2xl">Dark</p> <p className="ml-2 text-2xl">Dark</p>
{/* <hr className="my-3 outline-1 outline-neutral-content dark:outline-neutral-700" /> */} {/* <hr className="my-3 outline-1 outline-neutral-content dark:outline-neutral-700" /> */}
</div> </div>
<div <div
className={`w-full text-center outline-solid outline-neutral-content outline dark:outline-neutral-700 h-28 duration-100 rounded-md flex items-center justify-center cursor-pointer select-none bg-white ${ className={`w-full text-center outline-solid outline-neutral-content outline dark:outline-neutral-700 h-36 duration-100 rounded-md flex items-center justify-center cursor-pointer select-none bg-white ${
localStorage.getItem("theme") === "light" localStorage.getItem("theme") === "light"
? "outline-primary text-primary" ? "outline-primary text-primary"
: "text-black" : "text-black"
}`} }`}
onClick={() => updateSettings({ theme: "light" })} onClick={() => updateSettings({ theme: "light" })}
> >
<i <i className="bi-sun-fill text-6xl"></i>
className="bi-sun text-6xl"
></i>
<p className="ml-2 text-2xl">Light</p> <p className="ml-2 text-2xl">Light</p>
{/* <hr className="my-3 outline-1 outline-neutral-content dark:outline-neutral-700" /> */} {/* <hr className="my-3 outline-1 outline-neutral-content dark:outline-neutral-700" /> */}
</div> </div>

2
pages/settings/archive.tsx
View File

@ -61,7 +61,7 @@ export default function Archive() {
<div className="divider my-3"></div> <div className="divider my-3"></div>
<p>Formats to Archive webpages:</p> <p>Formats to Archive/Preserve webpages:</p>
<div className="p-3"> <div className="p-3">
<Checkbox <Checkbox
label="Screenshot" label="Screenshot"