Ategon/Jamjar
1
0
Fork 0
mirror of https://github.com/Ategon/Jamjar.git synced 2025-02-12 06:16:21 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Add post styles

Browse source
This commit is contained in:
Ategon 2025-01-18 13:47:40 -05:00
parent e5aa7c2a2a
commit 3cc2d95007
3 changed files with 151 additions and 34 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

159
src/components/posts/PostCard.tsx
View file

@ -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>
);

25
src/components/posts/index.tsx
View file

@ -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>

1
src/types/PostStyle.ts Normal file
View file

@ -0,0 +1 @@
export type PostStyle = "cozy" | "compact" | "ultra" | "adaptive";