initiate drf app

frontend/components/AddressSelector.tsx

@@ -0,0 +1,45 @@
+'use client'
+
+import React, { useState } from 'react'
+import TextInput from './ui/TextInput'
+import Button from './ui/Button'
+
+export default function AddressSelector() {
+  const [fromAddress, setFromAddress] = useState('')
+  const [toAddress, setToAddress] = useState('')
+
+  return (
+    <div className="bg-white rounded-xl shadow-lg p-4 sm:p-6 w-full my-2 sm:my-4">
+      <div className="flex flex-col sm:flex-row sm:items-end gap-4 sm:gap-3">
+        <div className="w-full sm:flex-[3] min-w-0 sm:px-1">
+          <TextInput
+            placeholder="Минск, Беларусь"
+            tooltip="Укажите пункт (Город/Страна), откуда необходимо забрать посылку."
+            label="Забрать посылку из"
+            value={fromAddress}
+            handleChange={(e) => setFromAddress(e.target.value)}
+            name="fromAddress"
+          />
+        </div>
+        <div className="w-full sm:flex-[3] min-w-0 sm:px-1">
+          <TextInput
+            placeholder="Москва, Россия"
+            label="Доставить посылку в"
+            tooltip="Укажите пункт (Город/Страна), куда необходимо доставить посылку."
+            value={toAddress}
+            handleChange={(e) => setToAddress(e.target.value)}
+            name="toAddress"
+          />
+        </div>
+        <Button
+          text="Найти перевозчика"
+          className="w-full sm:w-auto sm:flex-1 whitespace-nowrap bg-orange hover:bg-orange/80 text-white p-4"
+        />
+        <Button
+          text="Найти посылку"
+          className="w-full sm:w-auto sm:flex-1 whitespace-nowrap bg-gray-100 hover:bg-gray-200 text-gray-800 p-4"
+        />
+      </div>
+    </div>
+  )
+}

frontend/components/EmailHandler.tsx

@@ -0,0 +1,36 @@
+'use client'
+
+import React, { useState } from 'react'
+import Image from 'next/image'
+
+const EmailHandler = () => {
+  const [email, setEmail] = useState('')
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setEmail(e.target.value)
+  }
+
+  return (
+    <div className="relative w-full">
+      <input
+        type="email"
+        value={email}
+        onChange={handleChange}
+        name="email"
+        placeholder="Введите ваш e-mail"
+        className="w-full px-4 py-3 rounded-md bg-white text-black placeholder:text-gray-400"
+      />
+      <button className="absolute right-0 top-1/2 -translate-y-1/2  flex items-center justify-center cursor-pointer">
+        <Image
+          src="/images/subscribe.png"
+          alt="submit"
+          width={50}
+          height={50}
+          className="rounded-md"
+        />
+      </button>
+    </div>
+  )
+}
+
+export default EmailHandler

frontend/components/FAQ.tsx

@@ -0,0 +1,20 @@
+import React from 'react'
+import Accordion from './ui/Accordion'
+import { FAQProps } from '@/app/types'
+
+const FAQ: React.FC<FAQProps> = ({ faqs }) => {
+  return (
+    <div className="w-full max-w-[1250px] mx-auto">
+      <div className="pl-4 py-5 sticky">
+        <h2 className="text-3xl font-bold text-center py-4">
+          Часто задаваемые вопросы:
+        </h2>
+        {faqs.map((faq) => (
+          <Accordion key={faq.id} title={faq.title} content={faq.content} />
+        ))}
+      </div>
+    </div>
+  )
+}
+
+export default FAQ

frontend/components/Footer.tsx

