From cf4ca50471d1b779e100bc2295a5b98dbe81d4bf Mon Sep 17 00:00:00 2001
From: CarmenvStaden <cvanstaden@ufl.edu>
Date: Wed, 13 Nov 2024 13:43:16 -0500
Subject: [PATCH] Page2-5 and universal inputs

---
 src/App.js                              |   8 ++
 src/components/GlobalStyles/Elements.js |  45 +++++++-
 src/components/Page1/Page1.js           | 111 ++++++++++++++-----
 src/components/Page2/Page2.js           | 139 ++++++++++++++++++++++++
 src/components/Page3/Page3.js           | 139 ++++++++++++++++++++++++
 src/components/Page4/Page4.js           | 139 ++++++++++++++++++++++++
 src/components/Page5/Page5.js           | 139 ++++++++++++++++++++++++
 7 files changed, 689 insertions(+), 31 deletions(-)
 create mode 100644 src/components/Page2/Page2.js
 create mode 100644 src/components/Page3/Page3.js
 create mode 100644 src/components/Page4/Page4.js
 create mode 100644 src/components/Page5/Page5.js

diff --git a/src/App.js b/src/App.js
index 08c19bc..99aeed1 100644
--- a/src/App.js
+++ b/src/App.js
@@ -4,6 +4,10 @@ import SignIn from './components/SignIn/SignIn';
 import Register from './components/Register/Register';
 import Home from './components/Home/Home';
 import Page1 from './components/Page1/Page1';
