some changes

qayyumgb · Jan 18, 2024 · ec70fac · ec70fac
1 parent 60d7267
commit ec70fac
Show file tree

Hide file tree

Showing 23 changed files with 991 additions and 867 deletions.
diff --git a/src/common/form-input.tsx b/src/common/form-input.tsx
@@ -1,6 +1,6 @@
 import styles from "./common.module.scss";
 
-const InputForm = ({ type, value, onChange, id, name, placehloder }: { type: string, value: string, onChange: (event: React.ChangeEvent<HTMLInputElement>) => void, id: string, name: string, placehloder: string }) => {
+const InputForm = ({ type, value, onChange, id, name, placehloder }: { type: string, value: string | number, onChange: (event: React.ChangeEvent<HTMLInputElement>) => void, id: string, name: string, placehloder: string }) => {
     return (
         <input className={styles.inputForm} type={type} value={value} onChange={onChange} id={id} name={name} placeholder={placehloder} />
     )

diff --git a/src/icons/carousel-icon.tsx b/src/icons/carousel-icon.tsx
@@ -0,0 +1,14 @@
+import {ReactElement} from "react";
+
+export function CarouselIcon(): ReactElement {
+
+    return (
+        <svg width="19" height="19" viewBox="0 0 19 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path
+                d="M17 8V11C17 11.7956 16.6839 12.5587 16.1213 13.1213C15.5587 13.6839 14.7956 14 14 14H5L1 18V5C1 4.20435 1.31607 3.44129 1.87868 2.87868C2.44129 2.31607 3.20435 2 4 2H11"
+                stroke="#5D5D5D" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
+            <path d="M14 1H18V5" stroke="#5D5D5D" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
+            <path d="M13 6L18 1" stroke="#5D5D5D" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
+        </svg>
+    );
+}
diff --git a/src/icons/edit-icon.tsx b/src/icons/edit-icon.tsx
@@ -0,0 +1,18 @@
+import {ReactElement} from "react";
+
+export function EditIcon(): ReactElement {
+    return (
+        <svg width="23" height="23" viewBox="0 0 23 23" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <g clipPath="url(#clip0_290_294)">
+                <path d="M6.70801 6.7085H5.74967C5.24134 6.7085 4.75383 6.91043 4.39439 7.26987C4.03494 7.62932 3.83301 8.11683 3.83301 8.62516V17.2502C3.83301 17.7585 4.03494 18.246 4.39439 18.6055C4.75383 18.9649 5.24134 19.1668 5.74967 19.1668H14.3747C14.883 19.1668 15.3705 18.9649 15.73 18.6055C16.0894 18.246 16.2913 17.7585 16.2913 17.2502V16.2918" stroke="#5D5D5D" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
+                <path d="M19.5356 6.31073C19.9131 5.93329 20.1251 5.42138 20.1251 4.8876C20.1251 4.35383 19.9131 3.84191 19.5356 3.46448C19.1582 3.08704 18.6463 2.875 18.1125 2.875C17.5787 2.875 17.0668 3.08704 16.6894 3.46448L8.625 11.5001V14.3751H11.5L19.5356 6.31073V6.31073Z" stroke="#5D5D5D" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
+                <path d="M15.333 4.7915L18.208 7.6665" stroke="#5D5D5D" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
+            </g>
+            <defs>
+                <clipPath id="clip0_290_294">
+                    <rect width="23" height="23" fill="white"/>
+                </clipPath>
+            </defs>
+        </svg>
+    );
+}
diff --git a/src/icons/eye-icon.tsx b/src/icons/eye-icon.tsx
@@ -0,0 +1,11 @@
+import React, {ReactElement} from 'react';
+
+export function EyeIcon(): ReactElement {
+    return (
+        <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M2.01677 10.5942C1.90328 10.4145 1.84654 10.3246 1.81477 10.186C1.79091 10.0819 1.79091 9.91775 1.81477 9.81366C1.84654 9.67507 1.90328 9.58522 2.01677 9.40552C2.95461 7.92054 5.74617 4.1665 10.0003 4.1665C14.2545 4.1665 17.0461 7.92054 17.9839 9.40552C18.0974 9.58522 18.1541 9.67507 18.1859 9.81366C18.2098 9.91775 18.2098 10.0819 18.1859 10.186C18.1541 10.3246 18.0974 10.4145 17.9839 10.5942C17.0461 12.0791 14.2545 15.8332 10.0003 15.8332C5.74617 15.8332 2.95461 12.0791 2.01677 10.5942Z" stroke="#5D5D5D" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
+            <path d="M10.0003 12.4998C11.381 12.4998 12.5003 11.3805 12.5003 9.99984C12.5003 8.61913 11.381 7.49984 10.0003 7.49984C8.61962 7.49984 7.50034 8.61913 7.50034 9.99984C7.50034 11.3805 8.61962 12.4998 10.0003 12.4998Z" stroke="#5D5D5D" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
+        </svg>
+    );
+}
+
diff --git a/src/icons/posts-icon.tsx b/src/icons/posts-icon.tsx
@@ -0,0 +1,21 @@
+import {ReactElement} from "react";
+
+export function PostsIcon(): ReactElement {
+
+    return (
+        <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path
+                d="M6 1H2C1.44772 1 1 2 1 2V6C1 6.55228 1.44772 7 2 7H6C6.55228 7 7 6.55228 7 6V2C7 1.44772 6.55228 1 6 1Z"
+                stroke="#5D5D5D" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
+            <path
+                d="M16 1H12C11.4477 1 11 1.44772 11 2V6C11 6.55228 11.4477 7 12 7H16C16.5523 7 17 6.55228 17 6V2C17 1.44772 16.5523 1 16 1Z"
+                stroke="#5D5D5D" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
+            <path
+                d="M6 11H2C1.44772 11 1 11.4477 1 12V16C1 16.5523 1.44772 17 2 17H6C6.55228 17 7 16.5523 7 16V12C7 11.4477 6.55228 11 6 11Z"
+                stroke="#5D5D5D" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
+            <path
+                d="M16 11H12C11.4477 11 11 11.4477 11 12V16C11 16.5523 11.4477 17 12 17H16C16.5523 17 17 16.5523 17 16V12C17 11.4477 16.5523 11 16 11Z"
+                stroke="#5D5D5D" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
+        </svg>
+    );
+}
diff --git a/src/icons/trash-icon.tsx b/src/icons/trash-icon.tsx
@@ -0,0 +1,28 @@
+import React, {ReactElement} from "react";
+
+export function TrashIcon({width = 23, height = 23, fill = "none"}): ReactElement {
+    return (
+        <svg width={width} height={height} viewBox="0 0 23 23" fill={fill} xmlns="http://www.w3.org/2000/svg">
+            <g clipPath="url(#clip0_290_273)">
+                <path d="M3.83301 6.7085H19.1663" stroke="#5D5D5D" strokeWidth="2" strokeLinecap="round"
+                      strokeLinejoin="round"/>
+                <path d="M9.58301 10.5415V16.2915" stroke="#5D5D5D" strokeWidth="1.5" strokeLinecap="round"
+                      strokeLinejoin="round"/>
+                <path d="M13.417 10.5415V16.2915" stroke="#5D5D5D" strokeWidth="1.5" strokeLinecap="round"
+                      strokeLinejoin="round"/>
+                <path
+                    d="M4.79199 6.7085L5.75033 18.2085C5.75033 18.7168 5.95226 19.2043 6.3117 19.5638C6.67115 19.9232 7.15866 20.1252 7.66699 20.1252H15.3337C15.842 20.1252 16.3295 19.9232 16.6889 19.5638C17.0484 19.2043 17.2503 18.7168 17.2503 18.2085L18.2087 6.7085"
+                    stroke="#5D5D5D" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
+                <path
+                    d="M8.625 6.70833V3.83333C8.625 3.57917 8.72597 3.33541 8.90569 3.15569C9.08541 2.97597 9.32917 2.875 9.58333 2.875H13.4167C13.6708 2.875 13.9146 2.97597 14.0943 3.15569C14.274 3.33541 14.375 3.57917 14.375 3.83333V6.70833"
+                    stroke="#5D5D5D" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
+            </g>
+            <defs>
+                <clipPath id="clip0_290_273">
+                    <rect width="23" height="23" fill="white"/>
+                </clipPath>
+            </defs>
+        </svg>
+
+    );
+}
diff --git a/src/layout/layout.module.scss b/src/layout/layout.module.scss
@@ -11,5 +11,7 @@
   .containerWrapper {
     min-width: calc(100% - 260px);
     width: 100%;
+    height: 100%;
+    overflow: hidden;
   }
 }
diff --git a/src/layout/left-menu/left-menu.tsx b/src/layout/left-menu/left-menu.tsx
@@ -1,49 +1,44 @@
 import React from 'react';
-import { Grid, List, ListItem, ListItemButton, ListItemIcon, ListItemText, colors } from '@mui/material';
-import { Link, useLocation } from 'react-router-dom';
+import {Grid, List, ListItem, ListItemButton, ListItemIcon, ListItemText, colors} from '@mui/material';
+import {Link, useLocation} from 'react-router-dom';
 import Logo from '../../assets/images/pipelLogo.png';
 import carouselMenu from '../../assets/icons/carouselMenu.svg';
 import postMenu from '../../assets/icons/postMenu.svg';
+import {PostsIcon} from "../../icons/posts-icon";
+import {CarouselIcon} from "../../icons/carousel-icon";
 
 export default function LeftMenu() {
-  const location = useLocation();
+    const location = useLocation();
 
-  const isActive = (targetUrl: string) => {
-    return location.pathname === targetUrl;
-  };
+    const isActive = (targetUrl: string) => {
+        return location.pathname === targetUrl;
+    };
 
-  return (
-    <>
-      <Grid item display={'flex'} justifyContent={'center'} spacing={2} padding={3}>
-        <img src={Logo} alt="logo" width={200} />
-      </Grid>
-      <List>
-        <ListItem key='פוסטים' disablePadding component={Link} to="/home/carousel" className={isActive('/home/carousel') ? 'active' : 'menuItem'}>
-          <ListItemButton style={{ textAlign: 'right', color: '#5D5D5D' }}>
-            <ListItemIcon>
-            <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
-              <path d="M6 1H2C1.44772 1 1 1.44772 1 2V6C1 6.55228 1.44772 7 2 7H6C6.55228 7 7 6.55228 7 6V2C7 1.44772 6.55228 1 6 1Z" stroke="#5D5D5D" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-              <path d="M16 1H12C11.4477 1 11 1.44772 11 2V6C11 6.55228 11.4477 7 12 7H16C16.5523 7 17 6.55228 17 6V2C17 1.44772 16.5523 1 16 1Z" stroke="#5D5D5D" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-              <path d="M6 11H2C1.44772 11 1 11.4477 1 12V16C1 16.5523 1.44772 17 2 17H6C6.55228 17 7 16.5523 7 16V12C7 11.4477 6.55228 11 6 11Z" stroke="#5D5D5D" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-              <path d="M16 11H12C11.4477 11 11 11.4477 11 12V16C11 16.5523 11.4477 17 12 17H16C16.5523 17 17 16.5523 17 16V12C17 11.4477 16.5523 11 16 11Z" stroke="#5D5D5D" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-            </svg>
-            </ListItemIcon>
-            <ListItemText primary='פוסטים' />
-          </ListItemButton>
-        </ListItem>
-        <ListItem key='קרוסלה' disablePadding component={Link} to="/home/post" className={isActive('/home/post') ? 'active' : 'menuItem'}>
-          <ListItemButton style={{ textAlign: 'right', color: '#5D5D5D' }}>
-            <ListItemIcon>
-            <svg width="19" height="19" viewBox="0 0 19 19" fill="none" xmlns="http://www.w3.org/2000/svg">
-              <path d="M17 8V11C17 11.7956 16.6839 12.5587 16.1213 13.1213C15.5587 13.6839 14.7956 14 14 14H5L1 18V5C1 4.20435 1.31607 3.44129 1.87868 2.87868C2.44129 2.31607 3.20435 2 4 2H11" stroke="#5D5D5D" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-              <path d="M14 1H18V5" stroke="#5D5D5D" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-              <path d="M13 6L18 1" stroke="#5D5D5D" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-            </svg>
-            </ListItemIcon>
-            <ListItemText primary='קרוסלה' />
-          </ListItemButton>
-        </ListItem>
-      </List>
-    </>
-  );
+    return (
+        <>
+            <Grid item display={'flex'} justifyContent={'center'} spacing={2} padding={3}>
+                <img src={Logo} alt="logo" width={200}/>
+            </Grid>
+            <List>
+                <ListItem key='פוסטים' disablePadding component={Link} to="/home/carousel"
+                          className={isActive('/home/carousel') ? 'active' : 'menuItem'}>
+                    <ListItemButton style={{textAlign: 'right', color: '#5D5D5D'}}>
+                        <ListItemIcon>
+                            <PostsIcon/>
+                        </ListItemIcon>
+                        <ListItemText primary='קרוסלה'/>
+                    </ListItemButton>
+                </ListItem>
+                <ListItem key='קרוסלה' disablePadding component={Link} to="/home/post"
+                          className={isActive('/home/post') ? 'active' : 'menuItem'}>
+                    <ListItemButton style={{textAlign: 'right', color: '#5D5D5D'}}>
+                        <ListItemIcon>
+                            <CarouselIcon/>
+                        </ListItemIcon>
+                        <ListItemText primary='פוסטים'/>
+                    </ListItemButton>
+                </ListItem>
+            </List>
+        </>
+    );
 }
diff --git a/src/modals/add-item-modal/add-item-modal.module.scss b/src/modals/add-item-modal/add-item-modal.module.scss
diff --git a/src/modals/add-item-modal/add-item-modal.tsx b/src/modals/add-item-modal/add-item-modal.tsx
@@ -0,0 +1,30 @@
+import styles from './add-item-modal.module.scss';
+import React, {ReactElement} from "react";
+import ModalWrapper from "../../common/modal";
+import AddCarousalData from "../../pages/home/components/add-carousel-form/add-carousel-form";
+import {HeroCard} from "../../interfaces";
+
+interface AddItemModalProps {
+    isOpen: boolean;
+    closeModal: () => void;
+
+}
+export function AddItemModal(props: AddItemModalProps): ReactElement {
+    const { isOpen, closeModal } = props;
+    const handleAddData = (newData: HeroCard) => {
+       console.log("handle add data", newData);
+    };
+
+    return (
+        <ModalWrapper
+            open={isOpen}
+            onClose={closeModal}
+            maxWidth='437px'
+        >
+            <AddCarousalData
+                onClose={closeModal}
+                onAddData={handleAddData}
+            />
+        </ModalWrapper>
+    )
+}
diff --git a/src/modals/delete-item-modal/delete-item-modal.module.scss b/src/modals/delete-item-modal/delete-item-modal.module.scss
diff --git a/src/modals/delete-item-modal/delete-item-modal.tsx b/src/modals/delete-item-modal/delete-item-modal.tsx
@@ -0,0 +1,40 @@
+import classes from "./delete-item-modal.module.scss";
+import React, {ReactElement} from "react";
+import ModalWrapper from "../../common/modal";
+import {Button, Grid} from "@mui/material";
+
+interface DeleteItemModalProps {
+    isOpen: boolean;
+    closeModal: () => void;
+    onConfirm: () => void;
+}
+
+export function DeleteItemModal(props: DeleteItemModalProps): ReactElement {
+    const {isOpen, closeModal, onConfirm} = props;
+    return (
+        <ModalWrapper
+            maxWidth='437px'
+            open={isOpen}
+            onClose={closeModal}
+        >
+            <div>
+                <p>Are you sure you want to delete this item?</p>
+                <Grid container spacing={2}>
+                    <Grid item>
+                        <Button className="primary-btn" onClick={onConfirm}>
+                            Delete
+                        </Button>
+                    </Grid>
+                    <Grid item>
+                        <Button
+                            className="secondary-btn"
+                            onClick={closeModal}
+                        >
+                            Cancel
+                        </Button>
+                    </Grid>
+                </Grid>
+            </div>
+        </ModalWrapper>
+    )
+}
diff --git a/...dded-data/carousel-added-data.module.scss → ...l/carousel-list/carousel-list.module.scss b/...dded-data/carousel-added-data.module.scss → ...l/carousel-list/carousel-list.module.scss