+
+ );
+};
+
+export default ErrorMessage;
\ No newline at end of file
diff --git a/src/components/common/ImageTile/ImageTile.tsx b/src/components/common/ImageTile/ImageTile.tsx
new file mode 100644
index 0000000..fbfee18
--- /dev/null
+++ b/src/components/common/ImageTile/ImageTile.tsx
@@ -0,0 +1,18 @@
+// src/components/common/ImageTile/ImageTile.tsx
+import { Image } from '../../../types/image';
+import React from 'react';
+
+interface ImageTileProps {
+ image: Image;
+}
+
+const ImageTile: React.FC{message}
+
+ 
+
+ );
+};
+
+export default ImageTile;
\ No newline at end of file
diff --git a/src/components/common/Input/Input.css b/src/components/common/Input/Input.css
new file mode 100644
index 0000000..a93a1ef
--- /dev/null
+++ b/src/components/common/Input/Input.css
@@ -0,0 +1,25 @@
+// src/components/common/Input/Input.css
+.input-group {
+ margin-bottom: var(--spacing-md);
+}
+
+.input-group label {
+ display: block;
+ margin-bottom: var(--spacing-xs);
+ color: var(--text-color);
+}
+
+.input-group input {
+ width: 100%;
+ padding: var(--spacing-sm);
+ border: 1px solid var(--accent-color);
+ border-radius: 4px;
+ font-size: var(--font-size-md);
+ background-color: var(--background-color);
+ color: var(--text-color);
+}
+
+.input-group .required {
+ color: #ff6b6b;
+ margin-left: var(--spacing-xs);
+}
\ No newline at end of file
diff --git a/src/components/common/Input/Input.tsx b/src/components/common/Input/Input.tsx
new file mode 100644
index 0000000..3f6d2c3
--- /dev/null
+++ b/src/components/common/Input/Input.tsx
@@ -0,0 +1,42 @@
+// src/components/common/Input/Input.tsx
+import React from 'react';
+
+interface InputProps {
+ type: 'text' | 'number' | 'email' | 'password' | 'date';
+ label: string;
+ value: string;
+ onChange: (e: React.ChangeEvent{image.name}
+
+
+
+ {error && {error}}
+
+ );
+};
+
+export default Input;
\ No newline at end of file
diff --git a/src/components/common/LoadingMessage/LoadingMessage.tsx b/src/components/common/LoadingMessage/LoadingMessage.tsx
new file mode 100644
index 0000000..b59d31c
--- /dev/null
+++ b/src/components/common/LoadingMessage/LoadingMessage.tsx
@@ -0,0 +1,8 @@
+// src/components/common/LoadingMessage/LoadingMessage.tsx
+import React from 'react';
+
+const LoadingMessage: React.FC = () => {
+ return Loading...
;
+};
+
+export default LoadingMessage;
\ No newline at end of file
diff --git a/src/components/common/Modal/Modal.css b/src/components/common/Modal/Modal.css
new file mode 100644
index 0000000..6e06d0e
--- /dev/null
+++ b/src/components/common/Modal/Modal.css
@@ -0,0 +1,39 @@
+// src/components/common/Modal/Modal.css
+.modal-overlay {
+ position: fixed;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ background-color: rgba(0, 0, 0, 0.5);
+ display: flex;
+ justify-content: center;
+ align-items: center;
+}
+
+.modal {
+ background-color: var(--background-color);
+ padding: var(--spacing-lg);
+ border-radius: 4px;
+ width: 80%;
+ max-width: 500px;
+}
+
+.modal-header {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ margin-bottom: var(--spacing-md);
+}
+
+.modal-close {
+ background: none;
+ border: none;
+ font-size: var(--font-size-xl);
+ cursor: pointer;
+ color: var(--text-color);
+}
+
+.modal-content {
+ color: var(--text-color);
+}
\ No newline at end of file
diff --git a/src/components/common/Modal/Modal.tsx b/src/components/common/Modal/Modal.tsx
new file mode 100644
index 0000000..d8da289
--- /dev/null
+++ b/src/components/common/Modal/Modal.tsx
@@ -0,0 +1,30 @@
+// src/components/common/Modal/Modal.tsx
+import React from 'react';
+import './Modal.css';
+
+interface ModalProps {
+ isOpen: boolean;
+ onClose: () => void;
+ title: string;
+ children: React.ReactNode;
+}
+
+const Modal: React.FC
+
+ );
+};
+
+export default Modal;
diff --git a/src/components/features/Gallery/GalleryHeader.tsx b/src/components/features/Gallery/GalleryHeader.tsx
new file mode 100644
index 0000000..8981967
--- /dev/null
+++ b/src/components/features/Gallery/GalleryHeader.tsx
@@ -0,0 +1,16 @@
+// src/components/features/Gallery/GalleryHeader.tsx
+import React from 'react';
+
+const GalleryHeader: React.FC = () => {
+ return (
+ e.stopPropagation()}>
+
+
+
+ {title}
+ +
+ {children}
+
+
+
+ );
+};
+
+export default GalleryHeader;
\ No newline at end of file
diff --git a/src/components/features/Gallery/GalleryList.tsx b/src/components/features/Gallery/GalleryList.tsx
new file mode 100644
index 0000000..83e7d9f
--- /dev/null
+++ b/src/components/features/Gallery/GalleryList.tsx
@@ -0,0 +1,24 @@
+// src/components/features/Gallery/GalleryList.tsx
+import ErrorMessage from '../../common/ErrorMessage/ErrorMessage';
+import ImageTile from '../../common/ImageTile/ImageTile';
+import LoadingMessage from '../../common/LoadingMessage/LoadingMessage';
+import React from 'react';
+import useFetchImageList from '../../../hooks/useFetchImageList';
+
+const GalleryList: React.FC = () => {
+ const { isLoading, isError, data, error } = useFetchImageList();
+
+ if (isLoading) return Gallery Search
+
+
+ 
+
+
+
+ {data.map((image) => (
+
+ );
+};
+
+export default GalleryList;
\ No newline at end of file
diff --git a/src/components/features/Home/HomeHero.tsx b/src/components/features/Home/HomeHero.tsx
new file mode 100644
index 0000000..b219763
--- /dev/null
+++ b/src/components/features/Home/HomeHero.tsx
@@ -0,0 +1,16 @@
+// src/components/features/Home/HomeHero.tsx
+import { Link } from 'react-router-dom';
+import React from 'react';
+
+const HomeHero: React.FC = () => {
+ return (
+
+
+ );
+};
+
+export default HomeHero;
\ No newline at end of file
diff --git a/src/components/features/Home/HomeImageList.tsx b/src/components/features/Home/HomeImageList.tsx
new file mode 100644
index 0000000..2e7e16b
--- /dev/null
+++ b/src/components/features/Home/HomeImageList.tsx
@@ -0,0 +1,30 @@
+// src/components/features/Home/HomeImageList.tsx
+import ErrorMessage from '../../common/ErrorMessage/ErrorMessage';
+import ImageTile from '../../common/ImageTile/ImageTile';
+import { Link } from 'react-router-dom';
+import LoadingMessage from '../../common/LoadingMessage/LoadingMessage';
+import React from 'react';
+import useFetchImageList from '../../../hooks/useFetchImageList';
+
+const HomeImageList: React.FC = () => {
+ const { isLoading, isError, data, error } = useFetchImageList();
+
+ if (isLoading) return
+ Send us your
+ Learn more
+
+ Send us your
Satellite Streak
+ Learn more
+
+
+ );
+};
+
+export default HomeImageList;
\ No newline at end of file
diff --git a/src/components/features/ImageInfo/ImageDetails.tsx b/src/components/features/ImageInfo/ImageDetails.tsx
new file mode 100644
index 0000000..47aaa14
--- /dev/null
+++ b/src/components/features/ImageInfo/ImageDetails.tsx
@@ -0,0 +1,27 @@
+// src/components/features/ImageInfo/ImageDetails.tsx
+import { Image } from '../../../types/image';
+import React from 'react';
+
+interface ImageDetailsProps {
+ image: Image;
+}
+
+const ImageDetails: React.FC
+ {firstRowImages.map((image) => (
+
+ View Gallery ›
+
+
+
+ );
+};
+
+export default ImageDetails;
\ No newline at end of file
diff --git a/src/components/features/Upload/DragAndDrop.tsx b/src/components/features/Upload/DragAndDrop.tsx
new file mode 100644
index 0000000..93d3de5
--- /dev/null
+++ b/src/components/features/Upload/DragAndDrop.tsx
@@ -0,0 +1,18 @@
+// src/components/features/Upload/DragAndDrop.tsx
+import React from 'react';
+
+const DragAndDrop: React.FC = () => {
+ return (
+
+
+ {image.name}
+Uploader: {image.uploader}
+Upload Date: {new Date(image.uploadDate).toLocaleDateString()}
+
+ {image.tags.map((tag, index) => (
+ {tag}
+ ))}
+
+
+ 
+
+ );
+};
+
+export default DragAndDrop;
\ No newline at end of file
diff --git a/src/components/features/Upload/UploadForm.tsx b/src/components/features/Upload/UploadForm.tsx
new file mode 100644
index 0000000..5969da3
--- /dev/null
+++ b/src/components/features/Upload/UploadForm.tsx
@@ -0,0 +1,95 @@
+// src/components/features/Upload/UploadForm.tsx
+import React, { useState } from 'react';
+import Button from '../../common/Button/Button';
+import Input from '../../common/Input/Input';
+
+const UploadForm: React.FC = () => {
+ const [formData, setFormData] = useState({
+ name: '',
+ observatory: '',
+ ra: '',
+ dec: '',
+ jd: '',
+ ed: '',
+ isFits: false,
+ streakType: {
+ cr: false,
+ rso: false,
+ neo: false,
+ da: false,
+ other: false
+ },
+ permissions: {
+ ml: false,
+ publish: false
+ }
+ });
+
+ const handleInputChange = (e: React.ChangeEvent
+ Drag and drop your files here
+or
+ + +
+
+ );
+};
+
+export default GalleryPage;
\ No newline at end of file
diff --git a/src/pages/HomePage.tsx b/src/pages/HomePage.tsx
new file mode 100644
index 0000000..f05b746
--- /dev/null
+++ b/src/pages/HomePage.tsx
@@ -0,0 +1,15 @@
+// src/pages/HomePage.tsx
+import HomeHero from '../components/features/Home/HomeHero';
+import HomeImageList from '../components/features/Home/HomeImageList';
+import React from 'react';
+
+const HomePage: React.FC = () => {
+ return (
+
+
+ );
+};
+
+export default HomePage;
\ No newline at end of file
diff --git a/src/pages/ImageInfoPage.tsx b/src/pages/ImageInfoPage.tsx
new file mode 100644
index 0000000..82f3fe0
--- /dev/null
+++ b/src/pages/ImageInfoPage.tsx
@@ -0,0 +1,24 @@
+// src/pages/ImageInfoPage.tsx
+import ErrorMessage from '../components/common/ErrorMessage/ErrorMessage';
+import ImageDetails from '../components/features/ImageInfo/ImageDetails';
+import LoadingMessage from '../components/common/LoadingMessage/LoadingMessage';
+import React from 'react';
+import { useFetchImage } from '../hooks';
+import { useParams } from 'react-router-dom';
+
+const ImageInfoPage: React.FC = () => {
+ const { id } = useParams<{ id: string }>();
+ const { data: image, isLoading, error } = useFetchImage(id);
+
+ if (isLoading) return
+
+ );
+};
+
+export default ImageInfoPage;
\ No newline at end of file
diff --git a/src/pages/LoginPage.tsx b/src/pages/LoginPage.tsx
new file mode 100644
index 0000000..02dfc0d
--- /dev/null
+++ b/src/pages/LoginPage.tsx
@@ -0,0 +1,95 @@
+// src/pages/LoginPage.tsx
+import React, { useState } from 'react';
+
+import Button from '../components/common/Button/Button';
+import ErrorMessage from '../components/common/ErrorMessage/ErrorMessage';
+import Input from '../components/common/Input/Input';
+
+import { isValidEmail } from '../utils/validationUtils';
+
+import { ROUTES } from '../constants';
+import { useAuth } from '../context';
+import { useFormState } from '../hooks';
+import { useNavigate } from 'react-router-dom';
+
+interface LoginForm {
+ email: string;
+ password: string;
+}
+
+const LoginPage: React.FC = () => {
+ const navigate = useNavigate();
+ const { login } = useAuth();
+ const [isLoading, setIsLoading] = useState(false);
+ const [error, setError] = useState
+
+ );
+};
+
+export default LoginPage;
\ No newline at end of file
diff --git a/src/pages/NotFoundPage.tsx b/src/pages/NotFoundPage.tsx
new file mode 100644
index 0000000..77dc370
--- /dev/null
+++ b/src/pages/NotFoundPage.tsx
@@ -0,0 +1,15 @@
+// src/pages/NotFoundPage.tsx
+import { Link } from 'react-router-dom';
+import React from 'react';
+
+const NotFoundPage: React.FC = () => {
+ return (
+ Login
+ +
+
+ );
+};
+
+export default NotFoundPage;
\ No newline at end of file
diff --git a/src/pages/RegisterPage.tsx b/src/pages/RegisterPage.tsx
new file mode 100644
index 0000000..b02bb10
--- /dev/null
+++ b/src/pages/RegisterPage.tsx
@@ -0,0 +1,13 @@
+// src/pages/RegisterPage.tsx
+import React from 'react';
+
+const RegisterPage: React.FC = () => {
+ return (
+ 404 - Page Not Found
+The page you are looking for does not exist.
+ Return to Home +
+
+ );
+};
+
+export default RegisterPage;
\ No newline at end of file
diff --git a/src/pages/UploadPage.tsx b/src/pages/UploadPage.tsx
new file mode 100644
index 0000000..575b69e
--- /dev/null
+++ b/src/pages/UploadPage.tsx
@@ -0,0 +1,17 @@
+// src/pages/UploadPage.tsx
+import DragAndDrop from '../components/features/Upload/DragAndDrop';
+import React from 'react';
+import UploadForm from '../components/features/Upload/UploadForm';
+
+
+const UploadPage: React.FC = () => {
+ return (
+ Register
+ {/* Add registration form here */} +
+
+ );
+};
+
+export default UploadPage;
diff --git a/src/services/api/client.ts b/src/services/api/client.ts
new file mode 100644
index 0000000..d4ac728
--- /dev/null
+++ b/src/services/api/client.ts
@@ -0,0 +1,60 @@
+// src/services/api/client.ts
+
+const BASE_URL = process.env.REACT_APP_API_BASE_URL || 'https://api.example.com';
+
+class ApiClient {
+ private getHeaders(): HeadersInit {
+ const headers: HeadersInit = {
+ 'Content-Type': 'application/json',
+ };
+ const token = localStorage.getItem('authToken');
+ if (token) {
+ headers['Authorization'] = `Bearer ${token}`;
+ }
+ return headers;
+ }
+
+ private async handleResponse(response: Response) {
+ if (!response.ok) {
+ const error = await response.json();
+ throw new Error(error.message || 'An error occurred');
+ }
+ return response.json();
+ }
+
+ public async getUpload Your Image
+
-
- );
-};
-
-export default Description;
diff --git a/src/components/atoms/GalleryElements/GalleryHead.tsx b/src/components/atoms/GalleryElements/GalleryHead.tsx
deleted file mode 100644
index 7431d26..0000000
--- a/src/components/atoms/GalleryElements/GalleryHead.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-const GalleryHead = () => {
- return (
- Placeholder Read Me
-
-
- );
-};
-
-export default GalleryHead;
diff --git a/src/components/atoms/HomeElements/HomeBackgroundPic.tsx b/src/components/atoms/HomeElements/HomeBackgroundPic.tsx
deleted file mode 100644
index 7fa6bd0..0000000
--- a/src/components/atoms/HomeElements/HomeBackgroundPic.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-const HomeBackgroundImage: React.FC = () => {
- return (
-
-
-
-
- Gallery Search
*- -
-
- 
-
-
-
-
- );
-};
-
-export default HomeBackgroundImage;
diff --git a/src/components/atoms/HomeLink/HomeLink.test.tsx b/src/components/atoms/HomeLink/HomeLink.test.tsx
deleted file mode 100644
index 3b9d58c..0000000
--- a/src/components/atoms/HomeLink/HomeLink.test.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import { render, screen } from "@testing-library/react";
-import HomeLink from "./HomeLink";
-import { MemoryRouter } from "react-router-dom";
-
-describe("HomeLink", () => {
- it("should display", async () => {
- render(
-
-
-
-
- View Gallery ›
-
-
-
- Send us your
-
- Learn more
-
-
-
- Send us your
Satellite Streak
-
-
- Learn more
-
-
-
- );
-};
-
-export default LoadingMessage;
diff --git a/src/components/atoms/NavBar/NavBar.tsx b/src/components/atoms/NavBar/NavBar.tsx
deleted file mode 100644
index 3027859..0000000
--- a/src/components/atoms/NavBar/NavBar.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-const Navbar = () => {
- return (
-
- );
-};
-
-export default Navbar;
diff --git a/src/components/atoms/UploadElements/UploadDragnDrop.tsx b/src/components/atoms/UploadElements/UploadDragnDrop.tsx
deleted file mode 100644
index b8ae99b..0000000
--- a/src/components/atoms/UploadElements/UploadDragnDrop.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-const UploadDragDrop: React.FC = () => {
- return (
- Loading...
-
-
- );
-};
-
-export default UploadDragDrop;
diff --git a/src/components/atoms/UploadElements/UploadElements.tsx b/src/components/atoms/UploadElements/UploadElements.tsx
deleted file mode 100644
index db57ff9..0000000
--- a/src/components/atoms/UploadElements/UploadElements.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-import UploadDragnDrop from "src/components/atoms/UploadElements/UploadDragnDrop";
-import UploadForm from "src/components/atoms/UploadElements/UploadForm";
-
-const UploadElements: React.FC = () => {
- return (
-
- {/* Logo image */}
- 
-
- {/* Choose files button */}
-
-
-
- {/* Text below the button */}
-
-
-
- {/* Choose files button */}
-
-
-
- {/* Text below the button */}
- or drag here
-
- {/* Line below the navbar */}
-
- {/* Upload Title */}
-
- );
-};
-
-export default UploadElements;
diff --git a/src/components/atoms/UploadElements/UploadForm.tsx b/src/components/atoms/UploadElements/UploadForm.tsx
deleted file mode 100644
index 1b895ed..0000000
--- a/src/components/atoms/UploadElements/UploadForm.tsx
+++ /dev/null
@@ -1,85 +0,0 @@
-const UploadForm: React.FC = () => {
- return (
- Upload
- - {/* Upload Container */} -
- {/* Upload Drag and Drop Section */}
-
-
-
- {/* Upload Form Section */}
-
-
-
-
- );
-};
-
-export default UploadForm;
diff --git a/src/components/features/Gallery/GalleryHeader.tsx b/src/components/features/Gallery/GalleryHeader.tsx
index 8981967..d8cd8a0 100644
--- a/src/components/features/Gallery/GalleryHeader.tsx
+++ b/src/components/features/Gallery/GalleryHeader.tsx
@@ -7,7 +7,7 @@ const GalleryHeader: React.FC = () => {
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Gallery Search
-
+ 
);
diff --git a/src/components/features/Home/spacePic.png b/src/components/features/Home/spacePic.png
new file mode 100644
index 0000000000000000000000000000000000000000..81590e863eba023dc4bc3b060b02a81827e8b615
GIT binary patch
literal 582021
zcmV)8K*qm`P)
+