SafaElmali

import "../styles/productDetail.css";
import { useState } from "react";
import Modal from "./Modal";

const ProductDetail = () => {
  const [isOpen, setIsOpen] = useState(false);

  const handleOpen = () => {
    setIsOpen(true);
  };

SafaElmali

import { useState } from "react";
import Modal from "./components/ModalWithPortal";
import ProductDetail from "./components/ProductDetail";

const App = ()=> {
  const [product, setProduct] = useState({});

  return (
    <div className="container">
      <ProductDetail product={product} setProduct={setProduct} />

SafaElmali

import "../styles/modal.css";

const ModalWithoutPortal = ({ isOpen, setIsOpen, productName = "" }) => {
  if (!isOpen) return null;

  return (
    <div className="modal-container">
      <div className="modal-header">
        <h1>{productName}</h1>
      </div>

SafaElmali

import "../styles/modal.css";
import { createPortal } from "react-dom";

const ModalWithPortal = ({
  isOpenPortal,
  setIsOpenPortal,
  productName = "",
}) => {
  if (!isOpenPortal) return null;

SafaElmali

import "../styles/productDetail.css";
import { useState } from "react";
import ModalWithPortal from "./ModalWithPortal";
import ModalWithoutPortal from "./ModalWithoutPortal";

const ProductDetail = () => {
  const [isOpen, setIsOpen] = useState(false);
  const [isOpenPortal, setIsOpenPortal] = useState(false);

  const handleOpen = () => {

SafaElmali

import "../styles/topNav.css";

const TopNav = () => {
  return (
    <div className="topnav-container">
      <div className="navigation-container">
        <div className="brand-logo">
          <img
            src="https://cdn.dsmcdn.com/web/logo/ty-logo.svg"
            alt="trendyol logo"

SafaElmali

<div>
</div>

<style>
    body {
      background: #0b2429;
      display: flex;
      justify-content: center;
      align-items: center;
  }

SafaElmali

<div>
</div>

<style>
    body {
      background: #0b2429;
      display: flex;
      justify-content: center;
      align-items: center;
  }

SafaElmali

<div>
</div>

<style>
    body {
      background: #0b2429;
      display: flex;
      justify-content: center;
      align-items: center;
  }

SafaElmali

<div>
</div>

<style>
    body {
      background: #0b2429;
      display: flex;
      justify-content: center;
      align-items: center;
  }