Responsiveness (#231)

src/components/GameGallery/FilterButtonPopover.tsx

@@ -0,0 +1,85 @@
+import {
+  Popover,
+  PopoverBody,
+  PopoverContent,
+  PopoverTrigger,
+  Text,
+  Button,
+  PopoverCloseButton,
+} from "@chakra-ui/react";
+import FilterBody from "@/components/GameGallery/FilterBody";
+import React from "react";
+import { UserLabel } from "@/utils/types";
+import { PageRequiredGameQuery } from "../Admin/ThemesTags/GamesSection";
+import { Filter } from "lucide-react";
+import cx from "classnames";
+
+type FilterButtonPopoverProps = {
+  filters: PageRequiredGameQuery;
+  hasFilters: boolean;
+  setFilters: any;
+  userData: any;
+  onCloseFilterModal: () => void;
+  onOpenFilterModal: () => void;
+  isOpenFilterModal: boolean;
+};
+
+const FilterButtonPopover: React.FC<FilterButtonPopoverProps> = ({
+  filters,
+  hasFilters,
+  setFilters,
+  userData,
+  onCloseFilterModal,
+  onOpenFilterModal,
+  isOpenFilterModal,
+}) => {
+  return (
+    <Popover
+      placement="bottom-end"
+      onOpen={onOpenFilterModal}
+      onClose={onCloseFilterModal}
+      isOpen={isOpenFilterModal}
+    >
+      <PopoverTrigger>
+        <Button
+          className={cx(
+            "mx-5 my-2.5 flex items-center justify-center rounded-full border",
+            {
+              "bg-brand-800 border-blue-bg": hasFilters,
+              "border-gray-300 bg-white hover:bg-light-gray": !hasFilters,
+            },
+          )}
+        >
+          <Text
+            className={cx("select-none font-inter font-bold text-black", {
+              "text-blue-primary": hasFilters,
+            })}
+          >
+            Filters
+          </Text>
+          <Filter
+            className={cx("ml-1 h-4 text-black", {
+              "text-blue-primary": hasFilters,
+            })}
+          />
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="min-h-[500px] w-[100vw] rounded-lg md:w-[730px]">
+        <PopoverCloseButton
+          className="mr-11 mt-11 h-6 w-6 p-0 font-semibold text-blue-primary"
+          size="md"
+        />
+        <PopoverBody className="m-12 p-0">
+          <FilterBody
+            setFilters={setFilters}
+            filters={filters}
+            userLabel={userData?.label}
+            onClose={onCloseFilterModal}
+          />
+        </PopoverBody>
+      </PopoverContent>
+    </Popover>
+  );
+};
+
+export default FilterButtonPopover;

src/components/GameGallery/GameCardView.tsx

@@ -59,10 +59,10 @@ export default function GameCardView({
   return (
     <>
       {data ? (
-        <div className="ml-6 flex w-full flex-row flex-wrap">
+        <div className="flex w-full flex-row flex-wrap items-center justify-center gap-6 md:justify-normal">
           {data.games?.length > 0 ? (
             data.games.map((game: z.infer<typeof gameDataSchema>) => (
-              <div key={game.name} className="mb-6 ml-6">
+              <div key={game.name} className="">
                 <GameCard game={game} />
               </div>
             ))

src/components/GameGallery/SortButtonPopover.tsx

@@ -0,0 +1,83 @@
+import React from "react";
+import {
+  Popover,
+  PopoverTrigger,
+  PopoverContent,
+  PopoverBody,
+  Button,
+  Text,
+} from "@chakra-ui/react";
+import { ChevronsUpDown, Check } from "lucide-react";
+import cx from "classnames";
+import { SortType } from "@/utils/types";
+
+type SortButtonPopoverProps = {
+  filters: any;
+  setFilters: (filters: any) => void;
+  selectedSort: SortType;
+  setSelectedSort: (sort: SortType) => void;
+  isOpenSortModal: boolean;
+  onOpenSortModal: () => void;
+  onCloseSortModal: () => void;
+};
+
+const SortButtonPopover: React.FC<SortButtonPopoverProps> = ({
+  filters,
+  setFilters,
+  selectedSort,
+  setSelectedSort,
+  isOpenSortModal,
+  onOpenSortModal,
+  onCloseSortModal,
+}) => {
+  return (
+    <Popover
+      placement="bottom-start"
+      onOpen={onOpenSortModal}
+      onClose={onCloseSortModal}
+      isOpen={isOpenSortModal}
+    >
+      <PopoverTrigger>
+        <Button className="flex h-9 items-center justify-center rounded-full bg-white p-0">
+          <Text className="select-none pr-1 font-inter">Sort by:</Text>
+          <Text className="select-none font-inter font-bold text-blue-primary">
+            {selectedSort}
+          </Text>
+          <ChevronsUpDown className="h-4 text-blue-primary" />
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="w-fit p-0">
+        <PopoverBody className="my-2 p-0">
+          <div className="flex w-52 flex-col">
+            {Object.values(SortType).map((item, index) => (
+              <button
+                key={index}
+                className={cx(
+                  "flex flex-row justify-between px-4 py-2 text-left font-inter text-sm text-black hover:bg-menu-item-hover",
+                  {
+                    "text-blue-primary": selectedSort === item,
+                  },
+                )}
+                onClick={() => {
+                  setFilters({ ...filters, sort: item });
+                  setSelectedSort(item);
+                  onCloseSortModal();
+                }}
+              >
+                {item}
+                <Check
+                  className={cx("flex justify-end", {
+                    "text-blue-primary": selectedSort === item,
+                  })}
+                  size="16"
+                />
+              </button>
+            ))}
+          </div>
+        </PopoverBody>
+      </PopoverContent>
+    </Popover>
+  );
+};
+
+export default SortButtonPopover;

src/components/GameGallery/ThemeSidebar.tsx

@@ -26,7 +26,7 @@ export default function ThemeSidebar({ setFilters, filters }: Props) {
   }
 
   return (
-    <div className="flex h-[365px] w-[268px] flex-col overflow-y-scroll">
+    <div className="flex w-max flex-col">
       <p
         onClick={() => {
           setFilters({ ...filters, theme: [], page: 1 });