Skip to content

Commit

Permalink
Merge branch 'preview'
Browse files Browse the repository at this point in the history
  • Loading branch information
@pdelfan
pdelfan committed Nov 28, 2024
2 parents b03a928 + e378f23 commit 99af00d
Show file tree
Hide file tree
Showing 3 changed files with 97 additions and 113 deletions.
129 changes: 59 additions & 70 deletions src/components/contentDisplay/feedHeader/FeedHeader.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -106,78 +106,67 @@ export default function FeedHeader(props: Props) {
}
};

if (isFetchingFeedInfo || !feedInfo) return <FeedHeaderSkeleton />;

return (
<>
{isFetchingFeedInfo && <FeedHeaderSkeleton />}
{!isFetchingFeedInfo && feedInfo && (
<>
<article className="border-skin-base flex flex-col gap-2 border border-x-0 border-t-0 p-3 md:rounded-t-2xl md:border">
<div className="flex flex-wrap items-center justify-between gap-3">
<div className="flex flex-wrap items-center gap-3">
<Image
src={feedInfo.view.avatar ?? FallbackFeed}
alt={feedInfo.view.displayName}
width={60}
height={60}
className={`rounded-lg ${!feedInfo.view.avatar && "border-skin-base bg-skin-muted border"}`}
/>
<div className="flex flex-col">
<h2 className="text-skin-base break-words text-xl font-semibold">
{feedInfo.view.displayName}
</h2>
<h3 className="text-skin-secondary break-all">
By{" "}
<Link
href={`/dashboard/user/${feedInfo.view.creator.handle}`}
className="hover:text-skin-tertiary font-medium"
>
@{feedInfo.view.creator.handle}
</Link>
</h3>
</div>
</div>
{isSaved !== null && isPinned !== null && (
<div className="flex flex-wrap gap-3">
<Button onClick={toggleSave}>
{isSaved && (
<BiSolidTrash className="text-status-danger text-lg" />
)}
{!isSaved && (
<BiPlus className="text-skin-icon-base text-lg" />
)}
</Button>
<Button onClick={togglePin}>
<BiSolidBookmarkAlt
className={`text-lg ${
isPinned
? "text-status-success"
: "text-skin-icon-muted"
}`}
/>
</Button>
<Button onClick={toggleLike}>
{likeUri && (
<BiSolidHeart className="text-skin-icon-like text-lg" />
)}
{!likeUri && (
<BiHeart className="text-skin-icon-muted text-lg" />
)}
</Button>
</div>
<article className="border-skin-base flex flex-col gap-2 border border-x-0 border-t-0 p-3 md:rounded-t-2xl md:border">
<div className="flex flex-wrap items-center justify-between gap-3">
<div className="flex flex-wrap items-center gap-3">
<Image
src={feedInfo.view.avatar ?? FallbackFeed}
alt={feedInfo.view.displayName}
width={60}
height={60}
className={`rounded-lg ${!feedInfo.view.avatar && "border-skin-base bg-skin-muted border"}`}
/>
<div className="flex flex-col">
<h2 className="text-skin-base break-words text-xl font-semibold">
{feedInfo.view.displayName}
</h2>
<h3 className="text-skin-secondary break-all">
By{" "}
<Link
href={`/dashboard/user/${feedInfo.view.creator.handle}`}
className="hover:text-skin-tertiary font-medium"
>
@{feedInfo.view.creator.handle}
</Link>
</h3>
</div>
</div>
{isSaved !== null && isPinned !== null && (
<div className="flex flex-wrap gap-3">
<Button onClick={toggleSave}>
{isSaved && (
<BiSolidTrash className="text-status-danger text-lg" />
)}
{!isSaved && <BiPlus className="text-skin-icon-base text-lg" />}
</Button>
<Button onClick={togglePin}>
<BiSolidBookmarkAlt
className={`text-lg ${
isPinned ? "text-status-success" : "text-skin-icon-muted"
}`}
/>
</Button>
<Button onClick={toggleLike}>
{likeUri && (
<BiSolidHeart className="text-skin-icon-like text-lg" />
)}
</div>
{feedInfo.view.description && (
<p className="text-skin-base break-words" dir="auto">
{feedInfo.view.description}
</p>
)}
<small className="text-skin-secondary flex items-center gap-1 font-medium">
<BiSolidHeart className="text-skin-icon-base" />
<span>{feedInfo.view.likeCount}</span>
</small>
</article>
</>
{!likeUri && <BiHeart className="text-skin-icon-muted text-lg" />}
</Button>
</div>
)}
</div>
{feedInfo.view.description && (
<p className="text-skin-base break-words" dir="auto">
{feedInfo.view.description}
</p>
)}
</>
<small className="text-skin-secondary flex items-center gap-1 font-medium">
<BiSolidHeart className="text-skin-icon-base" />
<span>{feedInfo.view.likeCount}</span>
</small>
</article>
);
}
71 changes: 33 additions & 38 deletions src/components/contentDisplay/listHeader/ListHeader.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,45 +20,40 @@ export default function FeedHeader(props: Props) {
listInfoError,
} = useListInfo(list);

if (isFetchingListInfo || !listInfo) return <ListHeaderSkeleton />;

return (
<>
{isFetchingListInfo && <ListHeaderSkeleton />}
{!isFetchingListInfo && listInfo && (
<>
<article className="border-skin-base flex flex-col gap-2 border border-x-0 border-y-0 p-3 md:rounded-t-2xl md:border md:border-b-0">
<div className="flex flex-wrap items-center justify-between gap-3">
<div className="flex flex-wrap items-center gap-3">
<Image
src={listInfo.list.avatar ?? FallbackList}
alt={listInfo.list.name}
width={60}
height={60}
className={`rounded-lg ${!listInfo.list.avatar && "border-skin-base bg-skin-muted border"}`}
/>
<div className="flex flex-col">
<h2 className="text-skin-base break-words text-xl font-semibold">
{listInfo.list.name}
</h2>
<h3 className="text-skin-secondary break-all">
By{" "}
<Link
href={`/dashboard/user/${listInfo.list.creator.handle}`}
className="hover:text-skin-tertiary font-medium"
>
@{listInfo.list.creator.handle}
</Link>
</h3>
</div>
</div>
</div>
{listInfo.list.description && (
<p className="text-skin-base break-words" dir="auto">
{listInfo.list.description}
</p>
)}
</article>
</>
<article className="border-skin-base flex flex-col gap-2 border border-x-0 border-y-0 p-3 md:rounded-t-2xl md:border md:border-b-0">
<div className="flex flex-wrap items-center justify-between gap-3">
<div className="flex flex-wrap items-center gap-3">
<Image
src={listInfo.list.avatar ?? FallbackList}
alt={listInfo.list.name}
width={60}
height={60}
className={`rounded-lg ${!listInfo.list.avatar && "border-skin-base bg-skin-muted border"}`}
/>
<div className="flex flex-col">
<h2 className="text-skin-base break-words text-xl font-semibold">
{listInfo.list.name}
</h2>
<h3 className="text-skin-secondary break-all">
By{" "}
<Link
href={`/dashboard/user/${listInfo.list.creator.handle}`}
className="hover:text-skin-tertiary font-medium"
>
@{listInfo.list.creator.handle}
</Link>
</h3>
</div>
</div>
</div>
{listInfo.list.description && (
<p className="text-skin-base break-words" dir="auto">
{listInfo.list.description}
</p>
)}
</>
</article>
);
}
10 changes: 5 additions & 5 deletions src/containers/atmosphere/AtmosphereContainer.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,13 +39,13 @@ export default function AtmosphereContainer(props: Props) {
const frontpageRecords = await getATRecords(
did,
"fyi.unravel.frontpage.post",
agent
agent,
);
const linkatRecords = await getATRecords(did, "blue.linkat.board", agent);
const whtwndRecords = await getATRecords(
did,
"com.whtwnd.blog.entry",
agent
agent,
);

return [
Expand Down Expand Up @@ -87,7 +87,7 @@ export default function AtmosphereContainer(props: Props) {
}
return acc;
},
{} as Record<string, any[]>
{} as Record<string, any[]>,
);

const renderContainer = () => {
Expand Down Expand Up @@ -123,10 +123,10 @@ export default function AtmosphereContainer(props: Props) {

return (
<section>
<div className="sticky top-12 md:top-0 p-3 bg-skin-base border-skin-base md:border-x border-b">
<div className="sticky top-12 md:top-0 bg-skin-base border-skin-base md:border-x border-b">
{hasCollection && (
<ScrollArea.Root role="tablist">
<div className="flex flex-nowrap items-center gap-2 overflow-x-auto">
<div className="flex flex-nowrap items-center gap-2 overflow-x-auto p-3">
{collections.map((c) => (
<>
{c.records.length !== 0 && (
Expand Down

0 comments on commit 99af00d

Please sign in to comment.