DisplayAsSelector.tsx

This commit is contained in:
Martti Malmi
2023-11-28 22:10:35 +02:00
parent 6d1d1bfc44
commit 1330db056a
4 changed files with 34 additions and 30 deletions

View File

@ -8,8 +8,7 @@ import { TimelineFragment } from "@/Element/Feed/TimelineFragment";
import { transformTextCached } from "@/Hooks/useTextTransformCache";
import useImgProxy from "@/Hooks/useImgProxy";
import { useNavigate } from "react-router-dom";
export type DisplayAs = "grid" | "feed";
import { DisplayAs } from "@/Element/Feed/DisplayAsSelector";
export interface TimelineRendererProps {
frags: Array<TimelineFragment>;
@ -107,29 +106,3 @@ export function TimelineRenderer(props: TimelineRendererProps) {
</>
);
}
type DisplaySelectorProps = {
activeSelection: DisplayAs;
onSelect: (display: DisplayAs) => void;
};
export const DisplayAsSelector = ({ activeSelection, onSelect }: DisplaySelectorProps) => {
return (
<div className="flex mb-4">
<div
className={`border-highlight cursor-pointer flex justify-center flex-1 p-3 ${
activeSelection === "feed" ? "border-b border-1" : "hover:bg-nearly-bg-color text-secondary"
}`}
onClick={() => onSelect("feed")}>
<FormattedMessage defaultMessage="Feed" id="eW/Bj9" />
</div>
<div
className={`border-highlight cursor-pointer flex justify-center flex-1 p-3 ${
activeSelection === "grid" ? "border-b border-1" : "hover:bg-nearly-bg-color text-secondary"
}`}
onClick={() => onSelect("grid")}>
<FormattedMessage defaultMessage="Grid" id="HzfrYu" />
</div>
</div>
);
};