Skip to content
Snippets Groups Projects
Commit 84048a66 authored by Matt Kirby's avatar Matt Kirby
Browse files

Move answer out of Post component

parent afa039b5
No related branches found
No related tags found
1 merge request!8create "Basic components"
import { Post } from "@/types/post"
import { Bars3Icon, HeartIcon, ChatBubbleLeftIcon } from '@heroicons/react/24/outline'
import Comment from "../comments/Comment"
import { FC, PropsWithChildren } from "react";
import AnswerCard from "./AnswerCard";
import LikeStack from "./LikeStack";
type PostProps = {
......@@ -16,7 +16,7 @@ const Post:FC<PropsWithChildren<PostProps>> = ({
<>
<div className="flex w-full py-4 flex-col">
<div className="flex m-2 items-center">
<div className="flex m-2 items-center bg-white">
<div className="flex h-12 w-12 max-w-xs items-center justify-center rounded-full bg-c-pink text-sm focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-pink-400 mr-2">
<img className="h-12 w-12 rounded-full" src={post.User.Avatar} alt="" />
</div>
......@@ -24,6 +24,9 @@ const Post:FC<PropsWithChildren<PostProps>> = ({
<p className="">{post.User.Name}</p>
<p className="text-sm text-gray-500">{`@${post.User.Username}`}</p>
</div>
<div className="flex flex-col justify-end">
<p className="text-xs text-gray-500">Just now</p>
</div>
</div>
......@@ -31,39 +34,7 @@ const Post:FC<PropsWithChildren<PostProps>> = ({
<div className="m-2 text-sm px-2 font-bold text-c-green">
This is my amazing question of the day?
</div>
<div className="flex-1 rounded-3xl bg-white text-lg shadow-lg overflow-hidden">
<div className="p-4">
<p className="text-sm text-gray-600">{`${post.User.Name}'s answer`}</p>
<div>
This is my super duper answer. My name is Timmy C and I enjoy smooth jazz.
</div>
<div className="mt-2 flex ">
<div className="flex-1">
<button
type="button"
className="ml-auto mr-2 flex-shrink-0 rounded-full bg-white p-1 text-c-pink hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-c-pink"
>
<span className="sr-only">View notifications</span>
<HeartIcon className="h-6 w-6" aria-hidden="true"/>
</button>
<button
type="button"
className="ml-auto mr-2 flex-shrink-0 rounded-full bg-white p-1 text-c-pink hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-c-pink"
>
<span className="sr-only">View notifications</span>
<ChatBubbleLeftIcon className="h-6 w-6" aria-hidden="true"/>
</button>
</div>
<LikeStack Users={[]} />
</div>
</div>
<div className="border-t bg-gray-50 p-2">
<Comment Comment={{Data: "asdfg", User: post.User}} />
</div>
</div>
<AnswerCard post={post}/>
</div>
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment