HTML Interface

src/components/atoms/GalleryElements/GalleryHead.tsx

@@ -0,0 +1,17 @@
+const GalleryHead = () => {
+  return (
+  <div className= "gallery-page">
+   <div className="gallery-header">
+      <h1 className="gallery-title">Gallery Search</h1>*-
+      <div className="search-container">
+        <input type="text" className="search-bar" placeholder="Search" />
+        <img src="search-icon.png" alt="Search Icon" className="search-icon" />
+      </div>
+   </div>
+
+    <div className="Gallery-Line"></div>
+    </div>
+  );
+};
+
+export default GalleryHead;

src/components/atoms/Header/Header.tsx

@@ -4,7 +4,7 @@ const Header = () => {
   return (
     <header>
       <Link to="/" className="my-10">
-        <h1 className="text-4xl text-center">SpaceTitle</h1>
+        <h1 className="text-4xl text-center"></h1>
       </Link>
     </header>
   );

src/components/atoms/HomeElements/HomeBackgroundPic.tsx

@@ -0,0 +1,21 @@
+import HomeImageList from "src/components/organisms/ImagesList/HomeImageList";
+
+const HomeBackgroundImage: React.FC = () => {
+  return (
+    <div className="homepage">
+      <div className="background-img">
+
+        <div className="content">
+          <h1>Send us your<br></br>Satellite Streak</h1>
+          <a href="#" className="learn-more-btn">Learn more</a>
+        </div>
+      </div>
+       <div className="Home-Line"></div>
+       <a href="/image" className="gallery-link">View Gallery &#8250;</a>
+
+    </div>
+
+  );
+};
+
+export default HomeBackgroundImage;

src/components/atoms/NavBar/NavBar.tsx

@@ -0,0 +1,19 @@
+const Navbar = () => {
+  return (
+    <nav className="navbar">
+      {/* Logo to the left side */}
+      <img src="favicon.ico" alt="Logo" className="h-8"/>
+
+      {/* Links to different pages */}
+      <ul>
+        <li><a href="/" className="hover:text-gray-300">Home</a></li>
+        <li><a href="/image" className="hover:text-gray-300">Gallery</a></li>
+        <li><a href="/upload" className="hover:text-gray-300">Contribute</a></li>
+        <li><a className="account-bubble">A</a></li>
+      </ul>
+    </nav>
+  );
+};
+
+export default Navbar;
+

src/components/atoms/UploadElements/UploadDragnDrop.tsx

@@ -0,0 +1,19 @@
+const UploadDragDrop: React.FC = () => {
+  return (
+    <div className="upload-section">
+      <div className="drag-drop-area">
+        {/* Logo image */}
+        <img src="uploadDocs.png" alt="Upload Logo" className="drag-file-image" />
+
+        {/* Choose files button */}
+        <input type="file" id="fileInput" multiple style={{ display: 'none' }} />
+        <label htmlFor="fileInput" className="select-files-button">Choose Files</label>
+
+        {/* Text below the button */}
+        <p className="drag-drop-text">or drag here</p>
+      </div>
+    </div>
+  );
+};
+
+export default UploadDragDrop;

src/components/atoms/UploadElements/UploadElements.tsx

@@ -0,0 +1,29 @@
+import UploadDragnDrop from "src/components/atoms/UploadElements/UploadDragnDrop";
+import UploadForm from "src/components/atoms/UploadElements/UploadForm";
+
+const UploadElements: React.FC = () => {
+  return (
+    <div className="Upload-page">
+      {/* Line below the navbar */}
+      <div className="Upload-line"></div>
+      {/* Upload Title */}
+      <h2 className="upload-title">Upload</h2>
+
+      {/* Upload Container */}
+      <div className="upload-container">
+
+        {/* Upload Drag and Drop Section */}
+        <div className="upload-drag-drop">
+          <UploadDragnDrop />
+        </div>
+        {/* Upload Form Section */}
+        <div className="upload-form">
+          <UploadForm />
+        </div>
+
+      </div>
+    </div>
+  );
+};
+
+export default UploadElements;

src/components/atoms/UploadElements/UploadForm.tsx

@@ -0,0 +1,86 @@
+const UploadForm: React.FC = () => {
+  return (
+    <div className="upload-section">
+
+    <div className="input-section-inline">
+      <div className="input-section">
+        <label htmlFor="name">Name:</label>
+        <input type="text" id="name" name="name" />
+      </div>
+      <div className="input-section">
+        <label htmlFor="observatory">Observatory Code:</label>
+        <input type="text" id="observatory" name="observatory" />
+      </div>
+    </div>
+
+    <div className="input-section-inline">
+      <div className="input-section">
+        <label htmlFor="ra">Right Ascension, RA:</label>
+        <input type="number" id="ra" name="ra" step="0.01" />
+      </div>
+      <div className="input-section">
+        <label htmlFor="dec">Declination, DEC:</label>
+        <input type="number" id="dec" name="dec" step="0.01" />
+      </div>
+    </div>
+
+    <div className="input-section-inline">
+      <div className="input-section">
+        <label htmlFor="jd">Julian Date, JD:</label>
+        <input type="datetime-local" id="jd" name="jd" />
+      </div>
+      <div className="input-section">
+        <label htmlFor="ed">Exposure Duration, ED:</label>
+        <input type="number" id="ed" name="ed" />
+      </div>
+    </div>
+
+      <div className="input-section">
+        <input type="checkbox" id="fits" name="fits" />
+        <label htmlFor="fits">File is FITS Format</label>
+      </div>
+
+      <div className="input-section">
+        <label>Streak Type:</label>
+        <div>
+          <input type="checkbox" id="cr" name="cr" />
+          <label htmlFor="cr">Cosmic Ray, CR</label>
+        </div>
+        <div>
+          <input type="checkbox" id="rso" name="rso" />
+          <label htmlFor="rso">Resident Space Object, RSO</label>
+        </div>
+        <div>
+          <input type="checkbox" id="neo" name="neo" />
+          <label htmlFor="neo">Near Earth Object, NEO</label>
+        </div>
+        <div>
+          <input type="checkbox" id="da" name="da" />
+          <label htmlFor="da">Detector Artifact, DA</label>
+        </div>
+        <div>
+          <input type="checkbox" id="other" name="other" />
+          <label htmlFor="other">Other</label>
+        </div>
+      </div>
+      <div className="input-section">
+        <label>Permissions:</label>
+        <div>
+          <input type="checkbox" id="ml" name="ml" />
+          <label htmlFor="ml">Allow Machine Learning training on the image</label>
+        </div>
+        <div>
+          <input type="checkbox" id="publish" name="publish" />
+          <label htmlFor="publish">Allow public publishing</label>
+        </div>
+      </div>
+      <div className="input-section">
+        <button type="submit">Submit</button>
+      </div>
+    </div>
+  );
+};
+
+export default UploadForm;
+
+

src/components/molecules/ImageTile/ImageTile.tsx

@@ -1,23 +1,35 @@
-import { Link } from "react-router-dom";
-import { PokemonEntry } from "src/types";
+import { Link } from 'react-router-dom';
+import { PokemonEntry } from 'src/types';
 
 const ImageTile = ({ image }: { image: PokemonEntry }) => {
-  // const { id, name, imgURL } = image;
   const entry_number = image.entry_number;
   const { name, url } = image.pokemon_species;
 
   return (
     <Link
       to={`/image/${entry_number}`}
-      className="flex items-center justify-center p-3 w-96 m-3 light-border"
+
       data-testid={`image${entry_number}`}
     >
       <div className="col">
-        <img src={url} alt={`Image ${name}`} />
-        <h2 className="text-l text-center	p-2">{name}</h2>
+        {/* Image container */}
+        <div className="image-container">
+          {/* Author details */}
+          <div className="author-details">
+            {/* Account bubble */}
+            <div className="account-bubble">A</div>
+            {/* Author name */}
+            <h2 className="author-name">{name}</h2>
+          </div>
+          {/* Image */}
+          <img src={url} alt={`Image ${name}`} className="image" />
+          {/* Image description */}
+          <p className="image-description">Image description goes here</p>
+        </div>
       </div>
     </Link>
   );
 };
 
 export default ImageTile;
+

src/components/organisms/ImagesList/HomeImageList.tsx

@@ -0,0 +1,36 @@
+import ErrorMessage from "src/components/molecules/ErrorMessage/ErrorMessage";
+import ImageTile from "src/components/molecules/ImageTile/ImageTile";
+import LoadingMessage from "src/components/atoms/LoadingMessage/LoadingMessage";
+import useFetchImageList from "src/hooks/useFetchImageList";
+
+const HomeImageList = () => {
+  const { isLoading, isError, data, error } = useFetchImageList();
+
+  if (isLoading) {
+    return <LoadingMessage />;
+  }
+
+  if (isError) {
+    return (
+      <ErrorMessage error={`Images could not be retrieved: ${error.message}`} />
+    );
+  }
+
+  // if loading & error are passed, we should not reach this - data will be available
+  if (!data) {
+    return <ErrorMessage error={`No Images available. \n ${error}`} />;
+  }
+
+  // Render only the first row of images
+  const firstRowImages = data.pokemon_entries.slice(0, 6); // Assuming each row contains 4 images
+
+  return (
+    <div className="wrap justify-evenly w-11/12 mt-4 ">
+      {firstRowImages.map((image) => {
+        return <ImageTile key={image.entry_number} image={image} />;
+      })}
+    </div>
+  );
+};
+
+export default HomeImageList;

src/components/pages/Gallery/Gallery.tsx

@@ -1,8 +1,12 @@
+import GalleryHead from "src/components/atoms/GalleryElements/GalleryHead";
 import ImageList from "src/components/organisms/ImagesList/ImageList";
+import NavBar from "src/components/atoms/NavBar/NavBar";
 
 const Gallery = () => {
   return (
     <>
+      <NavBar />
+      <GalleryHead />
       <ImageList />
     </>
   );

src/components/pages/Home/Home.test.tsx

@@ -3,15 +3,27 @@ import { MemoryRouter } from "react-router-dom";
 import { renderWithQueryClientProvider } from "src/__test__/utils/render-with-query-client-provider";
 import { screen } from "@testing-library/react";
 
+// HTML content
+const htmlContent = `
+  <div>
+    <h1>Welcome to Home Page</h1>
+    <p>This is a paragraph</p>
+    <!-- Add any other HTML elements as needed -->
+  </div>
+`;
+
 const wrapWithMemoryRouter = (
   <MemoryRouter>
     <Home />
   </MemoryRouter>
 );
 
+// Describe the test case
 describe("Home", () => {
-  it("should display the movies", async () => {
+  it("should display the HTML content", async () => {
     renderWithQueryClientProvider(wrapWithMemoryRouter);
-    screen.getByText(/Placeholder Read Me/);
+    screen.getByText(/Welcome to Home Page/);
+    screen.getByText(/This is a paragraph/);
+    // Add assertions for other elements if needed
   });
-});
+})

src/components/pages/Home/Home.tsx

@@ -1,9 +1,15 @@
 import Description from "src/components/atoms/Description/Description";
+import HomeBackgroundPic from "src/components/atoms/HomeElements/HomeBackgroundPic";
+import HomeImageList from "src/components/organisms/ImagesList/HomeImageList";
+import NavBar from "src/components/atoms/NavBar/NavBar";
+
 
 const Home = () => {
   return (
     <>
-      <Description />
+      <NavBar/>
+      <HomeBackgroundPic/>
+      <HomeImageList/>
     </>
   );
 };

src/components/pages/MovieInfo/ImageInfo.tsx

@@ -2,6 +2,7 @@ import ErrorMessage from "src/components/molecules/ErrorMessage/ErrorMessage";
 import HomeLink from "src/components/atoms/HomeLink/HomeLink";
 import ImageDetails from "src/components/molecules/ImageDetails/ImageDetails";
 import LoadingMessage from "src/components/atoms/LoadingMessage/LoadingMessage";
+import NavBar from "src/components/atoms/NavBar/NavBar";
 import { PokemonEntry } from "src/types";
 import useFetchImageList from "src/hooks/useFetchImageList";
 import { useParams } from "react-router-dom";
@@ -11,6 +12,7 @@ type ImageInfoParams = {
 };
 
 const ImageInfo = () => {
+    <NavBar />
   const { id } = useParams() as ImageInfoParams;
 
   const { isLoading, isError, data } = useFetchImageList();

src/components/pages/Upload/Upload.tsx

@@ -0,0 +1,13 @@
+import NavBar from "src/components/atoms/NavBar/NavBar";
+import UploadElements from "src/components/atoms/UploadElements/UploadElements";
+
+const Upload = () => {
+  return (
+    <>
+      <NavBar/>
+      <UploadElements/>
+    </>
+  );
+};
+
+export default Upload;

src/router/AppRouter.tsx

@@ -5,6 +5,7 @@ import Health from "src/components/molecules/Health/Health";
 import Home from "src/components/pages/Home/Home";
 import ImageInfo from "src/components/pages/MovieInfo/ImageInfo";
 import NotFound from "src/components/pages/NotFound/NotFound";
+import Upload from "../components/pages/Upload/Upload";
 
 const AppRouter = () => {
   return (
@@ -14,6 +15,7 @@ const AppRouter = () => {
         <Routes>
           <Route path="/" element={<Home />} />
           <Route path="/image" element={<Gallery />} />
+          <Route path="/upload" element={<Upload />} />
           <Route path="/health" element={<Health />} />
           <Route path="/image/:id" element={<ImageInfo />} />
           <Route path="*" element={<NotFound />} />