Format react application

maryanchuk04 · Aug 30, 2024 · a96756f · a96756f
1 parent 324c058
commit a96756f
Show file tree

Hide file tree

Showing 75 changed files with 1,843 additions and 2,004 deletions.
diff --git a/src/web/src/App.jsx b/src/web/src/App.jsx
@@ -8,17 +8,17 @@ const router = createBrowserRouter(routes);
 const googleClientId = process.env.REACT_APP_GOOGLE_API_KEY;
 
 function App() {
-	React.useEffect(() => {
-		document.body.style.height = `${window.innerHeight}px`;
-	}, []);
+    React.useEffect(() => {
+        document.body.style.height = `${window.innerHeight}px`;
+    }, []);
 
-	return (
-		<GoogleOAuthProvider clientId={googleClientId}>
-			<Layout>
-				<RouterProvider router={router} />
-			</Layout>
-		</GoogleOAuthProvider>
-	);
+    return (
+        <GoogleOAuthProvider clientId={googleClientId}>
+            <Layout>
+                <RouterProvider router={router} />
+            </Layout>
+        </GoogleOAuthProvider>
+    );
 }
 
 export default App;
diff --git a/src/web/src/components/Accordion/index.jsx b/src/web/src/components/Accordion/index.jsx
@@ -1,37 +1,34 @@
 import React, { useState } from 'react';
 
 const Accordion = ({ title, details }) => {
-	const [open, setOpen] = useState(false);
+    const [open, setOpen] = useState(false);
 
-	const toggle = () => {
-		setOpen(!open);
-	};
+    const toggle = () => {
+        setOpen(!open);
+    };
 
-	return (
-		<div
-			className='p-6 duration-200 border border-standart border-black rounded-standart my-8 max-sm:p-4'
-			onClick={toggle}
-		>
-			<h2 className='text-xl relative w-full pr-8 max-sm:text-lg'>
-				{title}
-				<i
-					className={`${
-						open && 'rotate-180'
-					} fas fa-angle-down duration-300 text-3xl absolute top-1/2 right-0 transform -translate-x-1/2 -translate-y-1/2`}
-				></i>
-			</h2>
-			{open && (
-				<div className='mt-8 pr-12'>
-					<p
-						onClick={(e) => e.stopPropagation()}
-						className='editor'
-						style={{ paddingRight: '30px' }}
-						dangerouslySetInnerHTML={{ __html: details }}
-					></p>
-				</div>
-			)}
-		</div>
-	);
+    return (
+        <div className='p-6 duration-200 border border-standart border-black rounded-standart my-8 max-sm:p-4' onClick={toggle}>
+            <h2 className='text-xl relative w-full pr-8 max-sm:text-lg'>
+                {title}
+                <i
+                    className={`${
+                        open && 'rotate-180'
+                    } fas fa-angle-down duration-300 text-3xl absolute top-1/2 right-0 transform -translate-x-1/2 -translate-y-1/2`}
+                ></i>
+            </h2>
+            {open && (
+                <div className='mt-8 pr-12'>
+                    <p
+                        onClick={(e) => e.stopPropagation()}
+                        className='editor'
+                        style={{ paddingRight: '30px' }}
+                        dangerouslySetInnerHTML={{ __html: details }}
+                    ></p>
+                </div>
+            )}
+        </div>
+    );
 };
 
 export default Accordion;
diff --git a/src/web/src/components/AdvantagesCard/index.jsx b/src/web/src/components/AdvantagesCard/index.jsx
@@ -1,16 +1,16 @@
-import React from 'react'
+import React from 'react';
 
 const AdvantagesCard = ({ advantages }) => {
-	const { mainText, subText } = advantages;
+    const { mainText, subText } = advantages;
 
-	return (
-		<div className='flex-1-sm w-80 max-sm:w-full h-56 flex flex-col bg-black rounded-standart p-6 max-sm:w-sm'>
-			<p className='text-white/50 text-xl'>#{mainText}</p>
-			<div className='mt-8'>
-				<p className='text-white w-5/6'>{subText}</p>
-			</div>
-		</div>
-	)
-}
+    return (
+        <div className='flex-1-sm w-80 max-sm:w-full h-56 flex flex-col bg-black rounded-standart p-6 max-sm:w-sm'>
+            <p className='text-white/50 text-xl'>#{mainText}</p>
+            <div className='mt-8'>
+                <p className='text-white w-5/6'>{subText}</p>
+            </div>
+        </div>
+    );
+};
 
-export default AdvantagesCard
+export default AdvantagesCard;
diff --git a/src/web/src/components/Alert/index.jsx b/src/web/src/components/Alert/index.jsx
@@ -1,31 +1,35 @@
-import React, { useEffect } from 'react'
-import { useDispatch } from 'react-redux'
+import React, { useEffect } from 'react';
+import { useDispatch } from 'react-redux';
 import { closeAlert } from '../../features/alertSlice';
 import { AlertType } from '../../types/alertTypes';
-import SimpleModal from '../SimpleModal'
+import SimpleModal from '../SimpleModal';
 
 const Alert = ({ duration = 3000, type = AlertType.ERROR, text }) => {
-	const dispatch = useDispatch();
+    const dispatch = useDispatch();
 
-	useEffect(() => {
-		const timeout = setTimeout(() => {
-			dispatch(closeAlert());
-		}, duration);
+    useEffect(() => {
+        const timeout = setTimeout(() => {
+            dispatch(closeAlert());
+        }, duration);
 
-		return () => clearTimeout(timeout);
-	}, [])
+        return () => clearTimeout(timeout);
+    }, []);
 
-	return (
-		<SimpleModal className='xs:h-fit xl:h-fit md:h-fit p-6' handleClose={() => dispatch(closeAlert())}>
-			<div className='w-full flex flex-col items-center'>
-				<h1 className='text-center'>{type === AlertType.ERROR ? "От халепа" : "Успішно"}</h1>
-				<div className='h-20 w-20 my-2'>
-					<img src={type === AlertType.ERROR ? '/images/warning.png' : "/images/success.png"} alt="alert-type" className='w-full h-full' />
-				</div>
-				<p className='text-center'>{text}</p>
-			</div>
-		</SimpleModal>
-	)
-}
+    return (
+        <SimpleModal className='xs:h-fit xl:h-fit md:h-fit p-6' handleClose={() => dispatch(closeAlert())}>
+            <div className='w-full flex flex-col items-center'>
+                <h1 className='text-center'>{type === AlertType.ERROR ? 'От халепа' : 'Успішно'}</h1>
+                <div className='h-20 w-20 my-2'>
+                    <img
+                        src={type === AlertType.ERROR ? '/images/warning.png' : '/images/success.png'}
+                        alt='alert-type'
+                        className='w-full h-full'
+                    />
+                </div>
+                <p className='text-center'>{text}</p>
+            </div>
+        </SimpleModal>
+    );
+};
 
-export default Alert
+export default Alert;
diff --git a/src/web/src/components/Avatar/index.jsx b/src/web/src/components/Avatar/index.jsx
@@ -1,14 +1,11 @@
-import React from 'react'
+import React from 'react';
 
-const Avatar = ({ src, className = "" }) => {
-	return (
-		<div className={`h-16 w-16 rounded-standart ${className}`}>
-			<img src={src}
-				alt="Avatar"
-				className='h-full w-full rounded-standart object-cover'
-			/>
-		</div>
-	)
-}
+const Avatar = ({ src, className = '' }) => {
+    return (
+        <div className={`h-16 w-16 rounded-standart ${className}`}>
+            <img src={src} alt='Avatar' className='h-full w-full rounded-standart object-cover' />
+        </div>
+    );
+};
 
-export default Avatar
+export default Avatar;
diff --git a/src/web/src/components/BarcodeGenerator/index.jsx b/src/web/src/components/BarcodeGenerator/index.jsx
@@ -1,22 +1,21 @@
-import React from 'react'
+import React from 'react';
 import Barcode from 'react-barcode';
 
