code dump frontend
This commit is contained in:
@ -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;
|
||||
}
|
@ -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>
|
||||
);
|
||||
};
|
46
frontend/islands/ProjectCard.tsx
Normal file
46
frontend/islands/ProjectCard.tsx
Normal 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;
|
||||
};
|
Reference in New Issue
Block a user