-
- ) : null;
-}
-
-export default Sign;
diff --git a/src/Profile/Signin/SignIn.jsx b/src/Profile/Signin/SignIn.jsx
index 8d9afef..0d8c19e 100644
--- a/src/Profile/Signin/SignIn.jsx
+++ b/src/Profile/Signin/SignIn.jsx
@@ -1,6 +1,5 @@
import React, { useState } from "react";
-import SignInInputField from "./SignInInputField.jsx";
-import SignInButton from "./SignInButton.jsx";
+import SignInInputField from "./SignInInputField/SignInInputField.jsx";
import { useAuth } from "../../AuthContext.jsx";
import styles from "./Signin.module.css";
@@ -26,9 +25,7 @@ function SignIn() {
if (validate()) {
try {
await login(email, password);
- // 성공적으로 로그인이 되면, 필요하다면 여기서 추가적인 작업을 수행합니다.
} catch (error) {
- // 로그인 실패 시, 오류 메시지를 처리합니다.
setErrors({
...errors,
form: "Login failed. Please check your email or password.",
@@ -40,25 +37,44 @@ function SignIn() {
};
return (
-
- {/* Main title showing whether it's sign up or sign in */}
- 
-
-
- {isSignUp ? "Sign Up" : "Sign In"}
-
-
- {/* Conditionally render SignUp or SignIn component */}
- {isSignUp ? (
-
- {/* Close button */}
-
-
-
-
-
- {isSignUp
- ? "Already have an account?"
- : "Don’t you have any account?"}
-
- {/* Switch between sign up and sign in on text click */}
-
- {isSignUp ? "Sign In" : "Sign Up"}
-
-
-
-
+
-
+
+);
+
+function Sign({ isOpen, close }) {
+ const [isSignUp, setIsSignUp] = useState(false);
+
+ const switchToSignUp = () => setIsSignUp(true);
+ const switchToSignIn = () => setIsSignUp(false);
+ const handleClose = () => {
+ setIsSignUp(false);
+ close();
+ };
+
+ return isOpen ? (
+
+
-
);
}
diff --git a/src/Profile/Signin/SignInInputField/SignInInputField.module.css b/src/Profile/Signin/SignInInputField/SignInInputField.module.css
new file mode 100644
index 0000000..bb3ba63
--- /dev/null
+++ b/src/Profile/Signin/SignInInputField/SignInInputField.module.css
@@ -0,0 +1,75 @@
+.inputFrame {
+ flex-shrink: 0;
+ width: 20rem;
+ height: 4.5rem;
+ position: relative;
+ margin-bottom: 0.5rem;
+}
+
+.signInTextBox:focus {
+ border: none;
+}
+
+.nameLabel {
+ color: #282828;
+ text-align: left;
+ font-family: "Alef-Bold", sans-serif;
+ font-size: 1rem;
+ font-weight: 700;
+ position: relative;
+ margin-bottom: 0.3rem;
+}
+
+.input {
+ width: 100%;
+ height: 2.5rem;
+ position: relative;
+ background: #e9e9e9;
+ border-radius: 0.625rem;
+}
+
+.placeholder {
+ outline: rgba(54, 54, 54, 0.649);
+}
+
+.placeholder {
+ color: #979797;
+ text-align: left;
+ font-family: "Alef-Regular", sans-serif;
+ font-size: 0.9375rem;
+ font-weight: 400;
+ position: absolute;
+ padding-left: 0.875rem;
+ height: 100%;
+ width: 100%;
+}
+
+/* error */
+.errorInput {
+ border: 1.5px solid rgba(255, 0, 0, 0.745);
+ border-radius: 0.625rem;
+}
+
+
+@media (max-width: 1024px) {
+ .inputFrame {
+ width: 18rem; /* 288px */
+ height: 4rem; /* 64px */
+ }
+}
+
+@media (max-width: 768px) {
+ .inputFrame {
+ width: 16rem; /* 256px */
+ height: 3.5rem; /* 56px */
+ margin-bottom: 15px;
+ }
+}
+
+@media (max-width: 480px) {
+ .inputFrame {
+ width: 14rem; /* 224px */
+ height: 3rem; /* 48px */
+ margin-bottom: 23px;
+ }
+}
diff --git a/src/Profile/Signin/SignInMain.jsx b/src/Profile/Signin/SignInMain.jsx
new file mode 100644
index 0000000..2a48157
--- /dev/null
+++ b/src/Profile/Signin/SignInMain.jsx
@@ -0,0 +1,63 @@
+import React, { useState } from "react";
+import SignUp from "../SignUp/SignUp.jsx";
+import SignIn from "./SignIn.jsx";
+import xIcon from "../../assets/Icons/x0.svg";
+import styles from "./SignInMain.module.css";
+
+const Title = ({ isSignUp }) => (
+ {label}
+ {label}
+ {isSignUp ? "Sign Up" : "Sign In"}
+
+);
+
+const SwitchText = ({ isSignUp, switchToSignUp, switchToSignIn }) => (
+
+
+);
+
+const CloseButton = ({ handleClose }) => (
+
+ {isSignUp ? "Already have an account?" : "Don't you have any account?"}
+
+
+ {isSignUp ? "Sign In" : "Sign Up"}
+
+
+
+ ) : null;
+}
+
+export default Sign;
diff --git a/src/Profile/Signin/SignInMain.module.css b/src/Profile/Signin/SignInMain.module.css
new file mode 100644
index 0000000..5e52cf9
--- /dev/null
+++ b/src/Profile/Signin/SignInMain.module.css
@@ -0,0 +1,99 @@
+.modal {
+ position: fixed;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ background: rgba(0, 0, 0, 0.6);
+}
+
+.signInTitle {
+ color: rgba(0, 0, 0, 0.85);
+ font-family: "Alef-Regular", sans-serif;
+ font-size: 2rem;
+ font-weight: 400;
+ margin-bottom: 1.5rem;
+ position: relative;
+ text-align: center;
+}
+
+.signInFrame {
+ background: white;
+ border-radius: 0.625rem;
+ display: flex;
+ flex-direction: column;
+ box-shadow: 0 0 0.375rem rgba(0, 0, 0, 0.25);
+ width: 480px;
+ min-height: 621px;
+ background-color: white;
+ position: fixed;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ justify-content: center;
+ align-items: center;
+ box-sizing: border-box;
+}
+
+.MainFrame {
+ display: flex;
+ flex-direction: column;
+ justify-content: flex-start;
+ position: relative;
+}
+
+.close {
+ flex-shrink: 0;
+ width: 2rem;
+ height: 2rem;
+ position: absolute;
+ right: 1.5rem;
+ top: 1.3125rem;
+ overflow: visible;
+ cursor: pointer;
+}
+
+/* SwitchText */
+.SwitchFrame {
+ display: flex;
+ flex-direction: row;
+ position: relative;
+ justify-content: center;
+}
+
+.AskSwitch {
+ color: rgba(0, 0, 0, 0.8);
+ font-family: "Alef-Regular", sans-serif;
+ font-size: 1rem;
+ font-weight: 400;
+ padding-right: 0.5rem;
+}
+
+.signUpText {
+ color: rgba(13, 69, 179, 0.96);
+ font-family: "Alef-Regular", sans-serif;
+ font-size: 1rem;
+ font-weight: 400;
+ cursor: pointer;
+}
+
+
+@media (max-width: 1024px) {
+ .signInFrame {
+ width: 25rem; /* 400px */
+ min-height: 31.25rem; /* 500px */
+ }
+}
+
+@media (max-width: 768px) {
+ .signInFrame {
+ width: 25rem; /* 320px */
+ min-height: 25rem; /* 400px */
+ }
+}
+
+@media (max-width: 480px) {
+ .signInFrame {
+ width: 21em;
+ }
+}
\ No newline at end of file
diff --git a/src/Profile/Signin/SignUp.jsx b/src/Profile/Signin/SignUp.jsx
deleted file mode 100644
index 9ddd9a0..0000000
--- a/src/Profile/Signin/SignUp.jsx
+++ /dev/null
@@ -1,155 +0,0 @@
-import React, { useState } from "react";
-import SignInInputField from "./SignInInputField.jsx";
-import SignInButton from "./SignInButton.jsx";
-import { useAuth } from "../../AuthContext.jsx";
-import styles from "./Signin.module.css";
-import axios from "axios";
-import { useNavigate } from "react-router-dom";
-import Swal from "sweetalert2";
-import "../../custom-swal.css";
-
-function SignUp({ switchToSignIn, close }) {
- const [name, setName] = useState("");
- const [email, setEmail] = useState("");
- const [password, setPassword] = useState("");
- const [confirmPassword, setConfirmPassword] = useState("");
- const [errors, setErrors] = useState({});
- const navigate = useNavigate();
- const { URL } = useAuth();
-
- const validateField = (key, value) => {
- let tempErrors = { ...errors };
- if (key === "name") {
- tempErrors.name = value ? "" : "Enter name.";
- } else if (key === "email") {
- tempErrors.email = value ? "" : "Enter email.";
- } else if (key === "password") {
- tempErrors.password =
- value.length >= 6 ? "" : "Password must be 6+ chars.";
- } else if (key === "confirmPassword") {
- tempErrors.confirmPassword =
- password === value ? "" : "Passwords do not match.";
- }
-
- setErrors(tempErrors);
- };
-
- const handleNameChange = (event) => {
- setName(event.target.value);
- validateField("name", event.target.value);
- };
- const handleEmailChange = (event) => {
- setEmail(event.target.value);
- validateField("email", event.target.value);
- };
- const handlePasswordChange = (event) => {
- setPassword(event.target.value);
- validateField("password", event.target.value);
- };
- const handleConfirmPasswordChange = (event) => {
- setConfirmPassword(event.target.value);
- validateField("confirmPassword", event.target.value);
- };
-
- const validate = () => {
- let tempErrors = {};
- tempErrors.name = name ? "" : "Enter name.";
- tempErrors.email = email ? "" : "Enter email.";
- tempErrors.password =
- password.length >= 6 ? "" : "Password must be 6+ chars.";
- tempErrors.confirmPassword =
- password === confirmPassword ? "" : "Passwords do not match.";
-
- setErrors(tempErrors);
-
- return Object.values(tempErrors).every((x) => x === "");
- };
-
- const showSuccessAlert = (username) => {
- Swal.fire({
- title: `Welcome to Pureplate, ${username}!`, // Alert title
- text: "Please, sign in!", // Alert contents
- icon: "success", // Alert type (success, error, warning, info, question)
- });
- };
-
- const showErrorAlert = () => {
- Swal.fire({
- title: `This email is already registered.`, // Alert title
- text: " Please choose another email.", // Alert contents
- icon: "error", // Alert type (success, error, warning, info, question)
- });
- };
-
- const onSubmit = async (event) => {
- event.preventDefault();
- if (validate()) {
- const data = {
- nickname: name,
- username: email,
- password: password,
- // confirmPassword는 서버에서 처리하지 않을 수도 있습니다.
- };
-
- const SIGNUP_URL = `${URL}/api/account/register/`;
- try {
- const response = await axios.post(SIGNUP_URL, data);
- console.log(response.data);
- // 회원가입 성공 후의 로직을 여기에 작성하세요.
- // 예: 로그인 페이지로 리다이렉트하기, 성공 메시지 표시하기 등
- close();
- navigate("/");
- showSuccessAlert(response.data.nickname, "success");
- } catch (error) {
- const firstKey = Object.keys(error.response.data)[0];
- console.log(firstKey);
- if (firstKey === "username") {
- showErrorAlert();
- }
- console.error(
- "Error during sign up:",
- error.response ? error.response.data : error
- );
- // 오류 처리 로직을 여기에 작성하세요.
- // 예: 사용자에게 오류 메시지 표시하기 등
- }
- } else {
- console.error("Validation failed.");
- }
- };
-
- return (
-
- );
-}
-
-export default SignUp;
diff --git a/src/Profile/Signin/Signin.module.css b/src/Profile/Signin/Signin.module.css
index f424def..7b9d5ff 100644
--- a/src/Profile/Signin/Signin.module.css
+++ b/src/Profile/Signin/Signin.module.css
@@ -1,173 +1,29 @@
-/* General reset for elements */
-a,
-button,
-input,
-select,
-h1,
-h2,
-h3,
-h4,
-h5,
-* {
- box-sizing: border-box;
- margin: 0;
- padding: 0;
- border: none;
- text-decoration: none;
- appearance: none;
- background: none;
- -webkit-font-smoothing: antialiased;
-}
-
-.signIn,
-.signIn * {
- box-sizing: border-box;
-}
-
-/* .frame37 {
- display: flex;
- flex-direction: column;
- align-items: center;
- justify-content: space-evenly;
- flex-shrink: 0;
- position: relative;
-} */
-.signIn {
- background: var(--white, #ffffff);
- border-radius: 0.625rem;
- /* padding: 1.0625rem 0.3125rem; */
+.SignInInputField {
display: flex;
flex-direction: column;
- gap: 2.3125rem;
align-items: center;
justify-content: center;
- /* height: 25.625rem; */
- box-shadow: 0 0 0.375rem rgba(0, 0, 0, 0.25);
- /* */
- width: 480px;
- /* height: 621px; */
-
- min-height: 621px;
- background-color: white;
- position: relative;
- box-sizing: border-box;
- margin: 50px auto;
- padding: 20px;
-}
-
-.signInMain {
- color: rgba(0, 0, 0, 0.67);
- text-align: center;
- font-family: "Alef-Regular", sans-serif;
- font-size: 2rem;
- line-height: 135.02%;
- font-weight: 400;
- position: relative;
- width: 16.8125rem;
- height: 2.625rem;
- display: flex;
- align-items: flex-end;
- justify-content: center;
-}
-
-.frame36 {
- margin: -0.875rem 0 0 0;
- display: flex;
- flex-direction: column;
- gap: 0.575rem;
- align-items: center;
- justify-content: flex-start;
flex-shrink: 0;
position: relative;
}
-.x {
- flex-shrink: 0;
- width: 1.5rem;
- height: 1.5rem;
- position: absolute;
- right: 1.5rem;
- top: 1.3125rem;
- overflow: visible;
-}
-
-/* .SignInArea {
- display: flex;
- flex-direction: column;
- align-items: center;
- justify-content: center;
- flex-shrink: 0;
- position: relative;
-} */
-
-.frame33 {
+.signInButton {
+ background: rgba(169, 234, 195, 0.62);
+ border-radius: 0.625rem;
display: flex;
- flex-direction: column;
- gap: 1.0625rem;
align-items: center;
justify-content: center;
- flex-shrink: 0;
- /* height: 13.25rem; */
- position: relative;
-}
-
-.signInTextBox {
- flex-shrink: 0;
- width: 20rem;
- height: 4.375rem;
- position: relative;
-}
-
-.frame31 {
- width: 20rem;
+ width: 8.75rem;
height: 2.5rem;
- position: absolute;
- left: 0;
- top: 1.875rem;
- background: #e9e9e9;
- border-radius: 0.625rem;
- display: flex;
-}
+ margin-top: 1rem;
-.placeholder {
- color: #979797;
+ color: rgba(0, 0, 0, 0.46);
text-align: left;
font-family: "Alef-Regular", sans-serif;
- font-size: 0.9375rem;
- font-weight: 400;
- position: absolute;
- padding-left: 0.875rem;
- /* left: 0.875rem; */
- /* top: calc(50% - 0.625rem); */
- height: 100%;
- width: 100%;
-}
-
-.nameLabel {
- color: #000000;
- text-align: left;
- font-family: "Alef-Bold", sans-serif;
font-size: 1rem;
- font-weight: 700;
- position: absolute;
- left: 0;
- top: 0;
-}
-
-.signInButton {
- margin: -0.1875rem 0 0 0;
- background: var(--button-color, rgba(169, 234, 195, 0.62));
- border-radius: 0.625rem;
- display: flex;
- flex-direction: row;
- gap: 0.625rem;
- align-items: center;
- justify-content: center;
- flex-shrink: 0;
- width: 8.75rem;
- height: 2.375rem;
- position: relative;
+ font-weight: 400;
+ cursor: pointer;
}
.signIn2 {
@@ -183,86 +39,6 @@ h5,
justify-content: flex-start;
}
-.frame34 {
- display: flex;
- flex-direction: column;
- gap: 0.625rem;
- align-items: center;
- justify-content: center;
- flex-shrink: 0;
- position: relative;
-}
-
-.socialLoginText {
- color: rgba(0, 0, 0, 0.67);
- text-align: center;
- font-family: "Alef-Regular", sans-serif;
- font-size: 1rem;
- line-height: 135.02%;
- font-weight: 400;
- position: relative;
- display: flex;
- align-items: center;
- justify-content: center;
-}
-
-.frame32 {
- display: flex;
- flex-direction: row;
- gap: 0.625rem;
- align-items: center;
- justify-content: center;
- flex-shrink: 0;
- width: 19.3125rem;
- position: relative;
-}
-
-.signUpText {
- color: rgba(0, 0, 0, 0.67);
- text-align: center;
- font-family: "Alef-Regular", sans-serif;
- font-size: 1rem;
- line-height: 135.02%;
- font-weight: 400;
- position: relative;
- align-self: stretch;
- flex: 1;
- display: flex;
- align-items: center;
- justify-content: center;
-}
-
-.signUp {
- color: rgba(13, 69, 179, 0.96);
- text-align: center;
- font-family: "Alef-Regular", sans-serif;
- font-size: 1rem;
- line-height: 135.02%;
- font-weight: 400;
- position: relative;
- width: 4.125rem;
- height: 2rem;
- display: flex;
- align-items: center;
- justify-content: center;
- cursor: pointer;
-}
-
-/* */
-.modal {
- position: fixed;
- top: 0;
- right: 0;
- bottom: 0;
- left: 0;
- background: rgba(0, 0, 0, 0.6);
-
- /* */
- /* display: flex;
- flex-direction: row;
- justify-content: center;
- align-items: center; */
-}
.loginModal {
width: 480px;
@@ -348,61 +124,6 @@ input::placeholder {
border-style: none;
}
-.socialBox {
- margin-bottom: 30px;
-}
-
-.kakao {
- background-color: #feec34;
- border-color: #feec34;
- height: 40px;
- display: flex;
- align-items: center;
- justify-content: center;
- box-sizing: border-box;
- margin-bottom: 10px;
- border-radius: 3px;
-}
-
-.kakaoLogo {
- width: 24px;
- height: 25px;
-}
-
-.kakaoText {
- width: 300px;
- font-size: 15px;
- text-align: center;
- display: inline-block;
- box-sizing: border-box;
-}
-
-.facebook {
- background-color: #21538a;
- border-color: #21538a;
- height: 40px;
- display: flex;
- justify-content: center;
- box-sizing: border-box;
- color: #fff;
- border-radius: 3px;
-}
-
-.facebookText {
- padding-top: 12px;
- width: 310px;
- color: #fff;
- font-size: 15px;
- text-align: center;
- box-sizing: border-box;
-}
-
-.facebookLogo {
- padding-top: 7px;
- width: 24px;
- height: 25px;
-}
-
.loginEnd {
text-align: center;
font-size: 11px;
@@ -423,7 +144,27 @@ input::placeholder {
.noUser {
text-decoration: underline;
}
-/* error */
-.errorInput {
- border: 2px solid red; /* 오류 경고를 위한 테두리 색상 변경 */
+
+.signInButton {
+ margin: -0.1 875rem 0 0 0;
+ background: var(--button-color, rgba(169, 234, 195, 0.62));
+ border-radius: 0.625rem;
+ display: flex;
+ flex-direction: row;
+ gap: 0.625rem;
+ align-items: center;
+ justify-content: center;
+ flex-shrink: 0;
+ width: 8.75rem;
+ height: 2.375rem;
+ position: relative;
+ cursor: pointer;
+ margin-top: 0.8rem;
+ margin-bottom: 10px;
+
+ color: rgba(0, 0, 0, 0.46);
+ text-align: left;
+ font-family: "Alef-Regular", sans-serif;
+ font-size: 1rem;
+ font-weight: 400;
}
diff --git a/src/Pureplate/Header.jsx b/src/Pureplate/Header/Header.jsx
similarity index 60%
rename from src/Pureplate/Header.jsx
rename to src/Pureplate/Header/Header.jsx
index e309f70..e0daaac 100644
--- a/src/Pureplate/Header.jsx
+++ b/src/Pureplate/Header/Header.jsx
@@ -1,11 +1,11 @@
import React from "react";
import { Link } from "react-router-dom";
-import styles from "./Pureplate.module.css";
-import SearchBar from "../Search/SearchBar.js";
-import Attributes from "../Attributes/Attributes.js";
-import Profile from "../Profile/Profile.jsx";
-import BookmarkIcon from "../Bookmark/BookmarkIcon.jsx";
-import logo_icon from "../assets/Icons/logo_icon.png";
+import styles from "./Header.module.css";
+import SearchBar from "../../Search/SearchBar.js";
+import Attributes from "../../Attributes/Attributes.js";
+import Profile from "../../Profile/Profile.jsx";
+import BookmarkIcon from "../../Bookmark/BookmarkIcon.jsx";
+import logo_icon from "../../assets/Icons/logo_icon.png";
function Header({ isRestModalOpen, bookmarkToggle }) {
return (
diff --git a/src/Pureplate/Header/Header.module.css b/src/Pureplate/Header/Header.module.css
new file mode 100644
index 0000000..8d9dcf8
--- /dev/null
+++ b/src/Pureplate/Header/Header.module.css
@@ -0,0 +1,42 @@
+
+.header {
+ border-style: solid;
+ border-color: transparent;
+ border-width: 0.0625rem;
+ padding: 0.625rem 0.625rem 0.625rem 0.625rem;
+ display: flex;
+ flex-direction: row;
+ gap: 0rem;
+ align-items: center;
+ justify-content: flex-start;
+ width: 100%;
+ height: 5rem;
+ padding-left: 1.2rem;
+ position: absolute;
+ left: 0rem;
+ top: 0rem;
+ box-shadow: 0rem 0.0625rem 1.875rem 0rem rgba(0, 0, 0, 0.06);
+ }
+
+ @media (max-width: 1000px) {
+ .header {
+ padding: 0.625rem 0.625rem 0.625rem 0.625rem;
+ }
+ }
+
+ .purePlateIcon {
+ width: 50px;
+ height: 50px;
+ position: relative;
+ align-items: center;
+ object-fit: contain;
+ margin-right: 1rem;
+ }
+
+ @media (max-width: 600px) {
+ .purePlateIcon {
+ min-width: 40px;
+ min-height: 40px;
+ }
+ }
+
\ No newline at end of file
diff --git a/src/Pureplate/Pureplate.jsx b/src/Pureplate/Pureplate.jsx
index 38bf2aa..0d5b821 100644
--- a/src/Pureplate/Pureplate.jsx
+++ b/src/Pureplate/Pureplate.jsx
@@ -3,7 +3,7 @@ import { useParams, useNavigate, Outlet } from "react-router-dom";
import styles from "./Pureplate.module.css";
import MapNaverCur from "../Map/Map.js";
import RestaurantModal from "./RestaurantModal.jsx";
-import Header from "./Header.jsx";
+import Header from "./Header/Header.jsx";
import { useAuth } from "../AuthContext.jsx";
function Pureplate() {
@@ -15,7 +15,7 @@ function Pureplate() {
const bookmarkToggle = () => {
SetBookmarksToggle(!bookmarksToggle);
};
-
+
useEffect(() => {
if (id) {
setIsRestModalOpen(true);
diff --git a/src/Pureplate/Pureplate.module.css b/src/Pureplate/Pureplate.module.css
index acce198..8f32c0c 100644
--- a/src/Pureplate/Pureplate.module.css
+++ b/src/Pureplate/Pureplate.module.css
@@ -1,8 +1,21 @@
-.homeLogedIn {
- background: #ffffff;
- height: 100%;
- position: relative;
- overflow: hidden;
+a,
+button,
+input,
+select,
+h1,
+h2,
+h3,
+h4,
+h5,
+* {
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ border: none;
+ text-decoration: none;
+ appearance: none;
+ background: none;
+ -webkit-font-smoothing: antialiased;
}
.mapContainer {
@@ -213,42 +226,6 @@
bottom: 47.95%;
top: 50.68%;
}
-
-.header {
- border-style: solid;
- border-color: transparent;
- border-width: 0.0625rem;
- padding: 0.625rem 0.625rem 0.625rem 0.625rem;
- display: flex;
- flex-direction: row;
- gap: 0rem;
- align-items: center;
- justify-content: flex-start;
- width: 100%;
- height: 5rem;
- position: absolute;
- left: 0rem;
- top: 0rem;
- box-shadow: 0rem 0.0625rem 1.875rem 0rem rgba(0, 0, 0, 0.06);
-}
-
-@media (max-width: 1000px) {
- .header {
- padding: 0.625rem 0.625rem 0.625rem 0.625rem;
- }
-}
-
-.purePlateIcon {
- flex-shrink: 1;
- width: 70%;
- height: 70%;
- min-width: 50%;
- min-height: 50%;
- position: relative;
- align-items: center;
- object-fit: contain;
-}
-
.attributes {
padding: 0.625rem;
display: flex;
diff --git a/src/Search/Dropdown.jsx b/src/Search/Dropdown.jsx
new file mode 100644
index 0000000..2de64f8
--- /dev/null
+++ b/src/Search/Dropdown.jsx
@@ -0,0 +1,30 @@
+import React from "react";
+import styles from "./Dropdown.module.css";
+import historySearchIcon from "../assets/Icons/historySearchIcon.svg";
+
+function Dropdown({ dropDownList, dropDownItemIndex, clickDropDownItem, setDropDownItemIndex, dropdownWidth }) {
+ return (
+
+
+
+ {isSignUp ? (
+
+ -
+ {dropDownList.length === 0 && (
+
- No matching words found + )} + {dropDownList.map((dropDownItem, dropDownIndex) => ( +
- clickDropDownItem(dropDownItem)}
+ onMouseOver={() => setDropDownItemIndex(dropDownIndex)}
+ className={`${styles.dropDownItem} ${
+ dropDownItemIndex === dropDownIndex ? styles.selected : ""
+ }`}
+ >
+
+
+ {dropDownItem} ++
+ ))}
+
-