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

refactor components

This commit is contained in:
daniel31x13 2024-05-24 19:13:04 -04:00
parent d262041f33
commit f310cd79ad
14 changed files with 74 additions and 66 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
components/AnnouncementBar.tsx → components/Announcement.tsx
View File

@ -5,7 +5,7 @@ type Props = {
toggleAnnouncementBar: MouseEventHandler<HTMLButtonElement>; toggleAnnouncementBar: MouseEventHandler<HTMLButtonElement>;
}; };
export default function AnnouncementBar({ toggleAnnouncementBar }: Props) { export default function Announcement({ toggleAnnouncementBar }: Props) {
const announcementId = localStorage.getItem("announcementId"); const announcementId = localStorage.getItem("announcementId");
return ( return (

2
components/LinkViews/LinkComponents/LinkTypeBadge.tsx
View File

@ -25,7 +25,7 @@ export default function LinkTypeBadge({
onClick={(e) => { onClick={(e) => {
e.stopPropagation(); e.stopPropagation();
}} }}
className="flex gap-1 item-center select-none text-neutral hover:opacity-70 duration-100" className="flex gap-1 item-center select-none text-neutral hover:opacity-70 duration-100 max-w-full w-fit"
> >
<i className="bi-link-45deg text-lg leading-none"></i> <i className="bi-link-45deg text-lg leading-none"></i>
<p className="text-xs truncate">{shortendURL}</p> <p className="text-xs truncate">{shortendURL}</p>

21
components/LinkViews/LinkList.tsx
View File

@ -91,7 +91,7 @@ export default function LinkCardCompact({
<div <div
className={`${selectedStyle} border relative items-center flex ${ className={`${selectedStyle} border relative items-center flex ${
!showInfo && !isPWA() ? "hover:bg-base-300 p-3" : "py-3" !showInfo && !isPWA() ? "hover:bg-base-300 p-3" : "py-3"
} duration-200 rounded-lg`} } duration-200 rounded-lg w-full`}
onClick={() => onClick={() =>
selectable selectable
? handleCheckboxClick(link) ? handleCheckboxClick(link)
@ -117,29 +117,32 @@ export default function LinkCardCompact({
/> />
)} */} )} */}
<div <div
className="flex items-center cursor-pointer" className="flex items-center cursor-pointer w-full"
onClick={() => onClick={() =>
!editMode && window.open(generateLinkHref(link, account), "_blank") !editMode && window.open(generateLinkHref(link, account), "_blank")
} }
> >
<div className="shrink-0"> <div className="shrink-0">
<LinkIcon <LinkIcon link={link} className="w-12 h-12 text-4xl" />
link={link}
className="mt-1 sm:mt-0 sm:w-12 w-8 sm:h-12 h-8 text-xl sm:text-4xl"
/>
</div> </div>
<div className="w-[calc(100%-56px)] ml-2"> <div className="w-[calc(100%-56px)] ml-2">
<p className="line-clamp-1 mr-8 text-primary select-none"> <p className="line-clamp-1 mr-8 text-primary select-none">
{unescapeString(link.name || link.description) || link.url} {link.name ? (
unescapeString(link.name)
) : (
<div className="mt-2">
<LinkTypeBadge link={link} />
</div>
)}
</p> </p>
<div className="mt-1 flex flex-col sm:flex-row sm:items-center gap-2 text-xs text-neutral"> <div className="mt-1 flex flex-col sm:flex-row sm:items-center gap-2 text-xs text-neutral">
<div className="flex items-center gap-x-3 w-fit text-neutral flex-wrap"> <div className="flex items-center gap-x-3 text-neutral flex-wrap">
{collection ? ( {collection ? (
<LinkCollection link={link} collection={collection} /> <LinkCollection link={link} collection={collection} />
) : undefined} ) : undefined}
<LinkTypeBadge link={link} /> {link.name && <LinkTypeBadge link={link} />}
<LinkDate link={link} /> <LinkDate link={link} />
</div> </div>
</div> </div>

8
components/ModalContent/BulkDeleteLinksModal.tsx
View File

@ -2,6 +2,7 @@ import React from "react";
import useLinkStore from "@/store/links"; import useLinkStore from "@/store/links";
import toast from "react-hot-toast"; import toast from "react-hot-toast";
import Modal from "../Modal"; import Modal from "../Modal";
import Button from "../ui/Button";
type Props = { type Props = {
onClose: Function; onClose: Function;
@ -62,13 +63,10 @@ export default function BulkDeleteLinksModal({ onClose }: Props) {
&apos;Delete&apos; to bypass this confirmation in the future. &apos;Delete&apos; to bypass this confirmation in the future.
</p> </p>
<button <Button className="ml-auto" intent="destructive" onClick={deleteLink}>
className={`ml-auto btn w-fit text-white flex items-center gap-2 duration-100 bg-red-500 hover:bg-red-400 hover:dark:bg-red-600 cursor-pointer`}
onClick={deleteLink}
>
<i className="bi-trash text-xl" /> <i className="bi-trash text-xl" />
Delete Delete
</button> </Button>
</div> </div>
</Modal> </Modal>
); );

14
components/ModalContent/DeleteCollectionModal.tsx
View File

@ -6,6 +6,7 @@ import { CollectionIncludingMembersAndLinkCount } from "@/types/global";
import { useRouter } from "next/router"; import { useRouter } from "next/router";
import usePermissions from "@/hooks/usePermissions"; import usePermissions from "@/hooks/usePermissions";
import Modal from "../Modal"; import Modal from "../Modal";
import Button from "../ui/Button";
type Props = { type Props = {
onClose: Function; onClose: Function;
@ -96,20 +97,15 @@ export default function DeleteCollectionModal({
<p>Click the button below to leave the current collection.</p> <p>Click the button below to leave the current collection.</p>
)} )}
<button <Button
disabled={permissions === true && inputField !== collection.name} disabled={permissions === true && inputField !== collection.name}
className={`ml-auto btn w-fit text-white flex items-center gap-2 duration-100 ${
permissions === true
? inputField === collection.name
? "bg-red-500 hover:bg-red-400 hover:dark:bg-red-600 cursor-pointer"
: "cursor-not-allowed bg-red-300 dark:bg-red-900"
: "bg-red-500 hover:bg-red-400 hover:dark:bg-red-600 cursor-pointer"
}`}
onClick={submit} onClick={submit}
intent="destructive"
className="ml-auto"
> >
<i className="bi-trash text-xl"></i> <i className="bi-trash text-xl"></i>
{permissions === true ? "Delete" : "Leave"} Collection {permissions === true ? "Delete" : "Leave"} Collection
</button> </Button>
</div> </div>
</Modal> </Modal>
); );

1
components/ui/Button.tsx
View File

@ -22,6 +22,7 @@ const buttonVariants = cva(
size: { size: {
small: "h-7 px-2", small: "h-7 px-2",
medium: "h-10 px-4 py-2", medium: "h-10 px-4 py-2",
large: "h-12 px-7 py-2",
full: "px-4 py-2 w-full", full: "px-4 py-2 w-full",
icon: "h-10 w-10", icon: "h-10 w-10",
}, },

2
layouts/MainLayout.tsx
View File

@ -1,5 +1,5 @@
import Navbar from "@/components/Navbar"; import Navbar from "@/components/Navbar";
import Announcement from "@/components/AnnouncementBar"; import Announcement from "@/components/Announcement";
import Sidebar from "@/components/Sidebar"; import Sidebar from "@/components/Sidebar";
import { ReactNode, useEffect, useState } from "react"; import { ReactNode, useEffect, useState } from "react";
import getLatestVersion from "@/lib/client/getLatestVersion"; import getLatestVersion from "@/lib/client/getLatestVersion";

4
lib/api/controllers/dashboard/getDashboardData.ts
View File

@ -14,7 +14,7 @@ export default async function getDashboardData(
else if (query.sort === Sort.DescriptionZA) order = { description: "desc" }; else if (query.sort === Sort.DescriptionZA) order = { description: "desc" };
const pinnedLinks = await prisma.link.findMany({ const pinnedLinks = await prisma.link.findMany({
take: 8, take: 10,
where: { where: {
AND: [ AND: [
{ {
@ -46,7 +46,7 @@ export default async function getDashboardData(
}); });
const recentlyAddedLinks = await prisma.link.findMany({ const recentlyAddedLinks = await prisma.link.findMany({
take: 8, take: 10,
where: { where: {
collection: { collection: {
OR: [ OR: [

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

@ -380,7 +380,7 @@ export default function Index() {
? bulkDeleteLinks() ? bulkDeleteLinks()
: setBulkDeleteLinksModal(true); : setBulkDeleteLinksModal(true);
}} }}
className="btn btn-sm bg-red-400 border-red-400 hover:border-red-500 hover:bg-red-500 text-white w-fit ml-auto" className="btn btn-sm bg-red-500 hover:bg-red-400 text-white w-fit ml-auto"
disabled={ disabled={
selectedLinks.length === 0 || selectedLinks.length === 0 ||
!(permissions === true || permissions?.canDelete) !(permissions === true || permissions?.canDelete)

64
pages/dashboard.tsx
View File

@ -41,12 +41,14 @@ export default function Dashboard() {
const handleNumberOfLinksToShow = () => { const handleNumberOfLinksToShow = () => {
if (window.innerWidth > 1900) { if (window.innerWidth > 1900) {
setShowLinks(10);
} else if (window.innerWidth > 1500) {
setShowLinks(8); setShowLinks(8);
} else if (window.innerWidth > 1280) { } else if (window.innerWidth > 880) {
setShowLinks(6); setShowLinks(6);
} else if (window.innerWidth > 650) { } else if (window.innerWidth > 550) {
setShowLinks(4); setShowLinks(4);
} else setShowLinks(3); } else setShowLinks(2);
}; };
const { width } = useWindowDimensions(); const { width } = useWindowDimensions();
@ -120,28 +122,30 @@ export default function Dashboard() {
<ViewDropdown viewMode={viewMode} setViewMode={setViewMode} /> <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-5 border border-neutral-content bg-base-200"> <div>
<DashboardItem <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">
name={numberOfLinks === 1 ? "Link" : "Links"} <DashboardItem
value={numberOfLinks} name={numberOfLinks === 1 ? "Link" : "Links"}
icon={"bi-link-45deg"} value={numberOfLinks}
/> icon={"bi-link-45deg"}
/>
<div className="divider xl:divider-horizontal"></div> <div className="divider xl:divider-horizontal"></div>
<DashboardItem <DashboardItem
name={collections.length === 1 ? "Collection" : "Collections"} name={collections.length === 1 ? "Collection" : "Collections"}
value={collections.length} value={collections.length}
icon={"bi-folder"} icon={"bi-folder"}
/> />
<div className="divider xl:divider-horizontal"></div> <div className="divider xl:divider-horizontal"></div>
<DashboardItem <DashboardItem
name={tags.length === 1 ? "Tag" : "Tags"} name={tags.length === 1 ? "Tag" : "Tags"}
value={tags.length} value={tags.length}
icon={"bi-hash"} icon={"bi-hash"}
/> />
</div>
</div> </div>
<div className="flex justify-between items-center"> <div className="flex justify-between items-center">
@ -162,7 +166,7 @@ export default function Dashboard() {
</div> </div>
<div <div
style={{ flex: "0 1 auto" }} style={{ flex: links[0] ? "0 1 auto" : "1 1 auto" }}
className="flex flex-col 2xl:flex-row items-start 2xl:gap-2" className="flex flex-col 2xl:flex-row items-start 2xl:gap-2"
> >
{links[0] ? ( {links[0] ? (
@ -170,10 +174,7 @@ export default function Dashboard() {
<LinkComponent links={links.slice(0, showLinks)} /> <LinkComponent links={links.slice(0, showLinks)} />
</div> </div>
) : ( ) : (
<div <div className="sky-shadow flex flex-col justify-center h-full border border-solid border-neutral-content w-full mx-auto p-10 rounded-2xl bg-base-200">
style={{ flex: "1 1 auto" }}
className="sky-shadow flex flex-col justify-center h-full border border-solid border-neutral-content w-full mx-auto p-10 rounded-2xl bg-base-200"
>
<p className="text-center text-2xl"> <p className="text-center text-2xl">
View Your Recently Added Links Here! View Your Recently Added Links Here!
</p> </p>
@ -189,8 +190,8 @@ export default function Dashboard() {
}} }}
className="inline-flex items-center gap-2 text-sm btn btn-accent dark:border-violet-400 text-white" className="inline-flex items-center gap-2 text-sm btn btn-accent dark:border-violet-400 text-white"
> >
<i className="bi-plus-lg text-xl duration-100"></i> <i className="bi-plus-lg text-xl"></i>
<span className="group-hover:opacity-0 text-right duration-100"> <span className="group-hover:opacity-0 text-right">
Add New Link Add New Link
</span> </span>
</div> </div>
@ -200,7 +201,7 @@ export default function Dashboard() {
tabIndex={0} tabIndex={0}
role="button" role="button"
onMouseDown={dropdownTriggerer} onMouseDown={dropdownTriggerer}
className="inline-flex items-center gap-2 text-sm btn btn-outline btn-neutral" className="inline-flex items-center gap-2 text-sm btn bg-neutral-content text-secondary-foreground hover:bg-neutral-content/80 border border-neutral/30 hover:border hover:border-neutral/30"
id="import-dropdown" id="import-dropdown"
> >
<i className="bi-cloud-upload text-xl duration-100"></i> <i className="bi-cloud-upload text-xl duration-100"></i>
@ -286,12 +287,13 @@ export default function Dashboard() {
) : ( ) : (
<div <div
style={{ flex: "1 1 auto" }} style={{ flex: "1 1 auto" }}
className="sky-shadow flex flex-col justify-center h-full border border-solid border-neutral-content w-full mx-auto p-10 rounded-2xl bg-base-200" className="flex flex-col gap-2 justify-center h-full border border-solid border-neutral-content w-full mx-auto p-10 rounded-2xl bg-base-200"
> >
<i className="bi-pin mx-auto text-6xl text-primary"></i>
<p className="text-center text-2xl"> <p className="text-center text-2xl">
Pin Your Favorite Links Here! Pin Your Favorite Links Here!
</p> </p>
<p className="text-center mx-auto max-w-96 w-fit text-neutral text-sm mt-2"> <p className="text-center mx-auto max-w-96 w-fit text-neutral text-sm">
You can Pin your favorite Links by clicking on the three dots on You can Pin your favorite Links by clicking on the three dots on
each Link and clicking{" "} each Link and clicking{" "}
<span className="font-semibold">Pin to Dashboard</span>. <span className="font-semibold">Pin to Dashboard</span>.

2
pages/links/index.tsx
View File

@ -154,7 +154,7 @@ export default function Links() {
? bulkDeleteLinks() ? bulkDeleteLinks()
: setBulkDeleteLinksModal(true); : setBulkDeleteLinksModal(true);
}} }}
className="btn btn-sm bg-red-400 border-red-400 hover:border-red-500 hover:bg-red-500 text-white w-fit ml-auto" className="btn btn-sm bg-red-500 hover:bg-red-400 text-white w-fit ml-auto"
disabled={ disabled={
selectedLinks.length === 0 || selectedLinks.length === 0 ||
!( !(

14
pages/links/pinned.tsx
View File

@ -151,7 +151,7 @@ export default function PinnedLinks() {
? bulkDeleteLinks() ? bulkDeleteLinks()
: setBulkDeleteLinksModal(true); : setBulkDeleteLinksModal(true);
}} }}
className="btn btn-sm bg-red-400 border-red-400 hover:border-red-500 hover:bg-red-500 text-white w-fit ml-auto" className="btn btn-sm bg-red-500 hover:bg-red-400 text-white w-fit ml-auto"
disabled={ disabled={
selectedLinks.length === 0 || selectedLinks.length === 0 ||
!( !(
@ -171,12 +171,20 @@ export default function PinnedLinks() {
) : ( ) : (
<div <div
style={{ flex: "1 1 auto" }} style={{ flex: "1 1 auto" }}
className="sky-shadow flex flex-col justify-center h-full border border-solid border-neutral-content w-full mx-auto p-10 rounded-2xl bg-base-200" className="flex flex-col gap-2 justify-center h-full w-full mx-auto p-10"
> >
<svg
xmlns="http://www.w3.org/2000/svg"
className="w-1/4 min-w-[7rem] max-w-[15rem] h-auto mx-auto mb-5 text-primary drop-shadow"
fill="currentColor"
viewBox="0 0 16 16"
>
<path d="M4.146.146A.5.5 0 0 1 4.5 0h7a.5.5 0 0 1 .5.5c0 .68-.342 1.174-.646 1.479-.126.125-.25.224-.354.298v4.431l.078.048c.203.127.476.314.751.555C12.36 7.775 13 8.527 13 9.5a.5.5 0 0 1-.5.5h-4v4.5c0 .276-.224 1.5-.5 1.5s-.5-1.224-.5-1.5V10h-4a.5.5 0 0 1-.5-.5c0-.973.64-1.725 1.17-2.189A6 6 0 0 1 5 6.708V2.277a3 3 0 0 1-.354-.298C4.342 1.674 4 1.179 4 .5a.5.5 0 0 1 .146-.354m1.58 1.408-.002-.001zm-.002-.001.002.001A.5.5 0 0 1 6 2v5a.5.5 0 0 1-.276.447h-.002l-.012.007-.054.03a5 5 0 0 0-.827.58c-.318.278-.585.596-.725.936h7.792c-.14-.34-.407-.658-.725-.936a5 5 0 0 0-.881-.61l-.012-.006h-.002A.5.5 0 0 1 10 7V2a.5.5 0 0 1 .295-.458 1.8 1.8 0 0 0 .351-.271c.08-.08.155-.17.214-.271H5.14q.091.15.214.271a1.8 1.8 0 0 0 .37.282" />
</svg>
<p className="text-center text-2xl"> <p className="text-center text-2xl">
Pin Your Favorite Links Here! Pin Your Favorite Links Here!
</p> </p>
<p className="text-center mx-auto max-w-96 w-fit text-neutral text-sm mt-2"> <p className="text-center mx-auto max-w-96 w-fit text-neutral text-sm">
You can Pin your favorite Links by clicking on the three dots on You can Pin your favorite Links by clicking on the three dots on
each Link and clicking{" "} each Link and clicking{" "}
<span className="font-semibold">Pin to Dashboard</span>. <span className="font-semibold">Pin to Dashboard</span>.

2
pages/search.tsx
View File

@ -178,7 +178,7 @@ export default function Search() {
? bulkDeleteLinks() ? bulkDeleteLinks()
: setBulkDeleteLinksModal(true); : setBulkDeleteLinksModal(true);
}} }}
className="btn btn-sm bg-red-400 border-red-400 hover:border-red-500 hover:bg-red-500 text-white w-fit ml-auto" className="btn btn-sm bg-red-500 hover:bg-red-400 text-white w-fit ml-auto"
disabled={ disabled={
selectedLinks.length === 0 || selectedLinks.length === 0 ||
!( !(

2
pages/tags/[id].tsx
View File

@ -308,7 +308,7 @@ export default function Index() {
? bulkDeleteLinks() ? bulkDeleteLinks()
: setBulkDeleteLinksModal(true); : setBulkDeleteLinksModal(true);
}} }}
className="btn btn-sm bg-red-400 border-red-400 hover:border-red-500 hover:bg-red-500 text-white w-fit ml-auto" className="btn btn-sm bg-red-500 hover:bg-red-400 text-white w-fit ml-auto"
disabled={ disabled={
selectedLinks.length === 0 || selectedLinks.length === 0 ||
!( !(