-
 const BarcodeGenerator = ({ value, disabled }) => {
-	const options = {
-		value: value,
-		displayValue: false,
-		background: "transparent",
-	}
+    const options = {
+        value: value,
+        displayValue: false,
+        background: 'transparent',
+    };
 
-	return disabled ? (
-		<div className='h-full relative w-fit'>
-			<Barcode {...options} />
-			<div className='h-full backdrop-blur-sm absolute top-0 left-0 w-full'></div>
-		</div>
-	) : (
-		<Barcode {...options} />
-	)
-}
+    return disabled ? (
+        <div className='h-full relative w-fit'>
+            <Barcode {...options} />
+            <div className='h-full backdrop-blur-sm absolute top-0 left-0 w-full'></div>
+        </div>
+    ) : (
+        <Barcode {...options} />
+    );
+};
 
-export default BarcodeGenerator
+export default BarcodeGenerator;
diff --git a/src/web/src/components/Carousel/index.jsx b/src/web/src/components/Carousel/index.jsx
@@ -1,72 +1,68 @@
-import React, { useState } from 'react'
-import Slider from 'react-slick'
-import 'slick-carousel/slick/slick.css'
-import 'slick-carousel/slick/slick-theme.css'
+import React, { useState } from 'react';
+import Slider from 'react-slick';
+import 'slick-carousel/slick/slick.css';
+import 'slick-carousel/slick/slick-theme.css';
 
 const Carousel = ({ children }) => {
-	const [index, setIndex] = useState(0);
+    const [index, setIndex] = useState(0);
 
-	const settings = {
-		dots: true,
-		infinite: true,
-		speed: 800,
-		arrows: false,
-		slidesToShow: 4,
-		autoplay: true,
-		autoplaySpeed: 5000,
-		initialSlide: 0,
-		pauseOnHover: true,
-		afterChange: (i) => setIndex(i),
-		appendDots: (dots) => <ul className='my-12'>{dots}</ul>,
-		customPaging: (i) => (
-			<li className='w-full'>
-				<div className={`mt-8 rounded-full mx-4 h-2 ${i === index ? "w-5 bg-black ml-3" : "bg-[#D9D9D9] w-2"}`}>
-				</div>
-			</li>
-		),
-		responsive: [
-			{
-				breakpoint: 1024,
-				settings: {
-					slidesToShow: 3,
-					slidesToScroll: 3,
-					infinite: true,
-					dots: true
-				}
-			},
-			{
-				breakpoint: 600,
-				settings: {
-					slidesToShow: 2,
-					slidesToScroll: 2,
-					initialSlide: 2
-				}
-			},
-			{
-				breakpoint: 480,
-				settings: {
-					slidesToShow: 1,
-					slidesToScroll: 1
-				}
-			},
-			{
-				breakpoint: 380,
-				settings: {
-					slidesToShow: 1,
-					slidesToScroll: 1,
-				}
-			}
-		]
-	}
+    const settings = {
+        dots: true,
+        infinite: true,
+        speed: 800,
+        arrows: false,
+        slidesToShow: 4,
+        autoplay: true,
+        autoplaySpeed: 5000,
+        initialSlide: 0,
+        pauseOnHover: true,
+        afterChange: (i) => setIndex(i),
+        appendDots: (dots) => <ul className='my-12'>{dots}</ul>,
+        customPaging: (i) => (
+            <li className='w-full'>
+                <div className={`mt-8 rounded-full mx-4 h-2 ${i === index ? 'w-5 bg-black ml-3' : 'bg-[#D9D9D9] w-2'}`}></div>
+            </li>
+        ),
+        responsive: [
+            {
+                breakpoint: 1024,
+                settings: {
+                    slidesToShow: 3,
+                    slidesToScroll: 3,
+                    infinite: true,
+                    dots: true,
+                },
+            },
+            {
+                breakpoint: 600,
+                settings: {
+                    slidesToShow: 2,
+                    slidesToScroll: 2,
+                    initialSlide: 2,
+                },
+            },
+            {
+                breakpoint: 480,
+                settings: {
+                    slidesToShow: 1,
+                    slidesToScroll: 1,
+                },
+            },
+            {
+                breakpoint: 380,
+                settings: {
+                    slidesToShow: 1,
+                    slidesToScroll: 1,
+                },
+            },
+        ],
+    };
 
-	return (
-		<Slider
-			{...settings}
-			className="gap-2"
-		>
-			{children}
-		</Slider>
-	)
-}
+    return (
+        <Slider {...settings} className='gap-2'>
+            {children}
+        </Slider>
+    );
+};
 
-export default Carousel
+export default Carousel;