124 lines
4.3 KiB
TypeScript
124 lines
4.3 KiB
TypeScript
import React, { Dispatch, SetStateAction, useEffect } from "react";
|
|
import useLocalSettingsStore from "@/store/localSettings";
|
|
import { ViewMode } from "@/types/global";
|
|
import { dropdownTriggerer } from "@/lib/client/utils";
|
|
import { useTranslation } from "next-i18next";
|
|
|
|
type Props = {
|
|
viewMode: ViewMode;
|
|
setViewMode: Dispatch<SetStateAction<ViewMode>>;
|
|
};
|
|
|
|
export default function ViewDropdown({ viewMode, setViewMode }: Props) {
|
|
const { settings, updateSettings } = useLocalSettingsStore((state) => state);
|
|
const { t } = useTranslation();
|
|
|
|
const onChangeViewMode = (
|
|
e: React.MouseEvent<HTMLButtonElement>,
|
|
mode: ViewMode
|
|
) => {
|
|
setViewMode(mode);
|
|
};
|
|
|
|
const toggleShowSetting = (setting: keyof typeof settings.show) => {
|
|
const newShowSettings = {
|
|
...settings.show,
|
|
[setting]: !settings.show[setting],
|
|
};
|
|
updateSettings({ show: newShowSettings });
|
|
};
|
|
|
|
useEffect(() => {
|
|
updateSettings({ viewMode });
|
|
}, [viewMode, updateSettings]);
|
|
|
|
return (
|
|
<div className="dropdown dropdown-bottom dropdown-end">
|
|
<div
|
|
tabIndex={0}
|
|
role="button"
|
|
onMouseDown={dropdownTriggerer}
|
|
className="btn btn-sm btn-square btn-ghost border-none"
|
|
>
|
|
{viewMode === ViewMode.Card ? (
|
|
<i className="bi-grid w-4 h-4 text-neutral"></i>
|
|
) : viewMode === ViewMode.Masonry ? (
|
|
<i className="bi-columns-gap w-4 h-4 text-neutral"></i>
|
|
) : (
|
|
<i className="bi-view-stacked w-4 h-4 text-neutral"></i>
|
|
)}
|
|
</div>
|
|
<ul className="dropdown-content z-[30] menu shadow bg-base-200 min-w-52 border border-neutral-content rounded-xl mt-1">
|
|
<p className="mb-1 text-sm text-neutral">{t("view")}</p>
|
|
<div
|
|
className="p-1 flex w-full justify-between gap-1 border border-neutral-content rounded-[0.625rem]"
|
|
tabIndex={0}
|
|
role="button"
|
|
>
|
|
<button
|
|
onClick={(e) => onChangeViewMode(e, ViewMode.Card)}
|
|
className={`btn btn-square btn-sm btn-ghost ${
|
|
viewMode === ViewMode.Card
|
|
? "bg-primary/20 hover:bg-primary/20"
|
|
: "hover:bg-neutral/20"
|
|
}`}
|
|
>
|
|
<i className="bi-grid text-lg text-neutral"></i>
|
|
</button>
|
|
<button
|
|
onClick={(e) => onChangeViewMode(e, ViewMode.Masonry)}
|
|
className={`btn btn-square btn-sm btn-ghost ${
|
|
viewMode === ViewMode.Masonry
|
|
? "bg-primary/20 hover:bg-primary/20"
|
|
: "hover:bg-neutral/20"
|
|
}`}
|
|
>
|
|
<i className="bi-columns-gap text-lg text-neutral"></i>
|
|
</button>
|
|
<button
|
|
onClick={(e) => onChangeViewMode(e, ViewMode.List)}
|
|
className={`btn btn-square btn-sm btn-ghost ${
|
|
viewMode === ViewMode.List
|
|
? "bg-primary/20 hover:bg-primary/20"
|
|
: "hover:bg-neutral/20"
|
|
}`}
|
|
>
|
|
<i className="bi-view-stacked text-lg text-neutral"></i>
|
|
</button>
|
|
</div>
|
|
<p className="my-1 text-sm text-neutral">{t("show")}</p>
|
|
{Object.entries(settings.show)
|
|
.filter((e) =>
|
|
settings.viewMode === ViewMode.List // Hide tags, image, icon, and description checkboxes in list view
|
|
? e[0] !== "tags" &&
|
|
e[0] !== "image" &&
|
|
e[0] !== "icon" &&
|
|
e[0] !== "description"
|
|
: settings.viewMode === ViewMode.Card // Hide tags and description checkboxes in card view
|
|
? e[0] !== "tags" && e[0] !== "description"
|
|
: true
|
|
)
|
|
.map(([key, value]) => (
|
|
<li key={key}>
|
|
<label
|
|
className="label cursor-pointer flex justify-start"
|
|
tabIndex={0}
|
|
role="button"
|
|
>
|
|
<input
|
|
type="checkbox"
|
|
className="checkbox checkbox-primary"
|
|
checked={value}
|
|
onChange={() =>
|
|
toggleShowSetting(key as keyof typeof settings.show)
|
|
}
|
|
/>
|
|
<span className="label-text whitespace-nowrap">{t(key)}</span>
|
|
</label>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
);
|
|
}
|