Youllou/issue20

package.json

@@ -11,6 +11,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@dts-stn/service-canada-design-system": "^1.67.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
@@ -26,6 +27,7 @@
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.6",
     "prettier": "^3.2.5",
+    "react-router-dom": "^6.23.1",
     "typescript": "^5.2.2",
     "vite": "^5.2.0"
   }

src/App.css

@@ -1,42 +1,8 @@
 #root {
-  max-width: 1280px;
-  margin: 0 auto;
-  padding: 2rem;
   text-align: center;
+  width: 100%;
 }
 
-.logo {
-  height: 6em;
-  padding: 1.5em;
-  will-change: filter;
-  transition: filter 300ms;
-}
-.logo:hover {
-  filter: drop-shadow(0 0 2em #646cffaa);
-}
-.logo.react:hover {
-  filter: drop-shadow(0 0 2em #61dafbaa);
-}
-
-@keyframes logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  a:nth-of-type(2) .logo {
-    animation: logo-spin infinite 20s linear;
-  }
-}
-
-.card {
-  padding: 2em;
-}
-
-.read-the-docs {
-  color: #888;
+body {
+  display: block;
 }

src/App.tsx

@@ -1,34 +1,20 @@
-import { useState } from "react";
-import reactLogo from "./assets/react.svg";
-import viteLogo from "/vite.svg";
+import { BrowserRouter, Routes, Route } from "react-router-dom";
+import HomePage from "./Pages/HomePage/HomePage";
+import NoPage from "./Pages/NoPage/NoPage";
 import "./App.css";
+import Header from "./Components/Header/Header";
 
 function App() {
-  const [count, setCount] = useState(0);
-
   return (
-    <>
-      <div>
-        <a href="https://vitejs.dev" target="_blank">
-          <img src={viteLogo} className="logo" alt="Vite logo" />
-        </a>
-        <a href="https://react.dev" target="_blank">
-          <img src={reactLogo} className="logo react" alt="React logo" />
-        </a>
-      </div>
-      <h1>Vite + React</h1>
-      <div className="card">
-        <button onClick={() => setCount((count) => count + 1)}>
-          count is {count}
-        </button>
-        <p>
-          Edit <code>src/App.tsx</code> and save to test HMR
-        </p>
-      </div>
-      <p className="read-the-docs">
-        Click on the Vite and React logos to learn more
-      </p>
-    </>
+    <BrowserRouter>
+      <Header />
+      <Routes>
+        <Route path="/">
+          <Route index element={<HomePage />} />
+          <Route path="*" element={<NoPage />} />
+        </Route>
+      </Routes>
+    </BrowserRouter>
   );
 }
 

src/Components/DragDropFileInput/DragDropFileInput.css

@@ -0,0 +1,67 @@
+.drag-drop-file-input {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 300px; /* Set your desired width here */
+  height: 200px; /* Set your desired height here */
+  background-color: #fff; /* White background color */
+  border: 2px solid #ccc; /* Gray border color */
+  border-radius: 5px; /* Rounded corners */
+  cursor: pointer;
+  position: relative; /* To position the plus sign */
+}
+
+.drag-drop-file-input:hover {
+  border: 2px solid #777; /* Gray border color */
+}
+
+.drag-drop-file-input.active {
+  border: 2px solid #777;
+}
+
+.drag-drop-file-input::before {
+  content: "+"; /* Plus sign content */
+  font-size: 30px; /* Adjust font size as needed */
+  color: #ccc; /* Gray color for the plus sign */
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%); /* Center the plus sign */
+}
+
+.drag-drop-file-input:hover::before {
+  color: #777; /* Change the color of the plus sign on hover */
+}
+
+.drag-drop-file-input.active::before {
+  color: #777; /* Change the color of the plus sign on hover */
+}
+
+.drag-drop-file-input.hasFile::before {
+  display: none;
+}
+
+.drag-drop-inner {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+input[type="file"] {
+  display: none; /* Hide the default input file button */
+}
+
+#preview {
+  display: none;
+  max-width: 100%;
+  max-height: 100%;
+}
+
+#preview.active {
+  display: block;
+}
+
+.drag-drop-container{
+  grid-area: a;
+}

src/Components/DragDropFileInput/DragDropFileInput.tsx

