From 3cc2d950070abe99fb6b0136d2b65fe39aceca01 Mon Sep 17 00:00:00 2001
From: Ategon <benjamin@barbeau.net>
Date: Sat, 18 Jan 2025 13:47:40 -0500
Subject: [PATCH] Add post styles
---
src/components/posts/PostCard.tsx | 159 ++++++++++++++++++++++++------
src/components/posts/index.tsx | 25 ++++-
src/types/PostStyle.ts | 1 +
3 files changed, 151 insertions(+), 34 deletions(-)
create mode 100644 src/types/PostStyle.ts
diff --git a/src/components/posts/PostCard.tsx b/src/components/posts/PostCard.tsx
index c1786b9..1677489 100644
--- a/src/components/posts/PostCard.tsx
+++ b/src/components/posts/PostCard.tsx
@@ -4,45 +4,144 @@ import Link from "next/link";
import { PostType } from "@/types/PostType";
import { MessageCircle } from "lucide-react";
import LikeButton from "./LikeButton";
+import { PostStyle } from "@/types/PostStyle";
-export default function PostCard({ post }: { post: PostType }) {
+export default function PostCard({
+ post,
+ style,
+}: {
+ post: PostType;
+ style: PostStyle;
+}) {
return (
<Card className="bg-opacity-60">
<CardBody className="p-5">
- <p className="text-2xl">{post.title}</p>
+ {style == "cozy" && (
+ <div>
+ <p className="text-2xl">{post.title}</p>
- <div className="flex items-center gap-3 text-xs text-default-500 pt-1">
- <p>By</p>
- <Link
- href={`/u/${post.author.slug}`}
- className="flex items-center gap-2"
- >
- <Avatar
- size="sm"
- className="w-6 h-6"
- src={post.author.profilePicture}
- />
- <p>{post.author.name}</p>
- </Link>
- <p>
- {formatDistance(new Date(post.createdAt), new Date(), {
- addSuffix: true,
- })}
- </p>
- </div>
+ <div className="flex items-center gap-3 text-xs text-default-500 pt-1">
+ <p>By</p>
+ <Link
+ href={`/u/${post.author.slug}`}
+ className="flex items-center gap-2"
+ >
+ <Avatar
+ size="sm"
+ className="w-6 h-6"
+ src={post.author.profilePicture}
+ />
+ <p>{post.author.name}</p>
+ </Link>
+ <p>
+ {formatDistance(new Date(post.createdAt), new Date(), {
+ addSuffix: true,
+ })}
+ </p>
+ </div>
- <Spacer y={4} />
+ <Spacer y={4} />
- <p>{post.content}</p>
+ <p>{post.content}</p>
- <Spacer y={4} />
+ <Spacer y={4} />
- <div className="flex gap-3">
- <LikeButton post={post} />
- <Button size="sm" variant="bordered">
- <MessageCircle size={16} /> {0}
- </Button>
- </div>
+ <div className="flex gap-3">
+ <LikeButton post={post} />
+ <Button size="sm" variant="bordered">
+ <MessageCircle size={16} /> {0}
+ </Button>
+ </div>
+ </div>
+ )}
+ {style == "compact" && (
+ <div>
+ <p className="text-2xl">{post.title}</p>
+
+ <div className="flex items-center gap-3 text-xs text-default-500 pt-1">
+ <p>By</p>
+ <Link
+ href={`/u/${post.author.slug}`}
+ className="flex items-center gap-2"
+ >
+ <Avatar
+ size="sm"
+ className="w-6 h-6"
+ src={post.author.profilePicture}
+ />
+ <p>{post.author.name}</p>
+ </Link>
+ <p>
+ {formatDistance(new Date(post.createdAt), new Date(), {
+ addSuffix: true,
+ })}
+ </p>
+ </div>
+ </div>
+ )}
+ {style == "ultra" && (
+ <div className="flex items-center gap-4">
+ <p>{post.title}</p>
+
+ <div className="flex items-center gap-3 text-xs text-default-500 pt-1">
+ <p>By</p>
+ <Link
+ href={`/u/${post.author.slug}`}
+ className="flex items-center gap-2"
+ >
+ <Avatar
+ size="sm"
+ className="w-6 h-6"
+ src={post.author.profilePicture}
+ />
+ <p>{post.author.name}</p>
+ </Link>
+ <p>
+ {formatDistance(new Date(post.createdAt), new Date(), {
+ addSuffix: true,
+ })}
+ </p>
+ </div>
+ </div>
+ )}
+ {style == "adaptive" && (
+ <div>
+ <p className="text-2xl">{post.title}</p>
+
+ <div className="flex items-center gap-3 text-xs text-default-500 pt-1">
+ <p>By</p>
+ <Link
+ href={`/u/${post.author.slug}`}
+ className="flex items-center gap-2"
+ >
+ <Avatar
+ size="sm"
+ className="w-6 h-6"
+ src={post.author.profilePicture}
+ />
+ <p>{post.author.name}</p>
+ </Link>
+ <p>
+ {formatDistance(new Date(post.createdAt), new Date(), {
+ addSuffix: true,
+ })}
+ </p>
+ </div>
+
+ <Spacer y={4} />
+
+ <p>{post.content}</p>
+
+ <Spacer y={4} />
+
+ <div className="flex gap-3">
+ <LikeButton post={post} />
+ <Button size="sm" variant="bordered">
+ <MessageCircle size={16} /> {0}
+ </Button>
+ </div>
+ </div>
+ )}
</CardBody>
</Card>
);
diff --git a/src/components/posts/index.tsx b/src/components/posts/index.tsx
index be038ee..232fb38 100644
--- a/src/components/posts/index.tsx
+++ b/src/components/posts/index.tsx
@@ -11,10 +11,12 @@ import {
DropdownTrigger,
} from "@nextui-org/react";
import { PostSort } from "@/types/PostSort";
+import { PostStyle } from "@/types/PostStyle";
export default function Posts() {
const [posts, setPosts] = useState<PostType[]>();
const [sort, setSort] = useState<PostSort>("newest");
+ const [style, setStyle] = useState<PostStyle>("cozy");
useEffect(() => {
const fetchPosts = async () => {
@@ -55,16 +57,31 @@ export default function Posts() {
</Button>
</div>
<div>
- <Button size="sm" className="text-xs" variant="faded">
- Cozy
- </Button>
+ <Dropdown>
+ <DropdownTrigger>
+ <Button size="sm" className="text-xs" variant="faded">
+ {style.charAt(0).toUpperCase() + style.slice(1)}
+ </Button>
+ </DropdownTrigger>
+ <DropdownMenu
+ onAction={(key) => {
+ setStyle(key as PostStyle);
+ }}
+ className="text-black"
+ >
+ <DropdownItem key="cozy">Cozy</DropdownItem>
+ <DropdownItem key="compact">Compact</DropdownItem>
+ <DropdownItem key="ultra">Ultra Compact</DropdownItem>
+ <DropdownItem key="adaptive">Adaptive</DropdownItem>
+ </DropdownMenu>
+ </Dropdown>
</div>
</div>
<div className="flex flex-col gap-3 p-4">
{posts &&
posts.map((post) => (
<div key={post.id}>
- <PostCard post={post} />
+ <PostCard post={post} style={style} />
</div>
))}
</div>
diff --git a/src/types/PostStyle.ts b/src/types/PostStyle.ts
new file mode 100644
index 0000000..a020d78
--- /dev/null
+++ b/src/types/PostStyle.ts
@@ -0,0 +1 @@
+export type PostStyle = "cozy" | "compact" | "ultra" | "adaptive";