Merge branch 'dev' into bootstrap-icons

This commit is contained in:
Daniel
2023-12-17 10:00:44 +03:30
committed by GitHub
22 changed files with 936 additions and 473 deletions
+24 -7
View File
@@ -1,4 +1,4 @@
import LinkCard from "@/components/LinkCard";
import LinkCard from "@/components/LinkViews/LinkComponents/LinkCard";
import NoLinksFound from "@/components/NoLinksFound";
import SortDropdown from "@/components/SortDropdown";
import useLinks from "@/hooks/useLinks";
@@ -7,14 +7,35 @@ import useLinkStore from "@/store/links";
import { Sort } from "@/types/global";
import React, { useState } from "react";
import PageHeader from "@/components/PageHeader";
import { Sort, ViewMode } from "@/types/global";
import { faLink } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { useState } from "react";
import ViewDropdown from "@/components/ViewDropdown";
import DefaultView from "@/components/LinkViews/DefaultView";
import GridView from "@/components/LinkViews/GridView";
import ListView from "@/components/LinkViews/ListView";
export default function Links() {
const { links } = useLinkStore();
const [viewMode, setViewMode] = useState<string>(
localStorage.getItem("viewMode") || ViewMode.Default
);
const [sortBy, setSortBy] = useState<Sort>(Sort.DateNewestFirst);
useLinks({ sort: sortBy });
const linkView = {
[ViewMode.Default]: DefaultView,
// [ViewMode.Grid]: GridView,
[ViewMode.List]: ListView,
};
// @ts-ignore
const LinkComponent = linkView[viewMode];
return (
<MainLayout>
<div className="p-5 flex flex-col gap-5 w-full h-full">
@@ -23,19 +44,15 @@ export default function Links() {
title={"All Links"}
description={"Links from every Collections"}
/>
<div className="flex gap-3 justify-end">
<div className="relative mt-2">
<SortDropdown sortBy={sortBy} setSort={setSortBy} />
<ViewDropdown viewMode={viewMode} setViewMode={setViewMode} />
</div>
</div>
{links[0] ? (
<div className="grid 2xl:grid-cols-3 xl:grid-cols-2 grid-cols-1 gap-5">
{links.map((e, i) => {
return <LinkCard key={i} link={e} count={i} />;
})}
</div>
<LinkComponent links={links} />
) : (
<NoLinksFound text="You Haven't Created Any Links Yet" />
)}
+23 -6
View File
@@ -1,4 +1,4 @@
import LinkCard from "@/components/LinkCard";
import LinkCard from "@/components/LinkViews/LinkComponents/LinkCard";
import SortDropdown from "@/components/SortDropdown";
import useLinks from "@/hooks/useLinks";
import MainLayout from "@/layouts/MainLayout";
@@ -6,14 +6,34 @@ import useLinkStore from "@/store/links";
import { Sort } from "@/types/global";
import React, { useState } from "react";
import PageHeader from "@/components/PageHeader";
import { Sort, ViewMode } from "@/types/global";
import { faThumbTack } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { useState } from "react";
import ViewDropdown from "@/components/ViewDropdown";
import DefaultView from "@/components/LinkViews/DefaultView";
import GridView from "@/components/LinkViews/GridView";
import ListView from "@/components/LinkViews/ListView";
export default function PinnedLinks() {
const { links } = useLinkStore();
const [viewMode, setViewMode] = useState<string>(
localStorage.getItem("viewMode") || ViewMode.Default
);
const [sortBy, setSortBy] = useState<Sort>(Sort.DateNewestFirst);
useLinks({ sort: sortBy, pinnedOnly: true });
const linkView = {
[ViewMode.Default]: DefaultView,
// [ViewMode.Grid]: GridView,
[ViewMode.List]: ListView,
};
// @ts-ignore
const LinkComponent = linkView[viewMode];
return (
<MainLayout>
<div className="p-5 flex flex-col gap-5 w-full h-full">
@@ -25,14 +45,11 @@ export default function PinnedLinks() {
<div className="flex gap-3 justify-end">
<div className="relative mt-2">
<SortDropdown sortBy={sortBy} setSort={setSortBy} />
<ViewDropdown viewMode={viewMode} setViewMode={setViewMode} />
</div>
</div>
{links.some((e) => e.pinnedBy && e.pinnedBy[0]) ? (
<div className="grid 2xl:grid-cols-3 xl:grid-cols-2 grid-cols-1 gap-5">
{links.map((e, i) => {
return <LinkCard key={i} link={e} count={i} />;
})}
</div>
<LinkComponent links={links} />
) : (
<div
style={{ flex: "1 1 auto" }}