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

Add new collection drop down

This commit is contained in:
Isaac Wise 2024-08-22 17:09:14 -05:00
parent accbd4cbfa
commit 9fe829771d
1 changed files with 32 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
pages/collections/index.tsx
View File

@ -10,6 +10,7 @@ import PageHeader from "@/components/PageHeader";
import getServerSideProps from "@/lib/client/getServerSideProps"; import getServerSideProps from "@/lib/client/getServerSideProps";
import { useTranslation } from "next-i18next"; import { useTranslation } from "next-i18next";
import { useCollections } from "@/hooks/store/collections"; import { useCollections } from "@/hooks/store/collections";
import { dropdownTriggerer } from "@/lib/client/utils";
export default function Collections() { export default function Collections() {
const { t } = useTranslation(); const { t } = useTranslation();
@ -29,12 +30,37 @@ export default function Collections() {
<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">
<div className="flex justify-between"> <div className="flex justify-between">
<PageHeader <div className="flex items-center gap-3">
icon={"bi-folder"} <PageHeader
title={t("collections")} icon={"bi-folder"}
description={t("collections_you_own")} title={t("collections")}
/> description={t("collections_you_own")}
/>
<div className="relative">
<div className={"dropdown dropdown-bottom font-normal"}>
<div
tabIndex={0}
role="button"
onMouseDown={dropdownTriggerer}
className="btn btn-ghost btn-sm btn-square text-neutral"
>
<i className={"bi-three-dots text-neutral text-2xl"}></i>
</div>
<ul className="dropdown-content z-[30] menu shadow bg-base-200 border border-neutral-content rounded-box mt-1">
<li>
<div
role="button"
tabIndex={0}
onClick={() => setNewCollectionModal(true)}
className="whitespace-nowrap"
>
{t("new_collection")}
</div>
</li>
</ul>
</div>
</div>
</div>
<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} t={t} /> <SortDropdown sortBy={sortBy} setSort={setSortBy} t={t} />