@@ -0,0 +1,90 @@
+import React, { useState, useRef } from "react";
+import "./DragDropFileInput.css";
+interface FileInputProps {
+  sendChange: (files: File[]) => void;
+}
+
+const DragDropFileInput: React.FC<FileInputProps> = ({ sendChange }) => {
+  const [dragActive, setDragActive] = useState(false);
+  const fileInput = useRef(null);
+  const [file, setFile] = useState("");
+
+  const handleDrag = (event: React.DragEvent<HTMLLabelElement>) => {
+    event.preventDefault();
+    if (event.type === "dragover") {
+      setDragActive(true);
+    } else if (event.type === "dragleave") {
+      setDragActive(false);
+    }
+  };
+
+  const handleDrop = (event: React.DragEvent<HTMLElement>) => {
+    event.preventDefault();
+    setDragActive(false);
+    const files = event.dataTransfer?.files;
+    if (files) {
+      handleFileChange(Array.from(files));
+    }
+  };
+
+  const handleClick = (event: React.MouseEvent<HTMLElement>) => {
+    event.preventDefault();
+    const input = fileInput.current! as HTMLInputElement;
+    input.click();
+  };
+
+  const handleFileChange = (files: File[]) => {
+    if (files!.length > 0) {
+      const reader = new FileReader();
+      reader.onload = (e) => {
+        const newFile = e!.target!.result! as string;
+        setFile(newFile);
+      };
+      reader.readAsDataURL(files[0]!);
+      sendChange(files);
+    }
+  };
+
+  const onFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const files = event!.target!.files!;
+    handleFileChange(Array.from(files));
+  };
+
+  const handleCancel = () => {
+    setFile("");
+  };
+
+  return (
+    <div className="drag-drop-container">
+      <h3 className="title">Attach a document</h3>
+      <input
+        id="file-input"
+        ref={fileInput}
+        type="file"
+        multiple
+        onChange={onFileChange}
+      />
+      <label
+        htmlFor="file-input"
+        onDragOver={handleDrag}
+        onDragLeave={handleDrag}
+        onDrop={handleDrop}
+        onClick={handleClick}
+        className={`drag-drop-file-input ${dragActive ? "active" : ""} ${file ? "hasFile" : ""}`}
+      >
+        <embed id="preview" src={file} className={file ? "active" : ""}></embed>
+      </label>
+      <div className="drag-drop-inner">
+        <p>Drag & drop your files here or</p>
+        <button type="button" onClick={handleClick}>
+          Browse Files
+        </button>
+        <button type="button" onClick={handleCancel}>
+          Cancel
+        </button>
+      </div>
+    </div>
+  );
+};
+
+export default DragDropFileInput;

src/Components/FileList/FileElement/FileElement.css

@@ -0,0 +1,3 @@
+.file-element{
+    border: 2px solid #ddd;
+}

src/Components/FileList/FileElement/FileElement.tsx

@@ -0,0 +1,25 @@
+import React from "react";
+
+interface FileElementProps{
+    file: File;
+    position: number;
+}
+
+const FileElement: React.FC<FileElementProps> = ({file, position})=>{
+    console.log(file)
+    let fileUrl = "";
+    const reader = new FileReader();
+    reader.onload = (e) => {
+      const newFile = e!.target!.result!;
+      fileUrl = newFile as string
+    };
+    reader.readAsDataURL(file);
+    return(
+        <div className="file-element" id={"file_"+position}>
+            <img src={fileUrl}></img>
+        </div>
+    )
+
+}
+
+export default FileElement

src/Components/FileList/FileList.css

@@ -0,0 +1,21 @@
+.file-list{
+    border: 2px solid #ccc;
+    border-radius: 5px;
+    grid-area: b;
+    padding: 5px;
+}
+
+.file-list.empty{
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 159%;
+}
+
+.no-element{
+    display: none;
+}
+
+.no-element.active{
+    display: block;
+}

src/Components/FileList/FileList.tsx

@@ -0,0 +1,24 @@
+import React, { useState } from "react";
+import "./FileList.css";
+import FileElement from "./FileElement/FileElement";
+interface FileListProps{
+    files: File[]
+}
+
+const FileList: React.FC<FileListProps>  = ({files})=>{
+
+    return (
+        <div className={`file-list ${files.length==0 ? 'empty' : ''}`}>
+            <div className={`no-element ${files.length==0 ? 'active' : ''}`}>
+                No element to show
+            </div>
+            {[...files].map(
+                (file: File, index: number, array: File[]) => (
+                    <FileElement file={file} position={index} key={index}/>
+                )
+            )}
+        </div>
+    );
+}
+
+export default FileList;

src/Components/Header/Header.css

@@ -0,0 +1,24 @@
+header {
+  background-color: #05486c;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+  margin-bottom: 10px;
+}
+
+#version {
+  font-weight: 700;
+  position: absolute;
+  right: 12px;
+  color: red;
+  align-content: center;
+  border: 2px solid red;
+  padding: 5px;
+  border-radius: 5px;
+}
+
+ul {
+  list-style-type: none;
+  display: flex;
+}