feat: 🎸 special orchid component

src/App.jsx

@@ -5,6 +5,7 @@ import Footer from "./components/Footer/Footer";
 import Content from "./components/MainContent/Content";
 import { Route, Routes } from "react-router-dom";
 import OrchidDetail from "./components/OrchidDetail";
+import SpecialOrchid from "./components/SpecialOrchid";
 
 function App() {
   const [count, setCount] = useState(0);
@@ -14,6 +15,7 @@ function App() {
       <Header />
       <Routes>
         <Route path='/fer-lab1/' element={<Content />} />
+        <Route path='/fer-lab1/natural' element={<SpecialOrchid />} />
         <Route path='/fer-lab1/:id' element={<OrchidDetail />}></Route>
       </Routes>
       <Footer />

src/components/Header/Header.jsx

@@ -20,6 +20,10 @@ const pages = [
     name: "Home",
     path: "/fer-lab1/",
   },
+  {
+    name: "Special",
+    path: "/fer-lab1/natural",
+  },
   {
     name: "About",
     path: "/fer-lab1/about",

src/components/MainContent/Content.jsx

@@ -1,4 +1,4 @@
-import { Container, Grid } from "@mui/joy";
+import { Grid } from "@mui/joy";
 import React from "react";
 import { Orchids } from "../../ListOfOrchids";
 import OrchidCard from "./OrchidCard";
@@ -19,7 +19,7 @@ export default function Content() {
         padding: 2,
         width: "100%",
         margin: "0 auto",
-        backgroundColor: theme.mainContent.backgroundColor
+        backgroundColor: theme.mainContent.backgroundColor,
       }}
     >
       {Orchids.map((orchid) => {

src/components/SpecialOrchid.jsx

@@ -0,0 +1,36 @@
+import { Grid } from "@mui/joy";
+import React from "react";
+import { Orchids } from "../ListOfOrchids";
+import OrchidCard from "./MainContent/OrchidCard";
+import { useContext } from "react";
+import { ThemeContext } from "../themes/ThemeContext";
+
+export default function SpecialOrchid() {
+  const { theme } = useContext(ThemeContext);
+
+  //Filter orchids to only include special ones
+  const specialOrchids = Orchids.filter((orchid) => orchid.isSpecial);
+  return (
+    <Grid
+      container
+      spacing={{ xs: 2, md: 3, lg: 4 }}
+      // columns={{ xs: 1, sm: 2, md: 3, lg: 4 }}
+      sx={{
+        flexGrow: 1,
+        justifyContent: "center",
+        padding: 2,
+        width: "100%",
+        margin: "0 auto",
+        backgroundColor: theme.mainContent.backgroundColor,
+      }}
+    >
+      {specialOrchids.map((orchid) => {
+        return (
+          <Grid key={orchid.Id} size={{ xs: 1, sm: 3, md: 4 }}>
+            <OrchidCard key={orchid.Id} orchid={orchid} />
+          </Grid>
+        );
+      })}
+    </Grid>
+  );
+}