update component Image , Cart & Form

n-festa · Jan 10, 2024 · bdee5cf · bdee5cf
1 parent 0c5e8a9
commit bdee5cf
Show file tree

Hide file tree

Showing 11 changed files with 196 additions and 103 deletions.
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -1,51 +1,12 @@
-import Head from "next/head";
-import Header from "@components/header"
-import { useTranslation } from 'next-i18next';
-import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
-import { usePathname } from 'next/navigation'
-import { useState } from 'react';
-
-type LayoutType = {
-  	title?: string;
-  	children?: React.ReactNode;
-};
-
-
-export default ({ children, title = "2ALL" }: LayoutType) => {
-	const pathname = usePathname()
-    const [onTop, setOnTop] = useState(false);
-
-	if(pathname === "/landingpage") {
-	}
-
-	return (
-	    <div className="app-main">
-		    <Head>
-		        <title>{title}</title>
-		        <link rel="icon" href="/images/logo.ico" />
-		        <link
-		          rel="stylesheet"
-		          href="https://fonts.googleapis.com/css2?family=Quicksand:wght@400;500;600;700&display=swap"
-		        />
-		        <link
-		          href="https://fonts.cdnfonts.com/css/svn-gilroy"
-		          rel="stylesheet"
-		        />
-
-		        <link
-		          rel="stylesheet"
-		          href="https://fonts.googleapis.com/css2?family=Inter:wght@600&display=swap"
-		        />
-		        <link
-		          rel="stylesheet"
-		          href="https://fonts.googleapis.com/css2?family=Poppins:wght@500&display=swap"
-		        />
-		    </Head>
-		    {/* landing-page-option-3 */}
-	      	<main className=" d-flex flex-column">
-	      		<Header />
-	        	{children}
-	      	</main>
-	    </div>
-	);
-};
+import '@/styles/bootstrap.min.scss'
+
+export default function RootLayout({children,}: {children: React.ReactNode;}) {
+  	return (
+	    <html lang="en">
+	      	<body>
+	        {/* <ProgressBar /> */}
+	        {children}
+	      	</body>
+	    </html>
+  )
+}
diff --git a/src/components/cart/add_to_cart.tsx → src/components/cart/addToCart.tsx b/src/components/cart/add_to_cart.tsx → src/components/cart/addToCart.tsx
diff --git a/src/components/cart/cart_item.tsx → src/components/cart/cartItem.tsx b/src/components/cart/cart_item.tsx → src/components/cart/cartItem.tsx
diff --git a/src/components/cart/cart_model.tsx → src/components/cart/cartModel.tsx b/src/components/cart/cart_model.tsx → src/components/cart/cartModel.tsx
diff --git a/src/components/cart/index.tsx b/src/components/cart/index.tsx
@@ -1,4 +1,4 @@
-import CartItem from './cart_item'
+import CartItem from './cartItem'
 const Cart =() =>{
 	return (
 	    <div className="cart-info-wrapper d-flex flex-column align-items-center gap-2">

diff --git a/src/components/form/FormError.tsx b/src/components/form/FormError.tsx
@@ -0,0 +1,8 @@
+import React from 'react';
+import Feedback from 'react-bootstrap/Feedback';
+
+export default function FormError(props: {message?:string}){
+    const { message } = props;
+
+    return message && <Feedback type='invalid'>{message}</Feedback>
+}
diff --git a/src/components/image/ImageFallback.tsx b/src/components/image/ImageFallback.tsx
@@ -0,0 +1,33 @@
+'use client'
+
+import Image, { ImageProps } from 'next/image';
+import { useEffect, useState } from 'react';
+
+type Props = {
+    src: string;
+    fallbackSrc: string;
+} & ImageProps
+
+export default function ImageFallback(props: Props){
+    const{
+        src,
+        fallbackSrc,
+        ...rest
+    } = props;
+
+    const [imgSrc, setImgSrc] = useState(src);
+    useEffect(() => {
+        setImgSrc(src)
+    },[src]);
+
+    return(
+        <Image
+            {...rest}
+            alt={rest.alt ?? ''}
+            src={imgSrc}
+            onError={() => {
+                setImgSrc(fallbackSrc)
+            }}
+        />
+    )
+}
diff --git a/src/layouts/layout.tsx b/src/layouts/layout.tsx
diff --git a/src/styles/bootstrap.min.css b/src/styles/bootstrap.min.css
diff --git a/src/styles/global.css b/src/styles/global.css
@@ -0,0 +1,135 @@
+:root {
+  /* fonts */
+  --text-md-regular: Quicksand;
+  --text-xl-regular: SVN-Gilroy;
+  --font-svn-circular: SVN-Circular;
+  --font-poppins: Poppins;
+  --text-xl-semibold: Inter;
+
+  /* font sizes */
+  --text-md-regular-size: 16px;
+  --text-sm-semibold-size: 14px;
+  --text-xs-medium-size: 12px;
+  --font-size-2xs-5: 10.5px;
+  --text-lg-semibold-size: 18px;
+  --text-xl-regular-size: 20px;
+  --display-lg-medium-size: 48px;
+  --font-size-21xl: 40px;
+  --display-sm-semibold-size: 30px;
+  --font-size-6xl-2: 25.2px;
+  --font-size-6xl-7: 25.7px;
+  --font-size-11xs-6: 1.6px;
+  --font-size-11xs-4: 1.4px;
+  --font-size-10xs-3: 2.3px;
+  --display-xs-semibold-size: 24px;
+  --display-xl-medium-size: 60px;
+
+  /* Colors */
+  --color-ivory-100: #fffff0;
+  --icterine-25: #fdffee;
+  --gray-500: #667085;
+  --gray-600: #475467;
+  --gray-7001: #344154;
+  --gray-700: #344054;
+  --primary-500: #00473c;
+  --color-darkslategray-100: #00463c;
+  --color-steelblue: #1275b1;
+  --primary-300: #336c63;
+  --success-50: #ecfdf3;
+  --color-honeydew-100: #d7eed5;
+  --success-200: #abefc6;
+  --success-700: #067647;
+  --gray-900: #101828;
+  --gray-modern-950: #0d121c;
+  --gray-950: #0c111d;
+  --color-gray-100: rgba(255, 255, 255, 0.5);
+  --color-gray-200: rgba(255, 255, 255, 0.3);
+  --color-gray-300: rgba(255, 255, 255, 0.9);
+  --full-white: #fff;
+  --base-black: #000;
+  --color-mediumslateblue: #0a58ff;
+  --color-gold: #fac515;
+  --icterine-500: #e6ff55;
+  --dark-grey: #acadb9;
+  --primary-100: #99b5b1;
+  --gray-300: #d0d5dd;
+  --color-palegoldenrod: #e0faad;
+  --gray-100: #f2f4f7;
+  --gray-200: #eaecf0;
+  --green-light-500: #8dc63f;
+  --color-floralwhite: #fffaf0;
+  --green-light-100: #ddeec5;
+
+  /* Gaps */
+  --gap-13xl: 32px;
+  --gap-5xl: 24px;
+  --gap-45xl: 64px;
+  --gap-37xl: 56px;
+  --gap-base: 16px;
+  --gap-xs: 12px;
+  --gap-5xs: 8px;
+  --gap-7xs: 6px;
+  --gap-10xs: 3px;
+  --gap-29xl: 48px;
+  --gap-11xs: 2px;
+  --gap-xl: 20px;
+  --gap-21xl: 40px;
+  --gap-9xs: 4px;
+  --gap-17xl: 36px;
+  --gap-12xs-8: 0.8px;
+  --gap-11xs-6: 1.6px;
+  --gap-12xs-4: 0.4px;
+
+  /* Paddings */
+  --padding-29xl: 48px;
+  --padding-13xl: 32px;
+  --padding-45xl: 64px;
+  --padding-11xs: 2px;
+  --padding-5xs: 8px;
+  --padding-lgi-2: 19.2px;
+  --padding-lg: 18px;
+  --padding-10xs: 3px;
+  --padding-8xs-5: 4.5px;
+  --padding-7xs: 6px;
+  --padding-77xl: 96px;
+  --padding-base: 16px;
+  --padding-xs: 12px;
+  --padding-sm: 14px;
+  --padding-3xs: 10px;
+  --padding-21xl: 40px;
+  --padding-5xl: 24px;
+  --padding-31xl: 50px;
+  --padding-10xs-5: 2.5px;
+  --padding-10xs-3: 2.3px;
+  --padding-12xs-4: 0.4px;
+  --padding-12xs-6: 0.6px;
+  --padding-12xs-8: 0.8px;
+  --padding-9xs: 4px;
+
+  /* Border radiuses */
+  --br-37xl: 56px;
+  --br-base: 16px;
+  --br-lg: 18px;
+  --br-4xs: 9px;
+  --br-mini-7: 14.7px;
+  --br-mid-4: 17.4px;
+  --br-5xl: 24px;
+  --br-7xs: 6px;
+  --br-5xs: 8px;
+  --br-9xs: 4px;
+  --br-2xs-5: 10.5px;
+  --br-xl: 20px;
+  --br-10xs-3: 2.3px;
+  --br-11xs-2: 1.2px;
+  --br-xs: 12px;
+  --br-smi-6: 12.6px;
+
+  /* Effects */
+  --shadow-2xl: 0px 24px 48px -12px rgba(16, 24, 40, 0.18);
+  --shadow-xl: 0px 20px 24px -4px rgba(16, 24, 40, 0.08),
+    0px 8px 8px -4px rgba(16, 24, 40, 0.03);
+  --shadow-md: 0px 4px 8px -2px rgba(16, 24, 40, 0.1),
+    0px 2px 4px -2px rgba(16, 24, 40, 0.06);
+  --shadow-xs: 0px 1px 2px rgba(16, 24, 40, 0.05);
+  --background-blur-sm: blur(8px);
+}
diff --git a/src/layouts/404.tsx → src/styles/style.css b/src/layouts/404.tsx → src/styles/style.css