ig.rizaldy.club/components/Profile.js

49 lines
1.6 KiB
JavaScript
Raw Normal View History

2024-01-31 00:49:51 +07:00
const Profile = ({ profile, totalPosts }) => (
<div className="flex flex-warp">
2024-01-31 02:44:12 +07:00
<div className="lg:w-4/12 w-3/12 md:py-10 ml-3 md:ml-0 lg:px-20 md:px-10">
2024-01-31 00:49:51 +07:00
<img
2024-02-01 02:10:05 +07:00
loading="lazy"
2024-01-31 00:49:51 +07:00
alt={profile.display_name}
src={profile.avatar}
2024-02-02 11:49:25 +07:00
className="w-full rounded-full mx-auto border bg-neutral-100 border-gray-200 p-1 dark:border-neutral-800 dark:bg-black"
2024-01-31 00:49:51 +07:00
/>
</div>
2024-01-31 02:44:12 +07:00
<div className="lg:w-9/12 md:w-10/12 mb-5 md:p-5 ml-5">
<div className="md:flex items-center">
2024-01-31 00:49:51 +07:00
<h2 className="text-2xl font-semibold">{profile.username}</h2>
2024-01-31 02:44:12 +07:00
<div className="md:ml-4 my-4">
2024-01-31 00:49:51 +07:00
<a
2024-02-02 18:44:54 +07:00
className="rounded-md bg-gray-100 px-5 font-semibold py-2 md:ml-2 text-sm leading-relaxed dark:bg-neutral-800 hover:opacity-70"
2024-01-31 00:49:51 +07:00
href={profile.follow_url}
>
Follow
</a>
<a
2024-02-02 18:44:54 +07:00
className="rounded-md bg-gray-100 px-5 font-semibold py-2 ml-2 text-sm leading-relaxed dark:bg-neutral-800 hover:opacity-70"
2024-01-31 00:49:51 +07:00
href={profile.message_url}
>
Message
</a>
</div>
</div>
2024-01-31 02:44:12 +07:00
<div className="md:my-5 my-3 font-bold text-sm">
2024-01-31 00:49:51 +07:00
<p>{totalPosts} posts</p>
</div>
<p className="font-bold mb-1">{profile.display_name}</p>
<p>{profile.about}</p>
2024-02-02 11:49:25 +07:00
<p className="leading-loose font-semibold text-blue-900 dark:text-blue-200">
2024-01-31 00:49:51 +07:00
<a
target="_blank"
2024-02-02 18:44:54 +07:00
className="hover:underline"
2024-01-31 00:49:51 +07:00
rel="noopener noreferer"
href={`https://${profile.link}`}
>
{profile.link}
</a>
</p>
</div>
</div>
);
export default Profile;