Skip to content

Commit

Permalink
feat: changed favico & added some libraries: nextui for ui, next-seo …
Browse files Browse the repository at this point in the history
…for seo.
  • Loading branch information
alperpacin committed Oct 7, 2023
1 parent b6c263b commit 659724a
Showing 37 changed files with 5,867 additions and 852 deletions.
79 changes: 79 additions & 0 deletions components/Dialog/Dialog.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,79 @@
import React from "react";
import {
Modal,
ModalContent,
ModalHeader,
ModalBody,
ModalFooter,
Button,
useDisclosure,
} from "@nextui-org/react";

export default function App() {
const { isOpen, onOpen, onClose } = useDisclosure();
const [backdrop, setBackdrop] = React.useState("opaque");

const backdrops = ["opaque", "blur", "transparent"];

const handleOpen = (backdrop) => {
setBackdrop(backdrop);
onOpen();
};

return (
<>
<div className="flex flex-wrap gap-3">
{backdrops.map((b) => (
<Button
key={b}
variant="flat"
color="warning"
onPress={() => handleOpen(b)}
className="capitalize"
>
{b}
</Button>
))}
</div>
<Modal backdrop={backdrop} isOpen={isOpen} onClose={onClose}>
<ModalContent>
{(onClose) => (
<>
<ModalHeader className="flex flex-col gap-1">
Modal Title
</ModalHeader>
<ModalBody>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Nullam pulvinar risus non risus hendrerit venenatis.
Pellentesque sit amet hendrerit risus, sed porttitor quam.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Nullam pulvinar risus non risus hendrerit venenatis.
Pellentesque sit amet hendrerit risus, sed porttitor quam.
</p>
<p>
Magna exercitation reprehenderit magna aute tempor cupidatat
consequat elit dolor adipisicing. Mollit dolor eiusmod sunt ex
incididunt cillum quis. Velit duis sit officia eiusmod Lorem
aliqua enim laboris do dolor eiusmod. Et mollit incididunt
nisi consectetur esse laborum eiusmod pariatur proident Lorem
eiusmod et. Culpa deserunt nostrud ad veniam.
</p>
</ModalBody>
<ModalFooter>
<Button color="danger" variant="light" onPress={onClose}>
Close
</Button>
<Button color="primary" onPress={onClose}>
Action
</Button>
</ModalFooter>
</>
)}
</ModalContent>
</Modal>
</>
);
}
69 changes: 0 additions & 69 deletions components/RegionDropdown/region-dropdown.jsx

This file was deleted.

85 changes: 85 additions & 0 deletions components/RegionModal/region-modal.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,85 @@
import classes from "./region-modal.module.css";
import { useDispatch } from "react-redux";
import {
updateRegionOpen,
updateRegionValue,
} from "@/store/slices/searchBarSlice";
import { useRef } from "react";
import {
Modal,
ModalBody,
ModalContent,
ModalHeader,
useDisclosure,
} from "@nextui-org/react";

const Dropdown = ({ items, searchBarState }) => {
const { isOpen, onOpen, onOpenChange } = useDisclosure();
const dispatch = useDispatch();
const ref = useRef(null);

const handleItemClick = (item) => {
dispatch(updateRegionOpen(false));
dispatch(updateRegionValue(item));
};

return (
<div className={`${classes["dropdown"]}`} ref={ref}>
{searchBarState.region.value && (
<div
className={`${classes["dropdown-header"]} bg-accent w-12 sm:w-20 py-6 px-4`}
onClick={onOpen}
>
<span className="font-bold text-white text-[14px] sm:text-[16px] ">
{searchBarState.region.value?.labelShort}
</span>
</div>
)}

<Modal
size="2xl"
backdrop={"blur"}
shadow="lg"
isOpen={isOpen}
onOpenChange={onOpenChange}
classNames={{
body: "px-8 pb-8",
header: "flex items-center justify-center text-black font-bold",
backdrop: "backdrop-opacity-10 backdrop-blur",
}}
>
<ModalContent>
{(onClose) => (
<>
<ModalHeader>Regions</ModalHeader>
<ModalBody className="grid grid-cols-2 sm:grid-cols-4 gap-2 sm:gap-4">
{items.map((item) => (
<div
className={classes["dropdown-item"]}
onClick={(e) => {
handleItemClick(item);
onClose();
}}
key={item.code}
>
<span
className={`text-sm w-100 text-primary p-1 rounded-sm ${
item.code === searchBarState.region.value?.code
? "bg-accent text-white font-medium"
: "bg-transparent font-light hover:text-accent transition duration-50 ease-in-out"
}`}
>
{item.labelLong}
</span>
</div>
))}
</ModalBody>
</>
)}
</ModalContent>
</Modal>
</div>
);
};

export default Dropdown;
Original file line number Diff line number Diff line change
@@ -1,22 +1,18 @@
.dropdown {
width: 2.5rem;
height: 2.5rem;
width: 100%;
height: 100%;
}

