This commit is contained in:
parent
5b992ed3ab
commit
fd914ff952
@ -1,6 +1,7 @@
|
|||||||
import Icon from "@/Icons/Icon";
|
import Icon from "@/Icons/Icon";
|
||||||
import { LoginStore } from "@/Login";
|
import { LoginStore } from "@/Login";
|
||||||
import useLogin from "@/Hooks/useLogin";
|
import useLogin from "@/Hooks/useLogin";
|
||||||
|
import { useCallback } from "react";
|
||||||
|
|
||||||
export type DisplayAs = "list" | "grid";
|
export type DisplayAs = "list" | "grid";
|
||||||
|
|
||||||
@ -13,29 +14,32 @@ type DisplaySelectorProps = {
|
|||||||
export const DisplayAsSelector = ({ activeSelection, onSelect, show }: DisplaySelectorProps) => {
|
export const DisplayAsSelector = ({ activeSelection, onSelect, show }: DisplaySelectorProps) => {
|
||||||
const state = useLogin();
|
const state = useLogin();
|
||||||
|
|
||||||
const myOnSelect = (display: DisplayAs) => {
|
const getClasses = (displayType: DisplayAs) => {
|
||||||
onSelect(display);
|
const baseClasses = "border-highlight cursor-pointer flex justify-center flex-1 p-3";
|
||||||
state.feedDisplayAs = display;
|
return activeSelection === displayType
|
||||||
LoginStore.updateSession(state);
|
? `${baseClasses} border-b border-1`
|
||||||
|
: `${baseClasses} hover:bg-nearly-bg-color text-secondary`;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const myOnSelect = useCallback(
|
||||||
|
(display: DisplayAs) => {
|
||||||
|
onSelect(display);
|
||||||
|
const updatedState = { ...state, feedDisplayAs: display };
|
||||||
|
LoginStore.updateSession(updatedState);
|
||||||
|
},
|
||||||
|
[onSelect, state],
|
||||||
|
);
|
||||||
|
|
||||||
if (show === false) return null;
|
if (show === false) return null;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="flex mb-px md:mb-1">
|
<div className="flex mb-px md:mb-1">
|
||||||
<div
|
<div className={getClasses("list")} onClick={() => myOnSelect("list")}>
|
||||||
className={`cursor-pointer flex justify-center flex-1 p-3 ${
|
|
||||||
activeSelection === "list" ? "border-b border-1" : "hover:bg-nearly-bg-color text-secondary"
|
|
||||||
}`}
|
|
||||||
onClick={() => myOnSelect("list")}>
|
|
||||||
<span className="rotate-90">
|
<span className="rotate-90">
|
||||||
<Icon name="deck" />
|
<Icon name="deck" />
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div className={getClasses("grid")} onClick={() => myOnSelect("grid")}>
|
||||||
className={`cursor-pointer flex justify-center flex-1 p-3 ${
|
|
||||||
activeSelection === "grid" ? "border-b border-1" : "hover:bg-nearly-bg-color text-secondary"
|
|
||||||
}`}
|
|
||||||
onClick={() => myOnSelect("grid")}>
|
|
||||||
<Icon name="media" />
|
<Icon name="media" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
Loading…
Reference in New Issue
Block a user