Aishwarya frontendcode

astro/.astro/settings.json

@@ -0,0 +1,5 @@
+{
+	"_variables": {
+		"lastUpdateCheck": 1737282968791
+	}
+}

astro/.astro/types.d.ts

@@ -0,0 +1 @@
+/// <reference types="astro/client" />

astro/.gitIgnore

@@ -0,0 +1,36 @@
+# Node.js and npm-related files
+node_modules/
+npm-debug.log
+yarn-debug.log
+yarn-error.log
+
+# Environment files
+.env
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+# Build output
+dist/
+build/
+
+# Vite / Astro caches
+.vite/
+*.tsbuildinfo
+
+# Log files
+*.log
+
+# OS generated files
+.DS_Store
+Thumbs.db
+
+# .astro build output
+astro/dist/
+
+# IntelliJ IDEA
+.idea/
+
+# VSCode settings
+.vscode/

astro/src/Astro.jsx

@@ -1,15 +1,29 @@
-import React from "react";
-import Navbar from "../../intergalactic-iron/src/components/Navbar.jsx";
-import SearchBar from "../../intergalactic-iron/src/components/Searchbar.jsx";
-import ContentGrid from "../../intergalactic-iron/src/components/ContentGrid.jsx";
+import React, { useState } from "react";
+import Navbar from "./components/Navbar";
+import ContentGrid from "./components/ContentGrid";
+import FilterPage from "./components/FilterPage";
+import SearchBar from "./components/Searchbar";
 
 function App() {
+  const [showAdvancedSearch, setShowAdvancedSearch] = useState(false);
   return (
     <div className="font-sans bg-gray-50 text-gray-800 min-h-screen">
-      <Navbar />
+      {/* Pass state and setter to Navbar */}
+      <Navbar
+        showAdvancedSearch={showAdvancedSearch}
+        setShowAdvancedSearch={setShowAdvancedSearch}
+      />
       <div className="max-w-7xl mx-auto px-6 py-12">
-        <SearchBar />
-        <ContentGrid />
+
+        {/* Conditionally render FilterPage */}
+        {showAdvancedSearch ? (
+          <FilterPage />
+        ) : (
+          <>
+            <SearchBar />
+            <ContentGrid />
+          </>
+        )}
       </div>
     </div>
   );

astro/src/components/FilterPage.css

@@ -0,0 +1,39 @@
+.filter-row {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 30px;
+    gap: 15px;
+    flex-wrap: wrap;
+  }
+
+  .filter-group {
+    display: flex;
+    gap: 15px;
+    flex-wrap: wrap;
+  }
+
+  .search-btn {
+    margin-left: auto;
+    padding: 12px 25px;
+    font-size: 14px;
+    font-weight: 600;
+    background-color: #007bff;
+    color: white;
+    border: none;
+    border-radius: 8px;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    box-shadow: 0 4px 6px rgba(0, 123, 255, 0.3);
+  }
+
+  .search-btn:hover {
+    background-color: #0056b3;
+    box-shadow: 0 6px 12px rgba(0, 123, 255, 0.5);
+  }
+
+
+  .search-btn:focus {
+    outline: none;
+  }
+

astro/src/components/FilterPage.jsx

@@ -0,0 +1,158 @@
+import { useState } from 'react';
+import ContentGrid from './ContentGrid';
+
+const FilterPage = () => {
+  const [filterType, setFilterType] = useState('month'); // 'month' or 'issue'
+  const [startMonth, setStartMonth] = useState('');
+  const [startYear, setStartYear] = useState('');
+  const [endMonth, setEndMonth] = useState('');
+  const [endYear, setEndYear] = useState('');
+  const [selectedIssue, setSelectedIssue] = useState('');
+  const [selectedMonth, setSelectedMonth] = useState('');
+  const [results, setResults] = useState([]);
+
+  const handleFilterTypeChange = (e) => {
+    const selectedType = e.target.value;
+    setFilterType(selectedType);
+    setStartMonth('');
+    setStartYear('');
+    setEndMonth('');
+    setEndYear('');
+    setSelectedIssue('');
+    setSelectedMonth('');
+  };
+
+  const handleSearch = () => {
+    const newResults = [];
+    if (filterType === 'month') {
+      if (startMonth && startYear && endMonth && endYear) {
+        newResults.push(`Results from ${startMonth}/${startYear} to ${endMonth}/${endYear}`);
+      } else {
+        newResults.push('Please select both start and end months and years.');
+      }
+    } else if (filterType === 'issue') {
+      if (selectedIssue && selectedMonth) {
+        newResults.push(`Results for Issue #${selectedIssue} in ${selectedMonth}`);
+      } else {
+        newResults.push('Please select an issue number and month.');
+      }
+    }
+    setResults(newResults);
+  };
+
+
+  return (
+    <div className="w-full p-6 bg-white rounded-lg shadow-lg">
+      {/* Filter Type Selection */}
+      <div className="flex space-x-4 mb-6">
+        <label className="inline-flex items-center space-x-2">
+          <input
+            type="radio"
+            value="month"
+            checked={filterType === 'month'}
+            onChange={handleFilterTypeChange}
+            className="form-radio h-5 w-5 text-blue-600"
+          />
+          <span>Month Range</span>
+        </label>
+        <label className="inline-flex items-center space-x-2">
+          <input
+            type="radio"
+            value="issue"
+            checked={filterType === 'issue'}
+            onChange={handleFilterTypeChange}
+            className="form-radio h-5 w-5 text-blue-600"
+          />
+          <span>Issue</span>
+        </label>
+      </div>
+
+      {/* Month Range Filter */}
+      {filterType === 'month' && (
+        <div className="space-y-4 mb-6">
+          <div className="flex space-x-4">
+            <select
+              value={startMonth}
+              onChange={(e) => setStartMonth(e.target.value)}
+              className="border border-gray-300 p-2 rounded-md w-1/4"
+            >
+              <option value="">Start Month</option>
+              <option value="01">January</option>
+              <option value="02">February</option>
+              {/* Other months */}
+            </select>
+            <select
+              value={startYear}
+              onChange={(e) => setStartYear(e.target.value)}
+              className="border border-gray-300 p-2 rounded-md w-1/4"
+            >
+              <option value="">Start Year</option>
+              <option value="2024">2024</option>
+              {/* Other years */}
+            </select>
+            {/* End Month and Year */}
+            <select
+              value={endMonth}
+              onChange={(e) => setEndMonth(e.target.value)}
+              className="border border-gray-300 p-2 rounded-md w-1/4"
+            >
+              <option value="">End Month</option>
+              <option value="01">January</option>
+              {/* Other months */}
+            </select>
+            <select
+              value={endYear}
+              onChange={(e) => setEndYear(e.target.value)}
+              className="border border-gray-300 p-2 rounded-md w-1/4"
+            >
+              <option value="">End Year</option>
+              <option value="2024">2024</option>
+              {/* Other years */}
+            </select>
+            <button
+              onClick={handleSearch}
+              className="bg-blue-600 text-white px-6 py-2 rounded-md hover:bg-blue-700 transition duration-300"
+            >
+              Search
+            </button>
+          </div>
+        </div>
+      )}
+
+      {/* Issue Filter */}
+      {filterType === 'issue' && (
+        <div className="space-y-4 mb-6">
+          <div className="flex space-x-4">
+            <input
+              type="text"
+              placeholder="Enter Issue Number"
+              value={selectedIssue}
+              onChange={(e) => setSelectedIssue(e.target.value)}
+              className="border border-gray-300 p-2 rounded-md w-1/4"
+            />
+            <select
+              value={selectedMonth}
+              onChange={(e) => setSelectedMonth(e.target.value)}
+              className="border border-gray-300 p-2 rounded-md w-1/4"
+            >
+              <option value="">Select Month</option>
+              <option value="01">January</option>
+              {/* Other months */}
+            </select>
+            <button
+              onClick={handleSearch}
+              className="bg-blue-600 text-white px-6 py-2 rounded-md hover:bg-blue-700 transition duration-300"
+            >
+              Search
+            </button>
+          </div>
+        </div>
+      )}
+
+      {/* Content Grid */}
+      <ContentGrid />
+    </div>
+  );
+};
+
+export default FilterPage;

astro/src/components/Navbar.jsx

@@ -1,10 +1,12 @@
 import React from "react";
 
-function Navbar() {
+function Navbar({ showAdvancedSearch, setShowAdvancedSearch }) {
   return (
     <nav className="bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500 shadow-md">
       <div className="max-w-7xl mx-auto px-6 py-4 flex justify-between items-center">
-        <h1 className="text-3xl font-extrabold text-white tracking-wide">Filtr Kommunikation</h1>
+        <h1 className="text-3xl font-extrabold text-white tracking-wide">
+          Filtr Kommunikation
+        </h1>
         <ul className="flex space-x-6 text-white">
           <li>
             <a href="#" className="hover:text-yellow-300 transition">
@@ -22,12 +24,16 @@ function Navbar() {
             </a>
           </li>
           <li>
-            <a href="#" className="hover:text-yellow-300 transition">
-              Music
-            </a>
+            <button
+              onClick={() => setShowAdvancedSearch(!showAdvancedSearch)}
+              className="hover:text-yellow-300 transition"
+            >
+              {showAdvancedSearch ? "Close Advanced Search" : "Advanced Search"}
+            </button>
           </li>
         </ul>
       </div>
+
     </nav>
   );
 }

astro/src/pages/index.astro

@@ -1,13 +1,16 @@
 ---
-import App from "../Astro.jsx";
+// Import the React component (App.jsx)
+import App from '../Astro.jsx';  // Make sure this path is correct for your project structure
 ---
 
-<html>
+<html lang="en">
   <head>
+    <meta charset="UTF-8" />
     <title>Filtr Kommunikation</title>
-    <link href="/src/styles/tailwind.css" rel="stylesheet">
+    <link href="/src/styles/tailwind.css" rel="stylesheet" />
   </head>
   <body>
-    <App />
+    <!-- Ensure the React component is loaded client-side -->
+    <App client:load />  <!-- Use client:load to load the React component on the client-side -->
   </body>
 </html>