Kieran/snort
5
14
Fork 14
Code Issues 54 Pull Requests 1 Packages Projects Releases 24 Wiki Activity

DisplayAsSelector.tsx

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
packages/app/src/Element/Feed/DisplayAsSelector.tsx Normal file
View File

@ -0,0 +1,29 @@
import { FormattedMessage } from "react-intl";
export type DisplayAs = "grid" | "feed";
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>
);
};

3
packages/app/src/Element/Feed/Timeline.tsx
View File

@ -8,7 +8,8 @@ import useTimelineFeed, { TimelineFeed, TimelineSubject } from "@/Feed/TimelineF
import useModeration from "@/Hooks/useModeration";
import { LiveStreams } from "@/Element/LiveStreams";
import { unixNow } from "@snort/shared";
import { DisplayAs, DisplayAsSelector, TimelineRenderer } from "@/Element/Feed/TimelineRenderer";
import { TimelineRenderer } from "@/Element/Feed/TimelineRenderer";
import { DisplayAs, DisplayAsSelector } from "@/Element/Feed/DisplayAsSelector";
export interface TimelineProps {
postsOnly: boolean;

3
packages/app/src/Element/Feed/TimelineFollows.tsx
View File

@ -12,7 +12,8 @@ import { LiveStreams } from "@/Element/LiveStreams";
import useLogin from "@/Hooks/useLogin";
import useHashtagsFeed from "@/Feed/HashtagsFeed";
import { ShowMoreInView } from "@/Element/Event/ShowMore";
import { DisplayAs, DisplayAsSelector, TimelineRenderer } from "@/Element/Feed/TimelineRenderer";
import { TimelineRenderer } from "@/Element/Feed/TimelineRenderer";
import { DisplayAs, DisplayAsSelector } from "@/Element/Feed/DisplayAsSelector";
export interface TimelineFollowsProps {
postsOnly: boolean;

29
packages/app/src/Element/Feed/TimelineRenderer.tsx
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>
);
};