DisplayAsSelector.tsx
This commit is contained in:
parent
6d1d1bfc44
commit
1330db056a
29
packages/app/src/Element/Feed/DisplayAsSelector.tsx
Normal file
29
packages/app/src/Element/Feed/DisplayAsSelector.tsx
Normal 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>
|
||||
);
|
||||
};
|
@ -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;
|
||||
|
@ -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;
|
||||
|
@ -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>
|
||||
);
|
||||
};
|
||||
|
Loading…
Reference in New Issue
Block a user