adjust events searchbar on small screen

SpaceyaTech · Jun 11, 2024 · ebe5733 · ebe5733
1 parent bddf1e9
commit ebe5733
Show file tree

Hide file tree

Showing 4 changed files with 77 additions and 79 deletions.
diff --git a/src/APP/components/Footer.jsx b/src/APP/components/Footer.jsx
@@ -1,14 +1,80 @@
-/* eslint-disable function-paren-newline */
-/* eslint-disable import/no-cycle */
-/* eslint-disable react/jsx-one-expression-per-line */
-/* eslint-disable implicit-arrow-linebreak */
 /* eslint-disable no-confusing-arrow */
 import React from "react";
+import {
+  FaFacebook,
+  FaInstagram,
+  FaLinkedin,
+  FaYoutube,
+  FaSpotify,
+} from "react-icons/fa";
+import { FaXTwitter } from "react-icons/fa6";
 import { LazyLoadImage } from "react-lazy-load-image-component";
 import { Link } from "react-router-dom";
 
 import logo from "../../assets/images/sytLogo.png";
-import { footerLinks, socialLinks } from ".";
+
+const socialLinks = [
+  {
+    href: "https://www.facebook.com/spaceyatech",
+    icon: <FaFacebook size="1.6em" />,
+    alt: "facebook",
+  },
+  {
+    href: "https://www.instagram.com/spaceyatech/",
+    icon: <FaInstagram size="1.5em" />,
+    alt: "instagram",
+  },
+  {
+    href: "https://x.com/SpaceYaTech",
+    icon: <FaXTwitter size="1.5em" />,
+    alt: "twitter",
+  },
+  {
+    href: "https://linkedin.com/company/spaceyatech",
+    icon: <FaLinkedin size="1.5em" />,
+    alt: "linkedIn",
+  },
+  {
+    href: "https://www.youtube.com/@spaceyatech",
+    icon: <FaYoutube size="1.5em" />,
+    alt: "youtube",
+  },
+  {
+    href: "https://open.spotify.com/show/4nUYzhacDAw1v9ClqPY89n",
+    icon: <FaSpotify size="1.5em" />,
+    alt: "spotify",
+  },
+];
+
+const footerLinks = [
+  {
+    title: "Company",
+    links: [
+      { to: "/about-us", name: "About Us" },
+      { to: "/community", name: "Community" },
+      { to: "/products", name: "Products" },
+      { to: "/shop", name: "Shop" },
+    ],
+  },
+  {
+    title: "Resources",
+    links: [
+      { href: "/events", name: "Events" },
+      { href: "http://mentorlst.com", name: "Mentorship" },
+      { href: "/gallery", name: "Gallery" },
+    ],
+  },
+  {
+    title: "Quick Links",
+    links: [
+      { href: "https://x.com/SpaceYaTech", name: "Contact Us" },
+      {
+        href: "https://syt-terms.notion.site/SpaceYaTech-Terms-of-Service-7d84de7a4feb41cc9f86143a9cc572e0",
+        name: "Terms and Conditions",
+      },
+    ],
+  },
+];
 
 function Footer() {
   const now = new Date();

diff --git a/src/APP/components/index.js b/src/APP/components/index.js
@@ -1,12 +1,3 @@
-import {
-  linkedin,
-  twitter,
-  spotify,
-  youtube,
-  instagram,
-  facebook,
-} from "../../assets/images/socials";
-
 export { default as Button } from "./Button";
 export { default as Caroussel } from "./Caroussel";
 export { default as CartDrawer } from "./shop/CartDrawer";
@@ -19,62 +10,3 @@ export { default as FallbackLoader } from "./FallbackLoader";
 export { default as Loader } from "./Loader";
 export { default as PodcastCard } from "./PodcastCard";
 export { default as LandingWrapper } from "./LandingWrapper";
-
-export const socialLinks = [
-  {
-    href: "https://www.facebook.com/spaceyatech",
-    src: facebook,
-    alt: "facebook",
-  },
-  {
-    href: "https://www.instagram.com/spaceyatech/",
-    src: instagram,
-    alt: "instagram",
-  },
-  { href: "https://x.com/SpaceYaTech", src: twitter, alt: "twitter" },
-  {
-    href: "https://linkedin.com/company/spaceyatech",
-    src: linkedin,
-    alt: "linkedIn",
-  },
-  {
-    href: "https://www.youtube.com/@spaceyatech",
-    src: youtube,
-    alt: "youtube",
-  },
-  {
-    href: "https://open.spotify.com/show/4nUYzhacDAw1v9ClqPY89n",
-    src: spotify,
-    alt: "spotify",
-  },
-];
-
-export const footerLinks = [
-  {
-    title: "Company",
-    links: [
-      { to: "/about-us", name: "About Us" },
-      { to: "/community", name: "Community" },
-      { to: "/products", name: "Products" },
-      { to: "/shop", name: "Shop" },
-    ],
-  },
-  {
-    title: "Resources",
-    links: [
-      { href: "/events", name: "Events" },
-      { href: "http://mentorlst.com", name: "Mentorship" },
-      { href: "/gallery", name: "Gallery" },
-    ],
-  },
-  {
-    title: "Quick Links",
-    links: [
-      { href: "https://x.com/SpaceYaTech", name: "Contact Us" },
-      {
-        href: "https://syt-terms.notion.site/SpaceYaTech-Terms-of-Service-7d84de7a4feb41cc9f86143a9cc572e0",
-        name: "Terms and Conditions",
-      },
-    ],
-  },
-];
diff --git a/src/APP/pages/events/sections/EventsSection.jsx b/src/APP/pages/events/sections/EventsSection.jsx
@@ -55,24 +55,24 @@ function EventsSection() {
     : events;
 
   return (
-    <section className="mt-2 py-6 flex flex-col items-center justify-between gap-4">
+    <section className="mt-2 py-6 flex flex-col items-center justify-between gap-4 w-full">
       {/* search events */}
       <form
         onSubmit={handleSubmit}
-        className="flex items-center border sm:w-7/12 mb-3 rounded-xl bg-white overflow-clip"
+        className="flex items-center border w-full justify-between sm:w-7/12 max-w-md mb-3 rounded-xl bg-white overflow-clip relative"
       >
-        <span className="py-3 pl-6">
+        <span className="py-3 pl-4 absolute top-0.5 left-0 hidden sm:block">
           <AiOutlineSearch className="size-5 text-gray-400" />
         </span>
         <input
           type="text"
           placeholder="Search Event"
-          className="md:flex-grow p-3 outline-none text-gray-400"
+          className="flex-grow p-3 sm:pl-12 outline-none text-gray-400 w-4/5 "
           onChange={handleSearch}
         />
         <button
           type="submit"
-          className="bg-gradient-to-b to-primary from-green-dark px-6 py-3 text-white"
+          className="bg-gradient-to-b to-primary from-green-dark px-1.5 sm:px-6 py-3 text-white"
         >
           Search
         </button>

diff --git a/src/APP/pages/events/sections/FeaturedCarousel.jsx b/src/APP/pages/events/sections/FeaturedCarousel.jsx
@@ -16,7 +16,7 @@ export default function FeaturedCarousel() {
   }, [length]);
 
   return (
-    <div className="w-full h-96 md:h-[540px] md:flex overflow-hidden relative">
+    <div className="w-full h-96 md:h-[540px] hidden md:flex overflow-hidden relative">
       <div className="absolute bottom-16 left-1/2 transform -translate-x-1/2 bg-black px-3 py-1.5 rounded-full z-10">
         <div className="flex gap-2">
           {Array.from({ length }).map((_, i) => (