From 21943daa77ec26828d79f76b67f6e5b218b8003c Mon Sep 17 00:00:00 2001
From: Oleksandra Okhotnykova <ohotnikova.sasha2002@gmail.com>
Date: Thu, 22 Aug 2024 18:53:12 +0200
Subject: [PATCH] OV-38: + reusable icon component

---
 .../components/video-card/icon-component.tsx  | 58 +++++++++++++++++++
 .../home/components/video-card/video-card.tsx | 44 +++++++-------
 2 files changed, 79 insertions(+), 23 deletions(-)
 create mode 100644 frontend/src/bundles/home/components/video-card/icon-component.tsx

diff --git a/frontend/src/bundles/home/components/video-card/icon-component.tsx b/frontend/src/bundles/home/components/video-card/icon-component.tsx
new file mode 100644
index 000000000..ec0f9da01
--- /dev/null
+++ b/frontend/src/bundles/home/components/video-card/icon-component.tsx
@@ -0,0 +1,58 @@
+import { Flex, Icon } from '@chakra-ui/react';
+import { type IconDefinition } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+
+type Properties = {
+    icon: IconDefinition;
+    buttonSize: string;
+    iconSize: string;
+    horizontalPosition: 'left' | 'right';
+    horizontalPositionValue: string;
+    top: string;
+    transform?: string;
+    backgroundColor?: string;
+    borderRadius?: string;
+};
+
+const IconComponent: React.FC<Properties> = ({
+    icon,
+    buttonSize,
+    iconSize,
+    horizontalPosition,
+    horizontalPositionValue,
+    top,
+    transform = '',
+    backgroundColor = 'white',
+    borderRadius = '0',
+}) => {
+    const isLeft = horizontalPosition === 'left';
+
+    return (
+        <Flex
+            position="absolute"
+            top={top}
+            right={isLeft ? 'auto' : horizontalPositionValue}
+            left={isLeft ? horizontalPositionValue : 'auto'}
+            transform={transform}
+            backgroundColor={backgroundColor}
+            borderRadius={borderRadius}
+            w={buttonSize}
+            h={buttonSize}
+            alignItems="center"
+            justifyContent="center"
+            opacity="0"
+            transition="opacity 0.3s ease"
+            _groupHover={{ opacity: 1 }}
+        >
+            <Icon
+                as={FontAwesomeIcon}
+                icon={icon}
+                height={iconSize}
+                width={iconSize}
+                color="background.600"
+            />
+        </Flex>
+    );
+};
+
+export { IconComponent };
diff --git a/frontend/src/bundles/home/components/video-card/video-card.tsx b/frontend/src/bundles/home/components/video-card/video-card.tsx
index 15a466020..1de230cbe 100644
--- a/frontend/src/bundles/home/components/video-card/video-card.tsx
+++ b/frontend/src/bundles/home/components/video-card/video-card.tsx
@@ -1,9 +1,10 @@
-import { Box, Flex, Icon, Image, Text } from '@chakra-ui/react';
-import { faPen } from '@fortawesome/free-solid-svg-icons';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { Box, Flex, Image, Text } from '@chakra-ui/react';
+import { faEllipsisVertical, faPen } from '@fortawesome/free-solid-svg-icons';
 
 import photo from '~/assets/img/photo.png';
 
+import { IconComponent } from './icon-component.js';
+
 const VideoCard: React.FC = () => {
     return (
         <>
@@ -25,29 +26,26 @@ const VideoCard: React.FC = () => {
                         borderRadius="5px"
                     />
 
-                    <Flex
-                        position="absolute"
+                    <IconComponent
+                        icon={faPen}
+                        buttonSize="48px"
+                        iconSize="20px"
+                        horizontalPosition="left"
+                        horizontalPositionValue="calc(50% - 12.5px)"
                         top="50%"
-                        left="50%"
                         transform="translate(-50%, -50%)"
-                        backgroundColor="white"
                         borderRadius="full"
-                        w="48px"
-                        h="48px"
-                        alignItems="center"
-                        justifyContent="center"
-                        opacity="0"
-                        transition="opacity 0.3s ease"
-                        _groupHover={{ opacity: 1 }}
-                    >
-                        <Icon
-                            as={FontAwesomeIcon}
-                            icon={faPen}
-                            height="20px"
-                            width="20px"
-                            color="background.600"
-                        />
-                    </Flex>
+                    />
+
+                    <IconComponent
+                        icon={faEllipsisVertical}
+                        buttonSize="20px"
+                        iconSize="10px"
+                        horizontalPosition="right"
+                        horizontalPositionValue="5px"
+                        top="5px"
+                        borderRadius="2px"
+                    />
                 </Box>
 
                 <Box padding="7px 10px 5px 5px">