Merge pull request #3 from ismail-kharrobi/DEV-FRONT

front init

frontend/code/package.json

@@ -1,24 +1,25 @@
 {
-  "name": "frontend",
+  "name": "dendenden",
   "version": "0.1.0",
   "private": true,
   "dependencies": {
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
     "@types/jest": "^27.5.2",
-    "@types/node": "^16.18.40",
-    "@types/react": "^18.2.20",
+    "@types/node": "^16.18.38",
+    "@types/react": "^18.2.15",
     "@types/react-dom": "^18.2.7",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-scripts": "5.0.1",
+    "react-icons": "^4.10.1",
+    "react-scripts": "^5.0.1",
     "typescript": "^4.9.5",
     "web-vitals": "^2.1.4"
   },
   "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
+    "start": "FORK_TS_CHECKER=false react-scripts start",
+    "build": "FORK_TS_CHECKER=false react-scripts build",
     "test": "react-scripts test",
     "eject": "react-scripts eject"
   },
@@ -39,5 +40,10 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "daisyui": "^3.2.1",
+    "react-router-dom": "^6.14.2",
+    "tailwindcss": "^3.3.3"
   }
 }

frontend/code/src/index.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

frontend/code/src/index.tsx

@@ -1,18 +1,27 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
-
-
+import './index.css';
+import {Login} from './login'
+import {Main} from './main'
+import reportWebVitals from './reportWebVitals';
+import { BrowserRouter, Routes, Route } from "react-router-dom";
 
 const root = ReactDOM.createRoot(
   document.getElementById('root') as HTMLElement
 );
 root.render(
   <React.StrictMode>
-    <div>
-      <h1>test pipelines</h1>
-    </div>
+    <BrowserRouter>
+      <Routes>
+        <Route path="/" element={<Login/>}></Route>
+        <Route path="/main" element={<Main/>}></Route>
+      </Routes>
+    </BrowserRouter>
+
   </React.StrictMode>
 );
 
 // If you want to start measuring performance in your app, pass a function
 // to log results (for example: reportWebVitals(console.log))
+// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
+reportWebVitals();

frontend/code/src/login.tsx

@@ -0,0 +1,19 @@
+import {GiPingPongBat, GiGlassBall} from 'react-icons/gi'
+import {  Link } from "react-router-dom";
+
+export const Login =  () =>
+{
+    return (
+        <div data-thme="luxury"  className="flex flex-col items-center space-y-36 h-[100vh]  bg-[url(./images/bg.gif)] bg-no-repeat bg-cover bg-center ">
+        <div className='relative bg-black opacity-40 h-full w-full z-10 flex items-center justify-center'></div>
+         <div className='absolute sm:top-[30%] top-[22%] z-50 flex flex-col items-center gap-y-20'>
+           <div className='flex flex-col justify-evenly '>
+              <h1 className='sm:text-[9rem] text-6xl  text-white flex flex-row items-center gap-x-[1.40rem] sm:gap-x-[3.9rem] font-bold'>P<GiGlassBall className='flex justify-center items-start sm:text-5xl text-3xl text-warning'/>NG</h1>
+              <div className='flex flex-row items-center text-6xl sm:text-[9rem] gap-x-2 sm:gap-x-4 text-white font-semibold'>P <GiPingPongBat className='text-warning' />NG</div>
+            </div>
+            <Link to="/main"><button data-thme="luxury" className="btn btn-success sm:text-3xl text-xl w-40 h-14 font-bold flex  sm:w-80 sm:h-20 z-0"><img alt="42" className='h-8' src="https://profile.intra.42.fr/assets/42_logo-7dfc9110a5319a308863b96bda33cea995046d1731cebb735e41b16255106c12.svg"/> Login</button>
+            </Link>
+          </div>
+        </div>
+    );
+}

frontend/code/src/main.tsx

@@ -0,0 +1,7 @@
+import Bourki from './images/vid.gif'
+export const Main = () =>
+{
+    return (
+        <img src={Bourki} alt="" className="h-[100vh] w-[100vw]" />
+    )
+}

frontend/code/src/react-app-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="react-scripts" />

frontend/code/src/reportWebVitals.ts

@@ -0,0 +1,15 @@
+import { ReportHandler } from 'web-vitals';
+
+const reportWebVitals = (onPerfEntry?: ReportHandler) => {
+  if (onPerfEntry && onPerfEntry instanceof Function) {
+    import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
+      getCLS(onPerfEntry);
+      getFID(onPerfEntry);
+      getFCP(onPerfEntry);
+      getLCP(onPerfEntry);
+      getTTFB(onPerfEntry);
+    });
+  }
+};
+
+export default reportWebVitals;

frontend/code/src/setupTests.ts

@@ -0,0 +1,5 @@
+// jest-dom adds custom jest matchers for asserting on DOM nodes.
+// allows you to do things like:
+// expect(element).toHaveTextContent(/react/i)
+// learn more: https://github.com/testing-library/jest-dom
+import '@testing-library/jest-dom';

frontend/code/tailwind.config.js

@@ -0,0 +1,72 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: [
+    "./src/**/*.{js,jsx,ts,tsx}",
+  ],
+  theme: {
+    extend: {},
+  },
+  plugins: [require("daisyui")],
+  daisyui: {
+    themes: [
+      {
+         mytheme: {
+
+ "primary": "#8fea9b",
+
+ "secondary": "#4cdd46",
+
+ "accent": "#aedd1f",
+
+ "neutral": "#161922",
+
+ "base-100": "#335466",
+
+ "info": "#3e9cea",
+
+ "success": "#1ba177",
+
+ "warning": "#99670f",
+
+ "error": "#e93f6f",
+          },
+      },
+      "light",
+      "dark",
+      "cupcake",
+      "bumblebee",
+      "emerald",
+      "corporate",
+      "synthwave",
+      "retro",
+      "cyberpunk",
+      "valentine",
+      "halloween",
+      "garden",
+      "forest",
+      "aqua",
+      "lofi",
+      "pastel",
+      "fantasy",
+      "wireframe",
+      "black",
+      "luxury",
+      "dracula",
+      "cmyk",
+      "autumn",
+      "business",
+      "acid",
+      "lemonade",
+      "night",
+      "coffee",
+      "winter",
+    ], // true: all themes | false: only light + dark | array: specific themes like this ["light", "dark", "cupcake"]
+    darkTheme: "dark", // name of one of the included themes for dark mode
+    base: true, // applies background color and foreground color for root element by default
+    styled: true, // include daisyUI colors and design decisions for all components
+    utils: true, // adds responsive and modifier utility classes
+    rtl: false, // rotate style direction from left-to-right to right-to-left. You also need to add dir="rtl" to your html tag and install `tailwindcss-flip` plugin for Tailwind CSS.
+    prefix: "", // prefix for daisyUI classnames (components, modifiers and responsive class names. Not colors)
+    logs: true, // Shows info about daisyUI version and used config in the console when building your CSS
+  },
+}