.dropdown-header {
width: 100%;
height: 100%;
cursor: pointer;
position: relative;
/* padding: 1.5rem 1rem; */
display: flex;
align-items: center;
justify-content: center;
}

.dropdown-header img {
padding: 0.5rem;
}

.dropdown-body {
background-color: rgba(23, 26, 34, 0.3);
backdrop-filter: blur(10px);
@@ -25,7 +21,7 @@
position: absolute;
top: 100%;
left: 0;
width: 6rem;
width: 4.5rem;
z-index: -1;
pointer-events: none;
transition: 0.1s ease-in-out all;
@@ -45,12 +41,10 @@
display: flex;
align-items: center;
justify-content: center;
width: 100%;
margin: 0.25rem 0;
}

.dropdown-item span {
flex: 1;
text-align: center;
}

28 changes: 10 additions & 18 deletions components/SearchBar/SearchBar.jsx
Original file line number Diff line number Diff line change
@@ -1,15 +1,13 @@
import { Input } from "@/components/ui/input";
import { useRouter } from "next/router";
import { useEffect, useRef, useState } from "react";
import { useRef, useState } from "react";
import { useForm } from "react-hook-form";
import { AiOutlineClockCircle, AiOutlineStar } from "react-icons/ai";
import {
PLATFORM_LIST_LOL,
PLATFORM_LIST_VAL,
} from "@/public/json/platform-api-routes.js";
import GAME_LIST from "@/public/json/game-platforms";
import GameDropdown from "../GameDropdown/game-dropdown";
import RegionDropdown from "../RegionDropdown/region-dropdown";
import RegionModal from "../RegionModal/region-modal";
import { useDispatch, useSelector } from "react-redux";
import { updateSearchOpen } from "@/store/slices/searchBarSlice";
import useOutsideClick from "@/hooks/useOutsideClick";
@@ -23,7 +21,7 @@ const SearchBar = (props) => {
const [activeTab, setActiveTab] = useState("recent");
const { register, handleSubmit } = useForm();

const dropdownItems =
const modalItems =
router.pathname.includes("/valorant") &&
searchBarState.game.value &&
searchBarState.game.value.id === "valorant"
@@ -53,14 +51,8 @@ const SearchBar = (props) => {
!searchBarState.search.open ? "rounded-md" : "rounded-t-md"
}`}
>
<div className="w-12 h-full shrink-0 bg-gray-100 border-r-[1px] border-r-gray-200 flex justify-center items-center">
<GameDropdown items={GAME_LIST} searchBarState={searchBarState} />
</div>
<div className="w-12 h-full shrink-0 bg-gray-100 border-r-[1px] border-r-gray-200 flex justify-center items-center">
<RegionDropdown
items={dropdownItems}
searchBarState={searchBarState}
/>
<div className="h-full shrink-0 bg-gray-100 border-r-[1px] border-r-gray-200 flex justify-center items-center">
<RegionModal items={modalItems} searchBarState={searchBarState} />
</div>

<div className="px-4 w-full">
@@ -96,19 +88,19 @@ const SearchBar = (props) => {
onFocus={() => dispatch(updateSearchOpen(true))}
className={`${
searchBarState.search.open
? "h-48 sm:h-64 translate-y-0 opacity-100"
? "h-48 lg:h-auto translate-y-0 opacity-100"
: "h-0 translate-y--2 opacity-0"
} overflow-hidden transition-all duration-500 bg-slate-100 rounded-b-sm absolute w-full top-full flex flex-col lg:flex-row border-[1px] border-gray-200`}
>
<div className="w-full lg:w-24 h-8 sm:h-16 lg:h-full bg-gray-100 flex lg:block border-b-[1px] border-b-gray-200 lg:border-b-0 lg:border-r-[1px] lg:border-r-gray-200">
<div className="w-full lg:w-20 h-8 sm:h-16 lg:h-full bg-gray-100 flex lg:block border-b-[1px] border-b-gray-200 lg:border-b-0 lg:border-r-[1px] lg:border-r-gray-200">
{/* Updated Button for 'Recent' */}
<button
onClick={() => setActiveTab("recent")}
className={`flex justify-center lg:justify-start items-center w-full md:py-8 ${
className={`flex justify-center lg:justify-start flex-col items-center w-full md:py-8 ${
activeTab === "recent" ? "bg-gray-300" : ""
}`}
>
<AiOutlineClockCircle className="text-[24px] text-primary mr-1" />
<AiOutlineClockCircle className="text-[24px] text-primary" />
<span className="text-xs text-primary hidden md:inline-block">
Recent
</span>
@@ -117,7 +109,7 @@ const SearchBar = (props) => {
{/* Updated Button for 'Favorites' */}
<button
onClick={() => setActiveTab("favorites")}
className={`flex justify-center lg:justify-start items-center w-full md:py-8 ${
className={`flex justify-center lg:justify-start flex-col items-center w-full md:py-8 ${
activeTab === "favorites" ? "bg-gray-300" : ""
}`}
>
Loading

0 comments on commit 659724a

Please sign in to comment.