From 68670119da83d25783959d4f27e73a2665b9e920 Mon Sep 17 00:00:00 2001
From: OGBONNA SUNDAY <62995161+OgDev-01@users.noreply.github.com>
Date: Fri, 23 Jun 2023 14:33:22 +0100
Subject: [PATCH] feat: add `UserCard` component to storybook design system
 (#1295)

---
 components/atoms/UserCard/user-card.tsx | 58 +++++++++++++++++++++++++
 stories/atoms/user-card.stories.tsx     | 34 +++++++++++++++
 2 files changed, 92 insertions(+)
 create mode 100644 components/atoms/UserCard/user-card.tsx
 create mode 100644 stories/atoms/user-card.stories.tsx

diff --git a/components/atoms/UserCard/user-card.tsx b/components/atoms/UserCard/user-card.tsx
new file mode 100644
index 0000000000..73f03b4a8e
--- /dev/null
+++ b/components/atoms/UserCard/user-card.tsx
@@ -0,0 +1,58 @@
+import { getAvatarByUsername } from "lib/utils/github";
+import Image from "next/image";
+import React from "react";
+
+type MetaObj = {
+  name: "Followers" | "Following" | "Highlights";
+  count: number;
+};
+interface UserCardProps {
+  username: string;
+  meta: MetaObj[];
+  name: string;
+}
+const UserCard = ({ username, name, meta }: UserCardProps) => {
+  const avatarUrl = getAvatarByUsername(username);
+
+  return (
+    <div className="mt-10 bg-white border w-max rounded-2xl border-zinc-200">
+      <div className="flex flex-col items-center gap-6 px-6 -translate-y-12 ">
+        <div className="flex flex-col items-center gap-2">
+          <Image
+            className="border border-white rounded-full"
+            width={110}
+            height={110}
+            src={avatarUrl}
+            alt={`${username}'s avatar image`}
+          />
+          <div>
+            <h3 className="text-lg text-center">{name}</h3>
+            <p className="text-center text-light-slate-9">{`@${username}`}</p>
+          </div>
+        </div>
+        <div className="flex items-center gap-5 text-lg text-center">
+          {meta.map(({ name, count }, i) => (
+            <div key={i.toLocaleString()}>
+              <p className="text-center text-light-slate-9">{name}</p>
+              {count > 0 ? count : "-"}
+            </div>
+          ))}
+          {/* <div>
+            <p className="text-center text-light-slate-9">Followers</p>
+            {followersCount > 0 ? followersCount : "-"}
+          </div>
+          <div>
+            <p className="text-center text-light-slate-9">Following</p>
+            {followingCount > 0 ? followingCount : "-"}
+          </div>
+          <div>
+            <p className="text-center text-light-slate-9">Highlights</p>
+            {highlightsCount > 0 ? highlightsCount : "-"}
+          </div> */}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default UserCard;
diff --git a/stories/atoms/user-card.stories.tsx b/stories/atoms/user-card.stories.tsx
new file mode 100644
index 0000000000..4d83a9030a
--- /dev/null
+++ b/stories/atoms/user-card.stories.tsx
@@ -0,0 +1,34 @@
+import UserCard from "components/atoms/UserCard/user-card";
+import { ComponentMeta, ComponentStory } from "@storybook/react";
+
+const storyConfig = {
+  title: "Design System/Atoms/UserCard",
+} as ComponentMeta<typeof UserCard>;
+
+export default storyConfig;
+
+const UserCardTemplate: ComponentStory<typeof UserCard> = (args) => <UserCard {...args} />;
+
+export const UserCardStory = UserCardTemplate.bind({});
+
+export const NoActivities = UserCardTemplate.bind({});
+
+UserCardStory.args = {
+  username: "foxyblocks",
+  name: "Chris Schlensker",
+  meta: [
+    { name: "Followers", count: 3 },
+    { name: "Following", count: 103 },
+    { name: "Highlights", count: 55 },
+  ],
+};
+
+NoActivities.args = {
+  username: "foxyblocks",
+  name: "Chris Schlensker",
+  meta: [
+    { name: "Followers", count: 0 },
+    { name: "Following", count: 0 },
+    { name: "Highlights", count: 0 },
+  ],
+};