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

Moved answer card to its own component

parent ae335374
No related branches found
No related tags found
1 merge request!8create "Basic components"
import { Post } from "@/types/post"
import { FC, PropsWithChildren } from "react"
import { Bars3Icon, HeartIcon, ChatBubbleLeftIcon } from '@heroicons/react/24/outline'
import LikeStack from "./LikeStack"
import Comment from "../comments/Comment"
type AnswerCardProps = {
post: Post;
commentLimit: number;
}
const AnswerCard: FC<PropsWithChildren<AnswerCardProps>> = ({
post,
commentLimit
}) => {
return (
<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">
<p className="text-xs text-gray-500 hover:text-c-pink">View all 3 comments</p>
<Comment Comment={{Data: "asdfg", User: post.User}} />
</div>
</div>
)
}
export default AnswerCard
\ No newline at end of file
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