From 423aed206046f76e7cc1ab2dba0f04e57e69c0d1 Mon Sep 17 00:00:00 2001
From: JKaypa <jose_kaypa@hotmail.com>
Date: Thu, 22 Aug 2024 07:01:23 -0500
Subject: [PATCH] OV-50: * update user card and extract user circle component

---
 .../bundles/users/components/components.ts    |  1 +
 .../user-card/components/user-circle.tsx      | 20 +++++++++++++++++++
 .../users/components/user-card/user-card.tsx  | 11 +++-------
 3 files changed, 24 insertions(+), 8 deletions(-)
 create mode 100644 frontend/src/bundles/users/components/user-card/components/user-circle.tsx

diff --git a/frontend/src/bundles/users/components/components.ts b/frontend/src/bundles/users/components/components.ts
index dcbd2c9a1..a34b28eed 100644
--- a/frontend/src/bundles/users/components/components.ts
+++ b/frontend/src/bundles/users/components/components.ts
@@ -1 +1,2 @@
+export { UserCircle } from './user-card/components/user-circle.js';
 export { UserCard } from './user-card/user-card.js';
diff --git a/frontend/src/bundles/users/components/user-card/components/user-circle.tsx b/frontend/src/bundles/users/components/user-card/components/user-circle.tsx
new file mode 100644
index 000000000..9c6791ead
--- /dev/null
+++ b/frontend/src/bundles/users/components/user-card/components/user-circle.tsx
@@ -0,0 +1,20 @@
+import { Circle } from '~/bundles/common/components/components.js';
+
+type Properties = {
+    username: string;
+};
+
+const UserCircle: React.FC<Properties> = ({ username }) => {
+    return (
+        <Circle
+            size="40px"
+            border="2px solid"
+            borderColor="brand.secondary.900"
+            color="brand.secondary.900"
+        >
+            {username}
+        </Circle>
+    );
+};
+
+export { UserCircle };
diff --git a/frontend/src/bundles/users/components/user-card/user-card.tsx b/frontend/src/bundles/users/components/user-card/user-card.tsx
index 1d340aa6c..3761eab98 100644
--- a/frontend/src/bundles/users/components/user-card/user-card.tsx
+++ b/frontend/src/bundles/users/components/user-card/user-card.tsx
@@ -1,11 +1,12 @@
 import {
     Button,
-    Circle,
     Flex,
     Text,
     VStack,
 } from '~/bundles/common/components/components.js';
 
+import { UserCircle } from '../components.js';
+
 const UserCard: React.FC = () => (
     <VStack rounded="lg" bg="background.600" spacing="10px" p="15px 5px 10px">
         <Flex
@@ -16,13 +17,7 @@ const UserCard: React.FC = () => (
             pl="10px"
         >
             {/* TODO: replace Circle and Text content with dynamic values */}
-            <Circle
-                size="40px"
-                border="2px solid"
-                borderColor="brand.secondary.900"
-            >
-                FN
-            </Circle>
+            <UserCircle username="FN" />
             <Text>Firstname Lastname</Text>
         </Flex>
         <Button label="Create video" />