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
src
components/posts
PostCard.tsxindex.tsx
types
PostStyle.ts

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

@ -4,45 +4,144 @@ import Link from "next/link";
import { PostType } from "@/types/PostType"; import { PostType } from "@/types/PostType";
import { MessageCircle } from "lucide-react"; import { MessageCircle } from "lucide-react";
import LikeButton from "./LikeButton"; 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 ( return (
<Card className="bg-opacity-60"> <Card className="bg-opacity-60">
<CardBody className="p-5"> <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"> <div className="flex items-center gap-3 text-xs text-default-500 pt-1">
<p>By</p> <p>By</p>
<Link <Link
href={`/u/${post.author.slug}`} href={`/u/${post.author.slug}`}
className="flex items-center gap-2" className="flex items-center gap-2"
> >
<Avatar <Avatar
size="sm" size="sm"
className="w-6 h-6" className="w-6 h-6"
src={post.author.profilePicture} src={post.author.profilePicture}
/> />
<p>{post.author.name}</p> <p>{post.author.name}</p>
</Link> </Link>
<p> <p>
{formatDistance(new Date(post.createdAt), new Date(), { {formatDistance(new Date(post.createdAt), new Date(), {
addSuffix: true, addSuffix: true,
})} })}
</p> </p>
</div> </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"> <div className="flex gap-3">
<LikeButton post={post} /> <LikeButton post={post} />
<Button size="sm" variant="bordered"> <Button size="sm" variant="bordered">
<MessageCircle size={16} /> {0} <MessageCircle size={16} /> {0}
</Button> </Button>
</div> </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> </CardBody>
</Card> </Card>
); );

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

@ -11,10 +11,12 @@ import {
DropdownTrigger, DropdownTrigger,
} from "@nextui-org/react"; } from "@nextui-org/react";
import { PostSort } from "@/types/PostSort"; import { PostSort } from "@/types/PostSort";
import { PostStyle } from "@/types/PostStyle";
export default function Posts() { export default function Posts() {
const [posts, setPosts] = useState<PostType[]>(); const [posts, setPosts] = useState<PostType[]>();
const [sort, setSort] = useState<PostSort>("newest"); const [sort, setSort] = useState<PostSort>("newest");
const [style, setStyle] = useState<PostStyle>("cozy");
useEffect(() => { useEffect(() => {
const fetchPosts = async () => { const fetchPosts = async () => {
@ -55,16 +57,31 @@ export default function Posts() {
</Button> </Button>
</div> </div>
<div> <div>
<Button size="sm" className="text-xs" variant="faded"> <Dropdown>
Cozy <DropdownTrigger>
</Button> <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> </div>
<div className="flex flex-col gap-3 p-4"> <div className="flex flex-col gap-3 p-4">
{posts && {posts &&
posts.map((post) => ( posts.map((post) => (
<div key={post.id}> <div key={post.id}>
<PostCard post={post} /> <PostCard post={post} style={style} />
</div> </div>
))} ))}
</div> </div>

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

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