header.tsx 2.68 KB
Newer Older
Kim, MinGyu's avatar
Kim, MinGyu committed
1
import React, { useReducer, useState } from "react";
2
3
import { Link, Outlet } from "react-router-dom";
import { useAuth } from "../auth/auth.context";
백승민's avatar
theme1    
백승민 committed
4
5
6
7

import "tailwindcss/tailwind.css";

export default function Header() {
8
  const { logout } = useAuth();
Kim, MinGyu's avatar
Kim, MinGyu committed
9
10
11
12
13
14
15
  const [search, setSearch] = useState("");

  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const newvalue = e.target.value;
    setSearch(newvalue);
  };

16
  return (
Kim, MinGyu's avatar
Kim, MinGyu committed
17
    <div className="flex flex-col md:px-56 ">
백승민's avatar
백승민 committed
18
      <div className="flex flex-col-reverse pt-3 pb-12 border-b-2 bg-gradient-to-t from-sky-200">
Kim, MinGyu's avatar
Kim, MinGyu committed
19
20
21
22
23
24
25
26
27
28
29
30
31
        <div className="flex mt-5 justify-between pr-3">
          <button className="ml-3 shrink-0 text-2xl">
            <Link to="/" className="hover:text-sky-300 active:text-purple-500">
              Travel Report
            </Link>
          </button>
          <div className="flex  ">
            <input
              className="ml-10 focus:outline-none focus:border-y-4 focus:border-l-4 focus:border-sky-500 w-20 w-40 md:w-4/5 border-y-4 border-l-4 border-sky-300 pl-9 rounded-l-full focus:border-0"
              onChange={handleChange}
            />
            <button className="shrink-0 bg-white border-y-4  border-r-4 border-sky-500 rounded-r-full pr-4">
              검색
Kim, MinGyu's avatar
Kim, MinGyu committed
32
            </button>
Kim, MinGyu's avatar
Kim, MinGyu committed
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
          </div>
        </div>
        <div className="flex justify-end">
          <div className=" p-3 bg-transparent ">
            {useAuth().user.isLoggedIn ? (
              <div className="flex text-xs">
                <Link to="/profile" className="mr-2 ">
                  프로필
                </Link>
                <div className="border-0 border-r-2 border-black "></div>
                <div></div>
                <button
                  className="ml-2 mr-2 text-xs"
                  onClick={() => {
                    logout();
                  }}
                >
                  로그아웃
                </button>
                <div className="border-0 border-r-2 border-black"></div>
                <div></div>
              </div>
            ) : (
              <button className="shrink-0 bg-transparent pb-1">
                <Link
                  className="hover:text-sky-300 focus:text-purple-500 text-xs"
                  to="/login"
                >
                  로그인
                </Link>
              </button>
            )}
          </div>
          <button className="shrink-0 bg-transparent pr-3 text-xs">
            <Link
              to="/board"
              className="hover:text-sky-300 focus:text-purple-500"
            >
              게시판
            </Link>
          </button>
백승민's avatar
theme1    
백승민 committed
74
75
        </div>
      </div>
Kim, MinGyu's avatar
Kim, MinGyu committed
76

77
78
79
80
      <Outlet />
    </div>
  );
}