@@ -0,0 +1,255 @@
+import React from 'react'
+import Image from 'next/image'
+import Link from 'next/link'
+import {
+  FaInstagram,
+  FaTelegram,
+  FaVk,
+  FaFacebook,
+  FaYoutube,
+  FaTiktok,
+} from 'react-icons/fa'
+import EmailHandler from './EmailHandler'
+
+const Footer = () => {
+  return (
+    <div>
+      <div className="bg-[#272424]">
+        <div className="flex flex-col md:flex-row px-6 py-8 w-[93%] mx-auto gap-8 md:gap-16">
+          {/* левый таб */}
+          <div className="flex flex-col space-y-5 w-full md:w-1/4 items-center md:items-start text-center md:text-left">
+            <Image
+              src="/images/footerLogo.png"
+              alt="logo"
+              width={50}
+              height={50}
+            />
+            <span className="text-sm text-gray-300">
+              Подпишись и будь в курсе всех событий, а также получай подарки и
+              бонусы от Trip With Bonus
+            </span>
+            <EmailHandler />
+            <div className="flex gap-4 justify-center md:justify-start">
+              <a
+                href="https://instagram.com"
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                <FaInstagram
+                  size={20}
+                  className="text-white hover:text-orange transition-colors"
+                />
+              </a>
+              <a
+                href="https://telegram.com"
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                <FaTelegram
+                  size={20}
+                  className="text-white hover:text-orange transition-colors"
+                />
+              </a>
+              <a
+                href="https://vk.com"
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                <FaVk
+                  size={20}
+                  className="text-white hover:text-orange transition-colors"
+                />
+              </a>
+              <a
+                href="https://facebook.com"
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                <FaFacebook
+                  size={20}
+                  className="text-white hover:text-orange transition-colors"
+                />
+              </a>
+              <a
+                href="https://tiktok.com"
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                <FaTiktok
+                  size={20}
+                  className="text-white hover:text-orange transition-colors"
+                />
+              </a>
+              <a
+                href="https://youtube.com"
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                <FaYoutube
+                  size={20}
+                  className="text-white hover:text-orange transition-colors"
+                />
+              </a>
+            </div>
+          </div>
+
+          {/* ссылки */}
+          <div className="flex flex-col md:flex-row justify-between w-full md:w-2/4 space-y-8 md:space-y-0 items-center md:items-start text-center md:text-left">
+            {/* информация */}
+            <div className="flex flex-col space-y-4 items-center md:items-start">
+              <div className="text-white text-xl font-medium md:pb-5">
+                Информация
+              </div>
+              <div className="flex flex-col space-y-1">
+                <Link
+                  href="/"
+                  className="text-gray-300 hover:text-orange transition-colors"
+                >
+                  Перевезти посылку
+                </Link>
+                <Link
+                  href="/"
+                  className="text-gray-300 hover:text-orange transition-colors"
+                >
+                  Отправить посылку
+                </Link>
+                <Link
+                  href="/"
+                  className="text-gray-300 hover:text-orange transition-colors"
+                >
+                  Для отправителя
+                </Link>
+                <Link
+                  href="/"
+                  className="text-gray-300 hover:text-orange transition-colors"
+                >
+                  Для перевозчика
+                </Link>
+              </div>
+            </div>
+
+            {/* О Trip With Bonus */}
+            <div className="flex flex-col space-y-4 items-center md:items-start">
+              <div className="text-white text-xl font-medium md:pb-5">
+                О Trip With Bonus
+              </div>
+              <div className="flex flex-col space-y-1">
+                <Link
+                  href="/"
+                  className="text-gray-300 hover:text-orange transition-colors"
+                >
+                  Новости
+                </Link>
+                <Link
+                  href="/"
+                  className="text-gray-300 hover:text-orange transition-colors"
+                >
+                  Партнерам
+                </Link>
+                <Link
+                  href="/"
+                  className="text-gray-300 hover:text-orange transition-colors"
+                >
+                  Реклама
+                </Link>
+              </div>
+            </div>
+            <div className="flex flex-col space-y-4 items-center md:items-start">
+              <div className="text-white text-xl font-medium md:pb-5">
+                Кооперация
+              </div>
+              <div className="flex flex-col space-y-1">
+                <Link
+                  href="/"
+                  className="text-gray-300 hover:text-orange transition-colors"
+                >
+                  Реклама
+                </Link>
+                <Link
+                  href="/"
+                  className="text-gray-300 hover:text-orange transition-colors"
+                >
+                  Поддержка
+                </Link>
+                <Link
+                  href="/"
+                  className="text-gray-300 hover:text-orange transition-colors"
+                >
+                  Контакты
+                </Link>
+              </div>
+            </div>
+          </div>
+
+          <div className="flex flex-col space-y-4 w-full md:w-1/4 items-center md:items-start text-center md:text-left">
+            <div className="text-white text-xl font-medium md:pb-5">
+              Свяжитесь с нами:
+            </div>
+            <div>
+              <div className="flex flex-col space-y-3">
+                <a
+                  href="tel:+375291234567"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="hover:opacity-80 transition-opacity text-gray-300 hover:text-orange"
+                >
+                  + 7 (777) 777-77-77{' '}
+                </a>
+                <a
+                  href="mailto:sales@tripwb.com"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="hover:opacity-80 transition-opacity text-gray-300 hover:text-orange"
+                >
+                  sales@tripwb.com
+                </a>
+                <a
+                  href="mailto:support@tripwb.com"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="hover:opacity-80 transition-opacity text-gray-300 hover:text-orange"
+                >
+                  support@tripwb.com
+                </a>
+              </div>
+              <div className="flex flex-col md:flex-row gap-2 mt-7 justify-center md:justify-start">
+                <Link
+                  href="/register"
+                  className="bg-orange hover:bg-orange/80 text-white px-4 py-2 rounded-2xl text-base font-medium"
+                >
+                  Регистрация
+                </Link>
+                <Link
+                  href="/login"
+                  className="text-white hover:text-orange transition-colors py-2"
+                >
+                  Войти
+                </Link>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Нижняя часть футера */}
+      <div>
+        <div className="flex flex-col justify-between md:flex-row px-6 py-4 md:py-8 w-[95%] mx-auto text-center md:text-left">
+          <div>Copyright © {new Date().getFullYear()}. Все права защищены.</div>
+          <div className="flex flex-col md:flex-row py-4 md:py-0 md:space-x-5 items-center md:items-start">
+            <Link href="/" className="hover:text-orange">
+              Публичная оферта
+            </Link>
+            <Link href="/" className="hover:text-orange">
+              Политика конфиденциальности
+            </Link>
+            <Link href="/" className="hover:text-orange">
+              Правила пользования сервисом
+            </Link>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default Footer

frontend/components/Header.tsx

@@ -0,0 +1,66 @@
+import React from 'react'
+import Image from 'next/image'
+import Link from 'next/link'
+import Burger from './ui/Burger'
+import LangSwitcher from './LangSwitcher'
+import Button from './ui/Button'
+
+const Header = () => {
+  return (
+    <div className="flex justify-between items-center px-6 py-8 w-[93%] mx-auto">
+      <div className="flex items-center justify-center space-x-10">
+        <Image
+          src="/images/logo.png"
+          alt="logo"
+          width={50}
+          height={50}
+          priority
+        />
+
+        <div className="hidden md:block">
+          <Burger />
+        </div>
+        <Link
+          href="/"
+          className="text-base font-medium px-4 hover:text-orange transition-colors hidden md:block"
+        >
+          Могу взять посылку
+        </Link>
+      </div>
+      <div className="flex items-center justify-center space-x-10">
+        <LangSwitcher />
+        <Button
+          text="Разместить объявление"
+          className="hidden md:block bg-orange hover:bg-orange/80 px-4 py-3 text-white"
+        />
+
+        <div className="hidden md:block text-base font-medium">
+          <Link
+            href="/register"
+            className="hover:text-orange transition-colors"
+          >
+            Регистрация
+          </Link>
+          <span> / </span>
+          <Link href="/login" className="hover:text-orange transition-colors">
+            Войти
+          </Link>
+        </div>
+
+        <div className="flex items-center space-x-4 md:hidden">
+          <Link href="/login">
+            <Image
+              src="/images/userlogo.png"
+              alt="user"
+              width={24}
+              height={24}
+            />
+          </Link>
+          <Burger />
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default Header

frontend/components/LangSwitcher.tsx

@@ -0,0 +1,31 @@
+'use client'
+
+import React, { useState } from 'react'
+
+const LangSwitcher = () => {
+  const [selectedLang, setSelectedLang] = useState('ru')
+
+  return (
+    <div className="flex items-center space-x-2">
+      <button
+        onClick={() => setSelectedLang('ru')}
+        className={`${
+          selectedLang === 'ru' ? 'text-orange' : 'text-gray-500'
+        } cursor-pointer`}
+      >
+        RU
+      </button>
+      <span className="text-gray-500">/</span>
+      <button
+        onClick={() => setSelectedLang('en')}
+        className={`${
+          selectedLang === 'en' ? 'text-orange' : 'text-gray-500'
+        } cursor-pointer`}
+      >
+        EN
+      </button>
+    </div>
+  )
+}
+
+export default LangSwitcher

frontend/components/News.tsx

@@ -0,0 +1,44 @@
+import React from 'react'
+import Image from 'next/image'
+import Link from 'next/link'
+import { news } from '@/app/staticData'
+import ShowMore from './ui/ShowMore'
+
+interface NewsItem {
+  id: number
+  title: string
+  description: string
+  image: string
+  slug: string
+}
+
+export default function News() {
+  return (
+    <div className="w-full max-w-[1250px] mx-auto px-4 sm:px-6 mb-20">
+      <h2 className="text-3xl sm:text-4xl text-center font-bold mb-10">
+        Последние новости
+      </h2>
+
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
+        {news.map((item) => (
+          <Link href={`/news/${item.slug}`} key={item.id}>
+            <div className="flex flex-col bg-white rounded-2xl shadow-md overflow-hidden hover:shadow-2xl transition-shadow duration-500 p-6">
+              <div className="relative h-[200px]">
+                <Image
+                  src={item.image}
+                  alt={item.title}
+                  fill
+                  className="object-cover rounded-2xl"
+                />
+              </div>
+              <div className="pt-6">
+                <h3 className="text-base font-semibold mb-3">{item.title}</h3>
+                <ShowMore text={item.description} />
+              </div>
+            </div>
+          </Link>
+        ))}
+      </div>
+    </div>
+  )
+}

frontend/components/ui/Accordion.tsx

@@ -0,0 +1,75 @@
+'use client'
+
+import React, { useState, useRef, useEffect } from 'react'
+import { IoIosAdd, IoIosClose } from 'react-icons/io'
+import { AccordionProps } from '@/app/types'
+
+const Accordion: React.FC<AccordionProps> = ({ title, content }) => {
+  const [isOpen, setIsOpen] = useState(false)
+  const contentRef = useRef<HTMLDivElement>(null)
+  const [contentHeight, setContentHeight] = useState<number>(0)
+
+  useEffect(() => {
+    if (contentRef.current) {
+      setContentHeight(contentRef.current.scrollHeight)
+    }
+  }, [content])
+
+  const renderContent = () => {
+    if (typeof content === 'string') {
+      return (
+        <div
+          className="text-md font-medium [&>ol]:list-decimal [&>ol]:pl-4 [&_ul]:list-disc [&_ul]:py-2 [&_ul]:pl-4 [&_li]:mb-2 [&_p]:mt-1 [&_a]:text-orange [&_a]:hover:underline"
+          dangerouslySetInnerHTML={{ __html: content }}
+        />
+      )
+    }
+    return <div className="text-md font-medium">{content}</div>
+  }
+
+  return (
+    <div className="relative bg-white rounded-2xl my-4">
+      <button
+        className="flex justify-between items-center py-4 px-6  hover:bg-gray-50 rounded-2xl space-x-9 w-full"
+        onClick={() => setIsOpen(!isOpen)}
+      >
+        <h3 className="text-xl font-bold text-left">{title}</h3>
+        <div className="w-6 h-6 flex items-center justify-center rounded-full border border-orange">
+          <div
+            className={`transition-all duration-500 ${
+              isOpen ? 'rotate-180' : 'rotate-0'
+            }`}
+          >
+            {isOpen ? (
+              <IoIosClose className="w-5 h-5 text-orange" />
+            ) : (
+              <IoIosAdd className="w-5 h-5 text-orange" />
+            )}
+          </div>
+        </div>
+      </button>
+
+      <div
+        ref={contentRef}
+        style={
+          { '--accordion-height': `${contentHeight}px` } as React.CSSProperties
+        }
+        className={`
+          grid
+          transition-all duration-500 ease-&lsqb;cubic-bezier(0.4,0,0.2,1)&rsqb;
+          ${
+            isOpen ? 'grid-rows-[1fr] opacity-100' : 'grid-rows-[0fr] opacity-0'
+          }
+        `}
+      >
+        <div className="overflow-hidden">
+          <div className=" rounded-xl px-6 mt-2">
+            <div className="py-4">{renderContent()}</div>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default Accordion

frontend/components/ui/Burger.tsx

@@ -0,0 +1,82 @@
+'use client'
+
+import React, { useState } from 'react'
+import Link from 'next/link'
+import Button from './Button'
+const Burger = () => {
+  const [isOpen, setIsOpen] = useState(false)
+
+  return (
+    <>
+      <button
+        onClick={() => setIsOpen(!isOpen)}
+        className="relative z-50 w-8 h-8 flex flex-col justify-center items-center"
+      >
+        <div className="relative w-8 h-8">
+          <span
+            className={`absolute h-0.5 bg-orange transition-all duration-300 ease-in-out ${
+              isOpen ? 'w-8 rotate-45 top-4' : 'w-8 top-2'
+            }`}
+          ></span>
+          <span
+            className={`absolute h-0.5 bg-orange transition-all duration-300 ease-in-out ${
+              isOpen ? 'w-0 opacity-0 top-4' : 'w-8 top-4'
+            }`}
+          ></span>
+          <span
+            className={`absolute h-0.5 bg-orange transition-all duration-300 ease-in-out ${
+              isOpen ? 'w-8 -rotate-45 top-4' : 'w-8 top-6'
+            }`}
+          ></span>
+        </div>
+      </button>
+
+      {/* меню */}
+      <div
+        className={`fixed z-50 left-0 w-full bg-[#eeebeb] shadow-lg transition-all duration-300 ease-in-out origin-top ${
+          isOpen
+            ? 'top-[80px] h-[calc(100vh-80px)] opacity-100 scale-y-100'
+            : 'top-[80px] h-0 opacity-0 scale-y-0'
+        } ${isOpen ? 'pointer-events-auto' : 'pointer-events-none'}`}
+      >
+        <div
+          className={`flex flex-col items-center pt-12 space-y-8 transition-all duration-300 ${
+            isOpen ? 'opacity-100 translate-y-0' : 'opacity-0 -translate-y-4'
+          }`}
+        >
+          <Link
+            href="/"
+            className="text-xl hover:text-orange transition-colors duration-200"
+            onClick={() => setIsOpen(false)}
+          >
+            Ссылка 1
+          </Link>
+          <Link
+            href="/search"
+            className="text-xl hover:text-orange transition-colors duration-200"
+            onClick={() => setIsOpen(false)}
+          >
+            Ссылка 2
+          </Link>
+          <Link
+            href="/about"
+            className="text-xl hover:text-orange transition-colors duration-200"
+            onClick={() => setIsOpen(false)}
+          >
+            Ссылка 3
+          </Link>
+          <Link
+            href="/"
+            className="text-xl hover:text-orange transition-colors duration-200"
+            onClick={() => setIsOpen(false)}
+          >
+            Могу взять посылку
+          </Link>
+          <Button text="Разместить объявление" />
+        </div>
+      </div>
+    </>
+  )
+}
+
+export default Burger

frontend/components/ui/Button.tsx

@@ -0,0 +1,16 @@
+import React from 'react'
+import { ButtonProps } from '@/app/types/index'
+
+const Button = ({ onClick, className, text, type }: ButtonProps) => {
+  return (
+    <button
+      onClick={onClick}
+      className={`text-base font-medium rounded-2xl cursor-pointer ${className}`}
+      type={type}
+    >
+      <span>{text}</span>
+    </button>
+  )
+}
+
+export default Button

frontend/components/ui/ShowMore.tsx

@@ -0,0 +1,48 @@
+'use client'
+import { useState } from 'react'
+
+interface ShowMoreProps {
+  text?: string
+}
+
+const ShowMore = ({ text }: ShowMoreProps) => {
+  const [isExpandedMobile, setIsExpandedMobile] = useState(false)
+  const [isExpandedDesktop, setIsExpandedDesktop] = useState(false)
+
+  if (!text) return null
+
+  const maxLength = {
+    mobile: 100,
+    desktop: 100,
+  }
+
+  return (
+    <div className="pb-5">
+      {/* мобила */}
+      <div
+        onClick={() => setIsExpandedMobile(!isExpandedMobile)}
+        className={`lg:hidden text-justify relative cursor-pointer overflow-hidden
+          ${isExpandedMobile ? 'max-h-[2000px]' : 'max-h-[300px]'}`}
+      >
+        {isExpandedMobile ? text : text.slice(0, maxLength.mobile)}
+        {!isExpandedMobile && text.length > maxLength.mobile && (
+          <div className="absolute bottom-0 left-0 right-0 h-12 bg-gradient-to-t from-white to-transparent" />
+        )}
+      </div>
+
+      {/* десктоп */}
+      <div
+        onClick={() => setIsExpandedDesktop(!isExpandedDesktop)}
+        className={`hidden lg:block text-justify relative cursor-pointer overflow-hidden
+          ${isExpandedDesktop ? 'max-h-[2000px]' : 'max-h-[300px]'}`}
+      >
+        {isExpandedDesktop ? text : text.slice(0, maxLength.desktop)}
+        {!isExpandedDesktop && text.length > maxLength.desktop && (
+          <div className="absolute bottom-0 left-0 right-0 h-12 bg-gradient-to-t from-white to-transparent" />
+        )}
+      </div>
+    </div>
+  )
+}
+
+export default ShowMore

frontend/components/ui/TextInput.tsx

@@ -0,0 +1,41 @@
+import React from 'react'
+import { TextInputProps } from '@/app/types'
+import Tooltip from './Tooltip'
+
+const TextInput = ({
+  value,
+  handleChange,
+  label,
+  placeholder,
+  name,
+  type = 'text',
+  className = '',
+  maxLength,
+  tooltip,
+}: TextInputProps) => {
+  return (
+    <div className={className}>
+      {label && (
+        <div className="flex items-center gap-2 my-2">
+          <label className="font-medium text-sm text-gray-500" htmlFor={name}>
+            {label}
+          </label>
+          {tooltip && <Tooltip content={tooltip} />}
+        </div>
+      )}
+      <input
+        type={type}
+        id={name}
+        name={name}
+        placeholder={placeholder}
+        value={value || ''}
+        onChange={handleChange}
+        className="w-full p-4 border border-gray-300 text-black rounded-xl focus:outline-none focus:ring-2 focus:ring-mainblocks focus:bg-white"
+        autoComplete={name}
+        maxLength={maxLength}
+      />
+    </div>
+  )
+}
+
+export default TextInput

frontend/components/ui/Tooltip.tsx

@@ -0,0 +1,34 @@
+'use client'
+
+import { useState } from 'react'
+import { CiCircleInfo } from 'react-icons/ci'
+
+interface TooltipProps {
+  content: string | React.ReactNode
+}
+
+const Tooltip = ({ content }: TooltipProps) => {
+  const [showTooltip, setShowTooltip] = useState(false)
+
+  return (
+    <div className="relative flex items-center overflow-visible">
+      <button
+        type="button"
+        className="text-orange hover:text-orange/80 focus:outline-none"
+        onMouseEnter={() => setShowTooltip(true)}
+        onMouseLeave={() => setShowTooltip(false)}
+        onClick={() => setShowTooltip(!showTooltip)}
+      >
+        <CiCircleInfo className="w-4 h-4" />
+      </button>
+      {showTooltip && (
+        <div className="absolute bottom-full left-1/2 -translate-x-1/2 mb-3 px-4 py-2 bg-white rounded-xl text-center shadow-lg text-sm text-gray-700 w-max max-w-xs z-10">
+          {content}
+          <div className="absolute -bottom-2 left-1/2 -translate-x-1/2 w-2 h-2 bg-white transform rotate-45"></div>
+        </div>
+      )}
+    </div>
+  )
+}
+
+export default Tooltip