Kieran/snort
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add feed / grid selector to feeds

Browse Source
This commit is contained in:
Martti Malmi
2023-11-28 21:41:53 +02:00
parent c4273b9bdf
commit ef4667c879
7 changed files with 66 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
packages/app/src/Element/Feed/TimelineRenderer.tsx
View File

@ -2,12 +2,14 @@ import { useInView } from "react-intersection-observer";
import ProfileImage from "@/Element/User/ProfileImage";
import { FormattedMessage } from "react-intl";
import Icon from "@/Icons/Icon";
import {TaggedNostrEvent} from "@snort/system";
import { TaggedNostrEvent } from "@snort/system";
import { ReactNode } from "react";
import { TimelineFragment } from "@/Element/Feed/TimelineFragment";
import {transformTextCached} from "@/Hooks/useTextTransformCache";
import { transformTextCached } from "@/Hooks/useTextTransformCache";
import useImgProxy from "@/Hooks/useImgProxy";
export type DisplayAs = "grid" | "feed";
export interface TimelineRendererProps {
frags: Array<TimelineFragment>;
related: Array<TaggedNostrEvent>;
@ -19,7 +21,7 @@ export interface TimelineRendererProps {
noteRenderer?: (ev: TaggedNostrEvent) => ReactNode;
noteOnClick?: (ev: TaggedNostrEvent) => void;
noteContext?: (ev: TaggedNostrEvent) => ReactNode;
displayAs?: "grid" | "feed";
displayAs?: DisplayAs;
}
export function TimelineRenderer(props: TimelineRendererProps) {
@ -49,17 +51,14 @@ export function TimelineRenderer(props: TimelineRendererProps) {
className="aspect-square bg-center bg-cover cursor-pointer"
key={e.id}
style={{ backgroundImage: `url(${proxy(images[0].content)})` }}
onClick={() => props.noteOnClick?.(e)}
></div>
onClick={() => props.noteOnClick?.(e)}></div>
);
};
const noteRenderer = props.noteRenderer || noteImageRenderer;
return props.frags.map(frag => (
<div className="grid grid-cols-3 gap-1 p-1">
{frag.events.map(event => noteRenderer(event))}
</div>
<div className="grid grid-cols-3 gap-1 p-1">{frag.events.map(event => noteRenderer(event))}</div>
));
};
@ -99,3 +98,29 @@ 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>
);
};