egutierrez/linkwarden
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

recreated modals and many other components

Browse Source
This commit is contained in:
daniel31x13
2023-12-01 12:01:56 -05:00
parent 6d51b6de53
commit 732a5227d3
28 changed files with 1144 additions and 282 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pages/choose-username.tsx
+1 -1
View File
@@ -46,7 +46,7 @@ export default function ChooseUsername() {
Choose a Username
</p>
<hr className="border-1 border-neutral-content" />
<div className="divider my-0"></div>
<div>
<p className="text-sm w-fit font-semibold mb-1">Username</p>
pages/collections/[id].tsx
+27 -30
View File
@@ -16,6 +16,8 @@ import NoLinksFound from "@/components/NoLinksFound";
import useLocalSettingsStore from "@/store/localSettings";
import useAccountStore from "@/store/account";
import getPublicUserData from "@/lib/client/getPublicUserData";
import EditCollectionModal from "@/components/Modals/EditCollectionModal";
import EditCollectionSharingModal from "@/components/Modals/EditCollectionSharingModal";
export default function Index() {
const { setModal } = useModalStore();
@@ -71,13 +73,17 @@ export default function Index() {
fetchOwner();
}, [activeCollection]);
const [editCollectionModal, setEditCollectionModal] = useState(false);
const [editCollectionSharingModal, setEditCollectionSharingModal] =
useState(false);
return (
<MainLayout>
<div
style={{
backgroundImage: `linear-gradient(${activeCollection?.color}20 10%, ${
settings.theme === "dark" ? "#262626" : "#f3f4f6"
} 50%, ${settings.theme === "dark" ? "#171717" : "#ffffff"} 100%)`,
} 14rem, ${settings.theme === "dark" ? "#171717" : "#ffffff"} 100%)`,
}}
className="h-full p-5 flex gap-3 flex-col"
>
@@ -103,17 +109,7 @@ export default function Index() {
<div className="flex gap-1 justify-center sm:justify-end items-center w-fit">
<div
className="flex items-center btn px-2 btn-ghost rounded-full w-fit"
onClick={() =>
activeCollection &&
setModal({
modal: "COLLECTION",
state: true,
method: "UPDATE",
isOwner: permissions === true,
active: activeCollection,
defaultIndex: permissions === true ? 1 : 0,
})
}
onClick={() => setEditCollectionSharingModal(true)}
>
{collectionOwner.id ? (
<ProfilePhoto
@@ -156,7 +152,7 @@ export default function Index() {
<p>{activeCollection?.description}</p>
) : undefined}
<hr className="border-1 border-neutral" />
<div className="divider my-0"></div>
<div className="flex justify-between items-end gap-5">
<p>Showing {activeCollection?._count?.links} results</p>
@@ -184,14 +180,7 @@ export default function Index() {
tabIndex={0}
onClick={() => {
(document?.activeElement as HTMLElement)?.blur();
activeCollection &&
setModal({
modal: "COLLECTION",
state: true,
method: "UPDATE",
isOwner: permissions === true,
active: activeCollection,
});
setEditCollectionModal(true);
}}
>
Edit Collection Info
@@ -205,15 +194,7 @@ export default function Index() {
tabIndex={0}
onClick={() => {
(document?.activeElement as HTMLElement)?.blur();
activeCollection &&
setModal({
modal: "COLLECTION",
state: true,
method: "UPDATE",
isOwner: permissions === true,
active: activeCollection,
defaultIndex: permissions === true ? 1 : 0,
});
setEditCollectionSharingModal(true);
}}
>
{permissions === true
@@ -262,6 +243,22 @@ export default function Index() {
<NoLinksFound />
)}
</div>
{activeCollection ? (
<>
<EditCollectionModal
isOpen={editCollectionModal}
onClose={() => setEditCollectionModal(false)}
modalId={"edit-collection-modal" + activeCollection.id}
activeCollection={activeCollection}
/>
<EditCollectionSharingModal
isOpen={editCollectionSharingModal}
onClose={() => setEditCollectionSharingModal(false)}
modalId={"edit-collection-sharing-modal" + activeCollection.id}
activeCollection={activeCollection}
/>
</>
) : undefined}
</MainLayout>
);
}
pages/collections/index.tsx
+4 -6
View File
@@ -6,7 +6,6 @@ import {
} from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import CollectionCard from "@/components/CollectionCard";
import Dropdown from "@/components/Dropdown";
import { useState } from "react";
import MainLayout from "@/layouts/MainLayout";
import { useSession } from "next-auth/react";
@@ -28,8 +27,7 @@ export default function Collections() {
useSort({ sortBy, setData: setSortedCollections, data: collections });
const [newModalIsOpen, setNewModalIsOpen] = useState(false);
const closeNewModal = () => setNewModalIsOpen(false);
const [newCollectionModal, setNewCollectionModal] = useState(false);
return (
<MainLayout>
@@ -99,7 +97,7 @@ export default function Collections() {
<div
className="card card-compact shadow-md hover:shadow-none duration-200 border border-neutral-content p-5 bg-base-200 self-stretch min-h-[12rem] rounded-2xl cursor-pointer flex flex-col gap-4 justify-center items-center group btn"
onClick={() => setNewModalIsOpen(true)}
onClick={() => setNewCollectionModal(true)}
>
<p className="group-hover:opacity-0 duration-100">New Collection</p>
<FontAwesomeIcon
@@ -136,8 +134,8 @@ export default function Collections() {
) : undefined}
</div>
<NewCollectionModal
isOpen={newModalIsOpen}
onClose={closeNewModal}
isOpen={newCollectionModal}
onClose={() => setNewCollectionModal(false)}
modalId="new-collection-modal-1"
/>
</MainLayout>
pages/confirmation.tsx
+1 -1
View File
@@ -10,7 +10,7 @@ export default function EmailConfirmaion() {
Please check your Email
</p>
<hr className="border-1 border-neutral my-3" />
<div className="divider my-3"></div>
<p>A sign in link has been sent to your email address.</p>
pages/dashboard.tsx
+2 -4
View File
@@ -122,8 +122,7 @@ export default function Dashboard() {
icon={faLink}
/>
<hr className="border-neutral-content md:hidden my-5" />
<div className="h-24 border-1 border-l border-neutral-content hidden md:block"></div>
<div className="divider md:divider-horizontal"></div>
<DashboardItem
name={collections.length === 1 ? "Collection" : "Collections"}
@@ -131,8 +130,7 @@ export default function Dashboard() {
icon={faFolder}
/>
<hr className="border-neutral-content md:hidden my-5" />
<div className="h-24 border-1 border-r border-neutral-content hidden md:block"></div>
<div className="divider md:divider-horizontal"></div>
<DashboardItem
name={tags.length === 1 ? "Tag" : "Tags"}
pages/forgot.tsx
+1 -1
View File
@@ -48,7 +48,7 @@ export default function Forgot() {
Password Recovery
</p>
<hr className="border-1 border-neutral-content" />
<div className="divider my-0"></div>
<div>
<p>
pages/login.tsx
+1 -1
View File
@@ -68,7 +68,7 @@ export default function Login() {
Enter your credentials
</p>
<hr className="border-1 border-neutral-content" />
<div className="divider my-0"></div>
<div>
<p className="text-sm w-fit font-semibold mb-1">
pages/public/collections/[id].tsx
+2 -2
View File
@@ -103,7 +103,7 @@ export default function PublicCollections() {
style={{
backgroundImage: `linear-gradient(${collection?.color}30 10%, ${
settings.theme === "dark" ? "#262626" : "#f3f4f6"
} 50%, ${settings.theme === "dark" ? "#171717" : "#ffffff"} 100%)`,
} 18rem, ${settings.theme === "dark" ? "#171717" : "#ffffff"} 100%)`,
}}
>
<ModalManagement />
@@ -195,7 +195,7 @@ export default function PublicCollections() {
<p className="mt-5">{collection.description}</p>
<hr className="mt-5 border-1 border-neutral" />
<div className="divider mt-5 mb-0"></div>
<div className="flex mb-5 mt-10 flex-col gap-5">
<div className="flex justify-between">
pages/register.tsx
+1 -1
View File
@@ -117,7 +117,7 @@ export default function Register() {
Enter your details
</p>
<hr className="border-1 border-neutral-content" />
<div className="divider my-0"></div>
<div>
<p className="text-sm w-fit font-semibold mb-1">Display Name</p>
pages/settings/account.tsx
+4 -4
View File
@@ -153,7 +153,7 @@ export default function Account() {
<SettingsLayout>
<p className="capitalize text-3xl font-thin inline">Account Settings</p>
<hr className="my-3 border-1 border-neutral-content" />
<div className="divider my-3"></div>
<div className="flex flex-col gap-10">
<div className="grid sm:grid-cols-2 gap-3 auto-rows-auto">
@@ -235,7 +235,7 @@ export default function Account() {
</p>
</div>
<hr className="my-3 border-1 border-neutral-content" />
<div className="divider my-3"></div>
<div className="flex gap-3 flex-col">
<div>
@@ -319,7 +319,7 @@ export default function Account() {
</p>
</div>
<hr className="my-3 border-1 border-neutral-content" />
<div className="divider my-3"></div>
<Checkbox
label="Make profile private"
@@ -362,7 +362,7 @@ export default function Account() {
</p>
</div>
<hr className="my-3 border-1 border-neutral-content" />
<div className="divider my-3"></div>
<p>
This will permanently delete ALL the Links, Collections, Tags, and
pages/settings/api.tsx
+1 -1
View File
@@ -56,7 +56,7 @@ export default function Api() {
<SettingsLayout>
<p className="capitalize text-3xl font-thin inline">API Keys (Soon)</p>
<hr className="my-3 border-1 border-neutral-content" />
<div className="divider my-3"></div>
<div className="flex flex-col gap-3">
<div className="badge bg-orange-500 rounded-md border border-black w-fit px-2 text-black">
pages/settings/appearance.tsx
+4 -2
View File
@@ -69,7 +69,7 @@ export default function Appearance() {
<SettingsLayout>
<p className="capitalize text-3xl font-thin inline">Appearance</p>
<hr className="my-3 border-1 border-neutral-content" />
<div className="divider my-3"></div>
<div className="flex flex-col gap-10">
<div>
@@ -107,7 +107,9 @@ export default function Appearance() {
<div className="flex items-center gap-2 w-full rounded-md h-8">
<p className="truncate w-full pr-7 text-3xl font-thin">Link Card</p>
</div>
<hr className="my-3 border-1 border-neutral-content" />
<div className="divider my-3"></div>
<Checkbox
label="Display Icons"
state={user.displayLinkIcons}
pages/settings/archive.tsx
+1 -1
View File
@@ -59,7 +59,7 @@ export default function Archive() {
<SettingsLayout>
<p className="capitalize text-3xl font-thin inline">Archive Settings</p>
<hr className="my-3 border-1 border-neutral-content" />
<div className="divider my-3"></div>
<p>Formats to Archive webpages:</p>
<div className="p-3">
pages/settings/billing.tsx
+1 -1
View File
@@ -13,7 +13,7 @@ export default function Billing() {
<SettingsLayout>
<p className="capitalize text-3xl font-thin inline">Billing Settings</p>
<hr className="my-3 border-1 border-neutral-content" />
<div className="divider my-3"></div>
<div className="w-full mx-auto flex flex-col gap-3 justify-between">
<p className="text-md">
pages/settings/delete.tsx
+2 -2
View File
@@ -7,7 +7,7 @@ import Link from "next/link";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faChevronLeft } from "@fortawesome/free-solid-svg-icons";
export default function Password() {
export default function Delete() {
const [password, setPassword] = useState("");
const [comment, setComment] = useState<string>();
const [feedback, setFeedback] = useState<string>();
@@ -70,7 +70,7 @@ export default function Password() {
</p>
</div>
<hr className="border-1 border-neutral-content" />
<div className="divider my-0"></div>
<p>
This will permanently delete all the Links, Collections, Tags, and
pages/settings/password.tsx
+1 -1
View File
@@ -47,7 +47,7 @@ export default function Password() {
<SettingsLayout>
<p className="capitalize text-3xl font-thin inline">Change Password</p>
<hr className="my-3 border-1 border-neutral-content" />
<div className="divider my-3"></div>
<p className="mb-3">
To change your password, please fill out the following. Your password
pages/subscribe.tsx
+1 -1
View File
@@ -35,7 +35,7 @@ export default function Subscribe() {
Subscribe to Linkwarden!
</p>
<hr className="border-1 border-neutral-content" />
<div className="divider my-0"></div>
<div>
<p>