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 useModeration from "@/Hooks/useModeration";
|
||||||
import { LiveStreams } from "@/Element/LiveStreams";
|
import { LiveStreams } from "@/Element/LiveStreams";
|
||||||
import { unixNow } from "@snort/shared";
|
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 {
|
export interface TimelineProps {
|
||||||
postsOnly: boolean;
|
postsOnly: boolean;
|
||||||
|
@ -12,7 +12,8 @@ import { LiveStreams } from "@/Element/LiveStreams";
|
|||||||
import useLogin from "@/Hooks/useLogin";
|
import useLogin from "@/Hooks/useLogin";
|
||||||
import useHashtagsFeed from "@/Feed/HashtagsFeed";
|
import useHashtagsFeed from "@/Feed/HashtagsFeed";
|
||||||
import { ShowMoreInView } from "@/Element/Event/ShowMore";
|
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 {
|
export interface TimelineFollowsProps {
|
||||||
postsOnly: boolean;
|
postsOnly: boolean;
|
||||||
|
@ -8,8 +8,7 @@ import { TimelineFragment } from "@/Element/Feed/TimelineFragment";
|
|||||||
import { transformTextCached } from "@/Hooks/useTextTransformCache";
|
import { transformTextCached } from "@/Hooks/useTextTransformCache";
|
||||||
import useImgProxy from "@/Hooks/useImgProxy";
|
import useImgProxy from "@/Hooks/useImgProxy";
|
||||||
import { useNavigate } from "react-router-dom";
|
import { useNavigate } from "react-router-dom";
|
||||||
|
import { DisplayAs } from "@/Element/Feed/DisplayAsSelector";
|
||||||
export type DisplayAs = "grid" | "feed";
|
|
||||||
|
|
||||||
export interface TimelineRendererProps {
|
export interface TimelineRendererProps {
|
||||||
frags: Array<TimelineFragment>;
|
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