From a82608b319d5e2d37fb2ac09450ae30b4c26530a Mon Sep 17 00:00:00 2001
From: Joseph Chimebuka <chimebujoseph@gmail.com>
Date: Sun, 2 Jun 2024 18:57:28 +0000
Subject: [PATCH] Create dialog component (#144)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* added dialogpage

* added icons

* added modal component

* added dialog page

* yarn formatted the code

* fixed spelling error

* removed the componenets to show the products working

* added button props from button component and  added current colr to colors

* deleted the dialog page

* removed linking to router

* formatted page

* yarn lint

* made some fixes

* yarn formatted code

* Remove unused icons, fix props, fix button text

---------

Co-authored-by: Uğur Eren <contact@ugureren.net>
---
 JoyboyCommunity/src/assets/icons.tsx          |  8 +-
 .../src/components/modal/index.tsx            | 61 +++++++++++++++
 .../src/components/modal/styled.ts            | 75 +++++++++++++++++++
 3 files changed, 143 insertions(+), 1 deletion(-)
 create mode 100644 JoyboyCommunity/src/components/modal/index.tsx
 create mode 100644 JoyboyCommunity/src/components/modal/styled.ts

diff --git a/JoyboyCommunity/src/assets/icons.tsx b/JoyboyCommunity/src/assets/icons.tsx
index 2f9fc14b..0e093c54 100644
--- a/JoyboyCommunity/src/assets/icons.tsx
+++ b/JoyboyCommunity/src/assets/icons.tsx
@@ -107,6 +107,12 @@ export const UserIcon: React.FC<SvgProps> = (props) => (
   </Svg>
 );
 
+export const LineIcon: React.FC<SvgProps> = (props) => (
+  <Svg width={37} height={5} fill="none" {...props}>
+    <Rect width={36} height={5} x={0.5} fill="currentColor" fillOpacity={0.3} rx={2.5} />
+  </Svg>
+);
+
 export const CopyIcon: React.FC<SvgProps> = (props) => {
   return (
     <Svg viewBox="0 0 24 24" fill="none" {...props}>
@@ -183,7 +189,7 @@ export const SendIcon: React.FC<SvgProps> = (props) => {
         d="M22 3.464a12 12 0 0 1 12 0l12.249 7.072a12 12 0 0 1 6 10.392v14.144a12 12 0 0 1-6 10.392L34 52.536a12 12 0 0 1-12 0L9.751 45.464a12 12 0 0 1-6-10.392V20.928a12 12 0 0 1 6-10.392L22 3.464Z"
       />
       <Path
-        fill="#fff"
+        fill="currentColor"
         d="M37.597 18.543c-.467-.504-1.2-.692-1.9-.76-.736-.07-1.617-.024-2.566.1-1.902.25-4.2.828-6.409 1.539-2.21.711-4.363 1.567-5.976 2.386-.802.409-1.499.821-2.005 1.218-.252.197-.482.41-.655.636-.165.216-.338.524-.336.894.006.972.668 1.659 1.373 2.12.72.47 1.657.825 2.589 1.103.941.281 1.931.499 2.783.675l.304.063c.514.106.771.16 1.013.087.242-.072.428-.258.8-.63l3.68-3.681a1 1 0 0 1 1.415 1.414l-3.433 3.433c-.379.379-.568.568-.64.814-.072.246-.014.507.102 1.03.448 2.024.838 3.697 1.226 4.823.227.657.483 1.227.806 1.646.337.438.796.77 1.4.796.376.017.69-.155.904-.315.225-.167.438-.393.635-.639.396-.495.812-1.18 1.226-1.97.832-1.59 1.713-3.722 2.459-5.915.745-2.193 1.366-4.48 1.665-6.38.149-.948.223-1.828.182-2.565-.04-.7-.188-1.434-.642-1.922Z"
       />
     </Svg>
diff --git a/JoyboyCommunity/src/components/modal/index.tsx b/JoyboyCommunity/src/components/modal/index.tsx
new file mode 100644
index 00000000..62e7b4b0
--- /dev/null
+++ b/JoyboyCommunity/src/components/modal/index.tsx
@@ -0,0 +1,61 @@
+import React from 'react';
+import {Portal} from 'react-native-portalize';
+
+import {LineIcon} from '../../assets/icons';
+import {Button} from '../button';
+import {
+  Container,
+  Content,
+  getButtonColor,
+  getTextColor,
+  IconContainer,
+  ModalContainer,
+  Overlay,
+  Title,
+} from './styled';
+
+export type ModalProps = {
+  name: string;
+  icon: React.ReactNode;
+  description: string;
+  visible: boolean;
+  buttons: {
+    label: string;
+    type: 'primary' | 'secondary' | 'dangerous';
+    onPress: () => void;
+  }[];
+};
+
+const Modal: React.FC<ModalProps> = ({name, icon, description, visible, buttons}) => {
+  if (!visible) return null;
+
+  return (
+    <Portal>
+      <Overlay>
+        <ModalContainer>
+          <Container>
+            <LineIcon color="#3C3C43" />
+            <IconContainer>{icon}</IconContainer>
+            <Title>{name}</Title>
+            <Content>{description}</Content>
+          </Container>
+
+          <Container>
+            {buttons.map((button, index) => (
+              <Button
+                key={index.toString()}
+                onPress={button.onPress}
+                style={{backgroundColor: getButtonColor(button.type)}}
+                textStyle={{color: getTextColor(button.type)}}
+              >
+                {button.label}
+              </Button>
+            ))}
+          </Container>
+        </ModalContainer>
+      </Overlay>
+    </Portal>
+  );
+};
+
+export default Modal;
diff --git a/JoyboyCommunity/src/components/modal/styled.ts b/JoyboyCommunity/src/components/modal/styled.ts
new file mode 100644
index 00000000..6f87d3c1
--- /dev/null
+++ b/JoyboyCommunity/src/components/modal/styled.ts
@@ -0,0 +1,75 @@
+import {Text, View} from 'react-native';
+import styled from 'styled-components/native';
+
+export const Overlay = styled(View)`
+  flex: 1;
+  justify-content: center;
+  align-items: center;
+  background-color: rgba(0, 0, 0, 0.5);
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+`;
+
+export const ModalContainer = styled(View)`
+  width: 85%;
+  display: flex;
+  flex-direction: column;
+  padding: 0 20px;
+  background-color: white;
+  border-radius: 10px;
+  align-items: center;
+`;
+
+export const Container = styled(View)`
+  flex-direction: column;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding-top: 20px;
+  margin-bottom: 20px;
+`;
+
+export const Title = styled(Text)`
+  font-size: 21px;
+  font-weight: 700;
+  line-height: 24px;
+  margin-bottom: 12px;
+  margin-top: 12px;
+`;
+export const IconContainer = styled(View)`
+  margin-bottom: 10px;
+  margin-top: 16px;
+`;
+
+export const Content = styled(Text)`
+  font-size: 16px;
+  text-align: center;
+  color: #8f979e;
+`;
+
+export const getButtonColor = (type: string) => {
+  switch (type) {
+    case 'dangerous':
+      return '#0C0C4F';
+    case 'primary':
+      return '#EC796B';
+    case 'secondary':
+      return '#0c0c4f1a';
+    default:
+      return '#ccc';
+  }
+};
+
+export const getTextColor = (type: string) => {
+  switch (type) {
+    case 'dangerous':
+      return '#ffff';
+    case 'primary':
+      return '#fff';
+    case 'secondary':
+      return '#14142C';
+  }
+};