code dump frontend

This commit is contained in:
2024-12-02 18:29:45 -05:00
parent 44f1f35caa
commit 9e8cf4b147
19 changed files with 681 additions and 184 deletions

View File

@ -1,22 +0,0 @@
import { truncateString } from "../lib/truncate.ts";
export const PostCard = function PostCard({ post }: { post: Post }) {
return (
<div class="p-6 bg-gray-700 rounded-lg shadow-md">
<h2 class="text-grey-900 text-lg font-bold mb-2">{post.title}</h2>
<p>
Written by {post.first_name} {post.last_name} at {post.created_at}
</p>
<p>{truncateString(post.body, 15)}</p>
</div>
);
};
export interface Post {
post_id: number;
first_name: string;
last_name: string;
title: string;
body: string;
created_at: string;
}

View File

@ -1,21 +0,0 @@
import { Post, PostCard } from "./PostCard.tsx";
interface PostOpts {
posts: Post[];
}
export const PostCarousel = function PostCarousel({ posts }: PostOpts) {
return (
<div class="post-carousel">
<div class="h-screen bg-gray-700 flex items-center justify-center">
<div class="flex bg-gray-700 space-x-4">
{posts.map((post: Post, idx: number) => {
if (idx < 3) {
return <PostCard post={post} />;
}
})}
</div>
</div>
</div>
);
};

View File

@ -0,0 +1,46 @@
export const ProjectCard = function ProjectCard(props: ProjectProps) {
return (
<div
class={`group space-y-1 rounded-md ${
props.wip ? "border-2 border-dashed" : "cursor-pointer"
} bg-[#45475a] px-3 py-2 m-10 shadow-md transition-all duration-300 ease-in-out hover:shadow-xl hover:scale-105`}
onClick={() => props.repo && open(props.repo, "_blank")}
>
<div class="flex items-center justify-between">
<h2 class="text-lg text-white font-black uppercase">
<a href={props.repo} target="_blank">
{props.title}
</a>
</h2>
<div class="bg-[#585b70] text-[#a6adc8] text-xs font-bold uppercase px-2.5 py-0.5 rounded-full">
{props.repo && (
<a
class="hover:underline"
href={props.repo}
target="_blank"
onClick={(e) => e.stopPropagation()}
>
Active
</a>
)}
{!props.repo && !props.wip && <span>Dead</span>}
{props.wip && <span>WIP</span>}
</div>
</div>
<p class="whitespace-pre-wrap italic font-light text-lg text-[#a6adc8]">
{props.summary}
</p>
<p class="whitespace-pre-wrap text-sm font-semibold text-[#a6adc8]">
{props.tech}
</p>
</div>
);
};
type ProjectProps = {
title: string;
repo?: string;
summary: string;
tech: string;
wip?: boolean;
};