Skip to content
Snippets Groups Projects
Code owners
Assign users and groups as approvers for specific file changes. Learn more.
Comment.tsx 1.00 KiB
import { Comment } from '@/types/comment';
import { HeartIcon } from '@heroicons/react/24/outline';
import { FC, PropsWithChildren } from 'react';

type CommentProps = {
  Comment: Comment;
};

const Comment: FC<PropsWithChildren<CommentProps>> = ({ Comment }) => {
  return (
    <div className="w-full flex items-center justify-between p-2">
      <div className="flex flex-1">
        <div className="flex h-8 w-8 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-8 w-8 rounded-full" src={Comment.User.profile} alt="" />
        </div>
        <div>
          <p className="text-xs font-bold">{Comment.User.username}</p>
          <p className="text-sm">This is my comment</p>
          <p className="text-xs text-gray-500">1 like</p>
        </div>
      </div>

      <HeartIcon className="block h-3 w-3" aria-hidden="true" />
    </div>
  );
};

export default Comment;