OV-50: * update user card and extract user circle component

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';

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 };

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" />