+import Page2 from './components/Page2/Page2';
+import Page3 from './components/Page3/Page3';
+import Page4 from './components/Page4/Page4';
+import Page5 from './components/Page5/Page5';
 
 function App() {
   return (
@@ -13,6 +17,10 @@ function App() {
         <Route path="/register" element={<Register />} />
         <Route path="/home" element={<Home />} />
         <Route path="/page1" element={<Page1 />} />
+        <Route path="/page2" element={<Page2 />} />
+        <Route path="/page3" element={<Page3 />} />
+        <Route path="/page4" element={<Page4 />} />
+        <Route path="/page5" element={<Page5 />} />
       </Routes>
     </Router>
   );
diff --git a/src/components/GlobalStyles/Elements.js b/src/components/GlobalStyles/Elements.js
index dab64f1..3228229 100644
--- a/src/components/GlobalStyles/Elements.js
+++ b/src/components/GlobalStyles/Elements.js
@@ -231,19 +231,33 @@ export const PageContainer = styled.div`
   min-height: 100vh;
 `;
 
-// Form Container
+// Form Container (Aligned Horizontally)
 export const FormContainer = styled.form`
   display: flex;
-  flex-direction: column;
-  gap: 20px;
+  flex-direction: row;   /* Align elements horizontally */
+  gap: 20px;             /* Space between elements */
   margin: 20px 0;
-  align-items: center;
+  align-items: center;   /* Center align the elements vertically */
+  justify-content: center; /* Center align the elements horizontally */
+  flex-wrap: wrap;       /* Allow wrapping on smaller screens */
 `;
 
+// Form Container (Aligned Vertically)
+export const FormContainer2 = styled.form`
+  display: flex;
+  flex-direction: column;   /* Align elements horizontally */
+  gap: 20px;             /* Space between elements */
+  margin: 20px 0;
+  align-items: center;   /* Center align the elements vertically */
+  justify-content: center; /* Center align the elements horizontally */
+  flex-wrap: wrap;       /* Allow wrapping on smaller screens */
+`;
+
+
 // Select (Drop-Down Menu)
 export const Select = styled.select`
   padding: 10px;
-  width: 200px;
+  width: 150px;
   border-radius: 4px;
   border: 1px solid ${({ theme }) => theme.colors.primary};
   font-size: 16px;
@@ -269,4 +283,25 @@ export const TabImageAlt = styled.img`
   height: 80%;        /* Set a fixed height */
   border-radius: 4px;
   justify-content: center;
+`;
+
+export const Input = styled.input`
+  width: 150px;
+  padding: 10px 15px;
+  margin: 10px 0;
+  border: 1px solid #ccc;
+  border-radius: 5px;
+  font-size: 16px;
+  color: #333;
+  background-color: #f9f9f9;
+  outline: none;
+
+  &:focus {
+    border-color: #007bff;
+    box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
+  }
+
+  &::placeholder {
+    color: #999;
+  }
 `;
\ No newline at end of file
diff --git a/src/components/Page1/Page1.js b/src/components/Page1/Page1.js
index a90b5d4..b231a76 100644
--- a/src/components/Page1/Page1.js
+++ b/src/components/Page1/Page1.js
@@ -6,18 +6,27 @@ import {
   PageTitle,
   PageDescription,
   FormContainer,
+  FormContainer2,
   Select,
   SubmitButton,
-  TabImageAlt
+  TabImageAlt,
+  Input
 } from '../GlobalStyles/Elements';
 
 function Page1() {
   const [selection, setSelection] = useState({
-    option1: '',
-    option2: '',
-    option3: ''
+    country: '',
+    categoryId: '',
+    startDate: '14-11-17',
+    endDate: '14-06-18',
+    tag: ''
   });
 
+  // Sample options (replace with your actual values)
+  const countries = ['USA', 'Canada', 'UK', 'Australia'];
+  const categories = ['1', '2', '10', '15', '17', '20', '22']; // Example category IDs
+
+  // Handle input changes
   const handleChange = (e) => {
     const { name, value } = e.target;
     setSelection((prev) => ({
@@ -26,9 +35,31 @@ function Page1() {
     }));
   };
 
+  // Handle form submission
   const handleSubmit = (e) => {
     e.preventDefault();
-    alert(`Selected options: ${selection.option1}, ${selection.option2}, ${selection.option3}`);
+
+    // Format date inputs if needed
+    const formattedStartDate = formatToOracleDate(selection.startDate);
+    const formattedEndDate = formatToOracleDate(selection.endDate);
+
+    // Construct query parameters
+    const query = {
+      country: selection.country || '%',
+      categoryId: selection.categoryId || null,
+      startDate: formattedStartDate,
+      endDate: formattedEndDate,
+      tag: selection.tag || '%'
+    };
+
+    alert(`Query Parameters: ${JSON.stringify(query)}`);
+    // You can now use `query` to make a request to your Oracle database.
+  };
+
+  // Helper function to format date to 'DD-MM-YY'
+  const formatToOracleDate = (date) => {
+    const [year, month, day] = date.split('-');
+    return `${day}-${month}-${year.slice(2)}`; // Convert 'YYYY-MM-DD' to 'DD-MM-YY'
   };
 
   return (
@@ -40,38 +71,66 @@ function Page1() {
 
       {/* Page Title and Description */}
       <PageTitle>Page 1</PageTitle>
-      <PageDescription>This page allows you to make selections from the drop-down menus.</PageDescription>
+      <PageDescription>Select your search criteria for trending videos.</PageDescription>
 
       {/* Form Section */}
       <FormContainer onSubmit={handleSubmit}>
-        <Select name="option1" value={selection.option1} onChange={handleChange}>
-          <option value="">Select Option 1</option>
-          <option value="Option 1A">Option 1A</option>
-          <option value="Option 1B">Option 1B</option>
-          <option value="Option 1C">Option 1C</option>
+        {/* Country Dropdown */}
+        <Select name="country" value={selection.country} onChange={handleChange}>
+          <option value="">Select Country</option>
+          {countries.map((country) => (
+            <option key={country} value={country}>
+              {country}
+            </option>
+          ))}
         </Select>
 
-        <Select name="option2" value={selection.option2} onChange={handleChange}>
-          <option value="">Select Option 2</option>
-          <option value="Option 2A">Option 2A</option>
-          <option value="Option 2B">Option 2B</option>
-          <option value="Option 2C">Option 2C</option>
+        {/* Category ID Dropdown */}
+        <Select name="categoryId" value={selection.categoryId} onChange={handleChange}>
+          <option value="">Select Category ID</option>
+          {categories.map((id) => (
+            <option key={id} value={id}>
+              {id}
+            </option>
+          ))}
         </Select>
 
-        <Select name="option3" value={selection.option3} onChange={handleChange}>
-          <option value="">Select Option 3</option>
-          <option value="Option 3A">Option 3A</option>
-          <option value="Option 3B">Option 3B</option>
-          <option value="Option 3C">Option 3C</option>
-        </Select>
+        {/* Start Date Input */}
+        <Input
+          type="date"
+          name="startDate"
+          value={selection.startDate}
+          onChange={handleChange}
+          placeholder="Start Date"
+        />
+
+        {/* End Date Input */}
+        <Input
+          type="date"
+          name="endDate"
+          value={selection.endDate}
+          onChange={handleChange}
+          placeholder="End Date"
+        />
+
+        {/* Tag Input with Autocomplete (Basic Implementation) */}
+        <Input
+          type="text"
+          name="tag"
+          value={selection.tag}
+          onChange={handleChange}
+          placeholder="Enter a tag (e.g., 'comedy', 'news')"
+        />
 
-        <SubmitButton type="submit">Submit</SubmitButton>
-        
-        {/* Image Section */}
-        <TabImageAlt src="/images/tab1.jpg" alt="Tab 1 Image" />
 
       </FormContainer>
+      <FormContainer2>
+        {/* Submit Button */}
+        <SubmitButton type="submit">Submit</SubmitButton>
 
+        {/* Image Section */}
+        <TabImageAlt src="/images/tab1.jpg" alt="Tab 1 Image" />
+      </FormContainer2>
 
     </PageContainer>
   );
diff --git a/src/components/Page2/Page2.js b/src/components/Page2/Page2.js
new file mode 100644
index 0000000..2c505ea
--- /dev/null
+++ b/src/components/Page2/Page2.js
@@ -0,0 +1,139 @@
+import React, { useState } from 'react';
+import {
+  PageContainer,
+  Header,
+  Icon,
+  PageTitle,
+  PageDescription,
+  FormContainer,
+  FormContainer2,
+  Select,
+  SubmitButton,
+  TabImageAlt,
+  Input
+} from '../GlobalStyles/Elements';
+
+function Page2() {
+  const [selection, setSelection] = useState({
+    country: '',
+    categoryId: '',
+    startDate: '14-11-17',
+    endDate: '14-06-18',
+    tag: ''
+  });
+
+  // Sample options (replace with your actual values)
+  const countries = ['USA', 'Canada', 'UK', 'Australia'];
+  const categories = ['1', '2', '10', '15', '17', '20', '22']; // Example category IDs
+
+  // Handle input changes
+  const handleChange = (e) => {
+    const { name, value } = e.target;
+    setSelection((prev) => ({
+      ...prev,
+      [name]: value
+    }));
+  };
+
+  // Handle form submission
+  const handleSubmit = (e) => {
+    e.preventDefault();
+
+    // Format date inputs if needed
+    const formattedStartDate = formatToOracleDate(selection.startDate);
+    const formattedEndDate = formatToOracleDate(selection.endDate);
+
+    // Construct query parameters
+    const query = {
+      country: selection.country || '%',
+      categoryId: selection.categoryId || null,
+      startDate: formattedStartDate,
+      endDate: formattedEndDate,
+      tag: selection.tag || '%'
+    };
+
+    alert(`Query Parameters: ${JSON.stringify(query)}`);
+    // You can now use `query` to make a request to your Oracle database.
+  };
+
+  // Helper function to format date to 'DD-MM-YY'
+  const formatToOracleDate = (date) => {
+    const [year, month, day] = date.split('-');
+    return `${day}-${month}-${year.slice(2)}`; // Convert 'YYYY-MM-DD' to 'DD-MM-YY'
+  };
+
+  return (
+    <PageContainer>
+      {/* Logo and Navigation */}
+      <Header>
+        <Icon to="/home">YouTrend</Icon>
+      </Header>
+
+      {/* Page Title and Description */}
+      <PageTitle>Page 2</PageTitle>
+      <PageDescription>Select your search criteria for trending videos.</PageDescription>
+
+      {/* Form Section */}
+      <FormContainer onSubmit={handleSubmit}>
+        {/* Country Dropdown */}
+        <Select name="country" value={selection.country} onChange={handleChange}>
+          <option value="">Select Country</option>
+          {countries.map((country) => (
+            <option key={country} value={country}>
+              {country}
+            </option>
+          ))}
+        </Select>
+
+        {/* Category ID Dropdown */}
+        <Select name="categoryId" value={selection.categoryId} onChange={handleChange}>
+          <option value="">Select Category ID</option>
+          {categories.map((id) => (
+            <option key={id} value={id}>
+              {id}
+            </option>
+          ))}
+        </Select>
+
+        {/* Start Date Input */}
+        <Input
+          type="date"
+          name="startDate"
+          value={selection.startDate}
+          onChange={handleChange}
+          placeholder="Start Date"
+        />
+
+        {/* End Date Input */}
+        <Input
+          type="date"
+          name="endDate"
+          value={selection.endDate}
+          onChange={handleChange}
+          placeholder="End Date"
+        />
+
+        {/* Tag Input with Autocomplete (Basic Implementation) */}
+        <Input
+          type="text"
+          name="tag"
+          value={selection.tag}
+          onChange={handleChange}
+          placeholder="Enter a tag (e.g., 'comedy', 'news')"
+        />
+
+
+      </FormContainer>
+      <FormContainer2>
+        {/* Submit Button */}
+        <SubmitButton type="submit">Submit</SubmitButton>
+
+        {/* Image Section */}
+        <TabImageAlt src="/images/tab2.jpg" alt="Tab 2 Image" />
+      </FormContainer2>
+
+    </PageContainer>
+  );
+}
+
+export default Page2;
diff --git a/src/components/Page3/Page3.js b/src/components/Page3/Page3.js
new file mode 100644
index 0000000..7c7ffbc
--- /dev/null
+++ b/src/components/Page3/Page3.js
@@ -0,0 +1,139 @@
+import React, { useState } from 'react';
+import {
+  PageContainer,
+  Header,
+  Icon,
+  PageTitle,
+  PageDescription,
+  FormContainer,
+  FormContainer2,
+  Select,
+  SubmitButton,
+  TabImageAlt,
+  Input
+} from '../GlobalStyles/Elements';
+
+function Page3() {
+  const [selection, setSelection] = useState({
+    country: '',
+    categoryId: '',
+    startDate: '14-11-17',
+    endDate: '14-06-18',
+    tag: ''
+  });
+
+  // Sample options (replace with your actual values)
+  const countries = ['USA', 'Canada', 'UK', 'Australia'];
+  const categories = ['1', '2', '10', '15', '17', '20', '22']; // Example category IDs
+
+  // Handle input changes
+  const handleChange = (e) => {
+    const { name, value } = e.target;
+    setSelection((prev) => ({
+      ...prev,
+      [name]: value
+    }));
+  };
+
+  // Handle form submission
+  const handleSubmit = (e) => {
+    e.preventDefault();
+
+    // Format date inputs if needed
+    const formattedStartDate = formatToOracleDate(selection.startDate);
+    const formattedEndDate = formatToOracleDate(selection.endDate);
+
+    // Construct query parameters
+    const query = {
+      country: selection.country || '%',
+      categoryId: selection.categoryId || null,
+      startDate: formattedStartDate,
+      endDate: formattedEndDate,
+      tag: selection.tag || '%'
+    };
+
+    alert(`Query Parameters: ${JSON.stringify(query)}`);
+    // You can now use `query` to make a request to your Oracle database.
+  };
+
+  // Helper function to format date to 'DD-MM-YY'
+  const formatToOracleDate = (date) => {
+    const [year, month, day] = date.split('-');
+    return `${day}-${month}-${year.slice(2)}`; // Convert 'YYYY-MM-DD' to 'DD-MM-YY'
+  };
+
+  return (
+    <PageContainer>
+      {/* Logo and Navigation */}
+      <Header>
+        <Icon to="/home">YouTrend</Icon>
+      </Header>
+
+      {/* Page Title and Description */}
+      <PageTitle>Page 3</PageTitle>
+      <PageDescription>Select your search criteria for trending videos.</PageDescription>
+
+      {/* Form Section */}
+      <FormContainer onSubmit={handleSubmit}>
+        {/* Country Dropdown */}
+        <Select name="country" value={selection.country} onChange={handleChange}>
+          <option value="">Select Country</option>
+          {countries.map((country) => (
+            <option key={country} value={country}>
+              {country}
+            </option>
+          ))}
+        </Select>
+
+        {/* Category ID Dropdown */}
+        <Select name="categoryId" value={selection.categoryId} onChange={handleChange}>
+          <option value="">Select Category ID</option>
+          {categories.map((id) => (
+            <option key={id} value={id}>
+              {id}
+            </option>
+          ))}
+        </Select>
+
+        {/* Start Date Input */}
+        <Input
+          type="date"
+          name="startDate"
+          value={selection.startDate}
+          onChange={handleChange}
+          placeholder="Start Date"
+        />
+
+        {/* End Date Input */}
+        <Input
+          type="date"
+          name="endDate"
+          value={selection.endDate}
+          onChange={handleChange}
+          placeholder="End Date"
+        />
+
+        {/* Tag Input with Autocomplete (Basic Implementation) */}
+        <Input
+          type="text"
+          name="tag"
+          value={selection.tag}
+          onChange={handleChange}
+          placeholder="Enter a tag (e.g., 'comedy', 'news')"
+        />
+
+
+      </FormContainer>
+      <FormContainer2>
+        {/* Submit Button */}
+        <SubmitButton type="submit">Submit</SubmitButton>
+
+        {/* Image Section */}
+        <TabImageAlt src="/images/tab3.jpg" alt="Tab 3 Image" />
+      </FormContainer2>
+
+    </PageContainer>
+  );
+}
+
+export default Page3;
diff --git a/src/components/Page4/Page4.js b/src/components/Page4/Page4.js
new file mode 100644
index 0000000..defde0b
--- /dev/null
+++ b/src/components/Page4/Page4.js
@@ -0,0 +1,139 @@
+import React, { useState } from 'react';
+import {
+  PageContainer,
+  Header,
+  Icon,
+  PageTitle,
+  PageDescription,
+  FormContainer,
+  FormContainer2,
+  Select,
+  SubmitButton,
+  TabImageAlt,
+  Input
+} from '../GlobalStyles/Elements';
+
+function Page4() {
+  const [selection, setSelection] = useState({
+    country: '',
+    categoryId: '',
+    startDate: '14-11-17',
+    endDate: '14-06-18',
+    tag: ''
+  });
+
+  // Sample options (replace with your actual values)
+  const countries = ['USA', 'Canada', 'UK', 'Australia'];
+  const categories = ['1', '2', '10', '15', '17', '20', '22']; // Example category IDs
+
+  // Handle input changes
+  const handleChange = (e) => {
+    const { name, value } = e.target;
+    setSelection((prev) => ({
+      ...prev,
+      [name]: value
+    }));
+  };
+
+  // Handle form submission
+  const handleSubmit = (e) => {
+    e.preventDefault();
+
+    // Format date inputs if needed
+    const formattedStartDate = formatToOracleDate(selection.startDate);
+    const formattedEndDate = formatToOracleDate(selection.endDate);
+
+    // Construct query parameters
+    const query = {
+      country: selection.country || '%',
+      categoryId: selection.categoryId || null,
+      startDate: formattedStartDate,
+      endDate: formattedEndDate,
+      tag: selection.tag || '%'
+    };
+
+    alert(`Query Parameters: ${JSON.stringify(query)}`);
+    // You can now use `query` to make a request to your Oracle database.
+  };
+
+  // Helper function to format date to 'DD-MM-YY'
+  const formatToOracleDate = (date) => {
+    const [year, month, day] = date.split('-');
+    return `${day}-${month}-${year.slice(2)}`; // Convert 'YYYY-MM-DD' to 'DD-MM-YY'
+  };
+
+  return (
+    <PageContainer>
+      {/* Logo and Navigation */}
+      <Header>
+        <Icon to="/home">YouTrend</Icon>
+      </Header>
+
+      {/* Page Title and Description */}
+      <PageTitle>Page 4</PageTitle>
+      <PageDescription>Select your search criteria for trending videos.</PageDescription>
+
+      {/* Form Section */}
+      <FormContainer onSubmit={handleSubmit}>
+        {/* Country Dropdown */}
+        <Select name="country" value={selection.country} onChange={handleChange}>
+          <option value="">Select Country</option>
+          {countries.map((country) => (
+            <option key={country} value={country}>
+              {country}
+            </option>
+          ))}
+        </Select>
+
+        {/* Category ID Dropdown */}
+        <Select name="categoryId" value={selection.categoryId} onChange={handleChange}>
+          <option value="">Select Category ID</option>
+          {categories.map((id) => (
+            <option key={id} value={id}>
+              {id}
+            </option>
+          ))}
+        </Select>
+
+        {/* Start Date Input */}
+        <Input
+          type="date"
+          name="startDate"
+          value={selection.startDate}
+          onChange={handleChange}
+          placeholder="Start Date"
+        />
+
+        {/* End Date Input */}
+        <Input
+          type="date"
+          name="endDate"
+          value={selection.endDate}
+          onChange={handleChange}
+          placeholder="End Date"
+        />
+
+        {/* Tag Input with Autocomplete (Basic Implementation) */}
+        <Input
+          type="text"
+          name="tag"
+          value={selection.tag}
+          onChange={handleChange}
+          placeholder="Enter a tag (e.g., 'comedy', 'news')"
+        />
+
+
+      </FormContainer>
+      <FormContainer2>
+        {/* Submit Button */}
+        <SubmitButton type="submit">Submit</SubmitButton>
+
+        {/* Image Section */}
+        <TabImageAlt src="/images/tab4.jpg" alt="Tab 4 Image" />
+      </FormContainer2>
+
+    </PageContainer>
+  );
+}
+
+export default Page4;
diff --git a/src/components/Page5/Page5.js b/src/components/Page5/Page5.js
new file mode 100644
index 0000000..ec705e5
--- /dev/null
+++ b/src/components/Page5/Page5.js
@@ -0,0 +1,139 @@
+import React, { useState } from 'react';
+import {
+  PageContainer,
+  Header,
+  Icon,
+  PageTitle,
+  PageDescription,
+  FormContainer,
+  FormContainer2,
+  Select,
+  SubmitButton,
+  TabImageAlt,
+  Input
+} from '../GlobalStyles/Elements';
+
+function Page5() {
+  const [selection, setSelection] = useState({
+    country: '',
+    categoryId: '',
+    startDate: '14-11-17',
+    endDate: '14-06-18',
+    tag: ''
+  });
+
+  // Sample options (replace with your actual values)
+  const countries = ['USA', 'Canada', 'UK', 'Australia'];
+  const categories = ['1', '2', '10', '15', '17', '20', '22']; // Example category IDs
+
+  // Handle input changes
+  const handleChange = (e) => {
+    const { name, value } = e.target;
+    setSelection((prev) => ({
+      ...prev,
+      [name]: value
+    }));
+  };
+
+  // Handle form submission
+  const handleSubmit = (e) => {
+    e.preventDefault();
+
+    // Format date inputs if needed
+    const formattedStartDate = formatToOracleDate(selection.startDate);
+    const formattedEndDate = formatToOracleDate(selection.endDate);
+
+    // Construct query parameters
+    const query = {
+      country: selection.country || '%',
+      categoryId: selection.categoryId || null,
+      startDate: formattedStartDate,
+      endDate: formattedEndDate,
+      tag: selection.tag || '%'
+    };
+
+    alert(`Query Parameters: ${JSON.stringify(query)}`);
+    // You can now use `query` to make a request to your Oracle database.
+  };
+
+  // Helper function to format date to 'DD-MM-YY'
+  const formatToOracleDate = (date) => {
+    const [year, month, day] = date.split('-');
+    return `${day}-${month}-${year.slice(2)}`; // Convert 'YYYY-MM-DD' to 'DD-MM-YY'
+  };
+
+  return (
+    <PageContainer>
+      {/* Logo and Navigation */}
+      <Header>
+        <Icon to="/home">YouTrend</Icon>
+      </Header>
+
+      {/* Page Title and Description */}
+      <PageTitle>Page 5</PageTitle>
+      <PageDescription>Select your search criteria for trending videos.</PageDescription>
+
+      {/* Form Section */}
+      <FormContainer onSubmit={handleSubmit}>
+        {/* Country Dropdown */}
+        <Select name="country" value={selection.country} onChange={handleChange}>
+          <option value="">Select Country</option>
+          {countries.map((country) => (
+            <option key={country} value={country}>
+              {country}
+            </option>
+          ))}
+        </Select>
+
+        {/* Category ID Dropdown */}
+        <Select name="categoryId" value={selection.categoryId} onChange={handleChange}>
+          <option value="">Select Category ID</option>
+          {categories.map((id) => (
+            <option key={id} value={id}>
+              {id}
+            </option>
+          ))}
+        </Select>
+
+        {/* Start Date Input */}
+        <Input
+          type="date"
+          name="startDate"
+          value={selection.startDate}
+          onChange={handleChange}
+          placeholder="Start Date"
+        />
+
+        {/* End Date Input */}
+        <Input
+          type="date"
+          name="endDate"
+          value={selection.endDate}
+          onChange={handleChange}
+          placeholder="End Date"
+        />
+
+        {/* Tag Input with Autocomplete (Basic Implementation) */}
+        <Input
+          type="text"
+          name="tag"
+          value={selection.tag}
+          onChange={handleChange}
+          placeholder="Enter a tag (e.g., 'comedy', 'news')"
+        />
+
+
+      </FormContainer>
+      <FormContainer2>
+        {/* Submit Button */}
+        <SubmitButton type="submit">Submit</SubmitButton>
+
+        {/* Image Section */}
+        <TabImageAlt src="/images/tab5.jpg" alt="Tab 5 Image" />
+      </FormContainer2>
+
+    </PageContainer>
+  );
+}
+
+export default Page5;