theme.tsx 2 KB
Newer Older
Kim, MinGyu's avatar
Kim, MinGyu committed
1
import React, { MouseEventHandler } from "react";
백승민's avatar
theme1    
백승민 committed
2
3
4

type ThemeProps = {
  handleClick: MouseEventHandler;
Kim, MinGyu's avatar
Kim, MinGyu committed
5
};
백승민's avatar
백승민 committed
6

Kim, MinGyu's avatar
Kim, MinGyu committed
7
export default function Theme({ handleClick }: ThemeProps) {
백승민's avatar
theme1    
백승민 committed
8
  return (
Kim, MinGyu's avatar
Kim, MinGyu committed
9
10
11
12
13
14
    <div className="overflow-x-auto flex rounded md:justify-center py-2 border-b-2 divide-x-2">
      <button
        id={"surfing"}
        onClick={handleClick}
        className="shrink-0 px-5 hover:text-sky-300"
      >
Kim, MinGyu's avatar
Kim, MinGyu committed
15
16
        서핑
      </button>
Kim, MinGyu's avatar
Kim, MinGyu committed
17
18
19
20
21
      <button
        id={"activity"}
        onClick={handleClick}
        className="shrink-0 px-5 hover:text-sky-300"
      >
Kim, MinGyu's avatar
Kim, MinGyu committed
22
23
        액티비티
      </button>
Kim, MinGyu's avatar
Kim, MinGyu committed
24
25
26
27
28
      <button
        id={"camping"}
        onClick={handleClick}
        className="shrink-0 px-5 hover:text-sky-300 "
      >
Kim, MinGyu's avatar
Kim, MinGyu committed
29
30
        캠핑
      </button>
Kim, MinGyu's avatar
Kim, MinGyu committed
31
      <button
백승민's avatar
백승민 committed
32
        id={"skiing"}
Kim, MinGyu's avatar
Kim, MinGyu committed
33
34
35
        onClick={handleClick}
        className="shrink-0 px-5 hover:text-sky-300"
      >
Kim, MinGyu's avatar
Kim, MinGyu committed
36
37
        스키
      </button>
Kim, MinGyu's avatar
Kim, MinGyu committed
38
39
40
41
42
      <button
        id={"boat"}
        onClick={handleClick}
        className="shrink-0 px-5 hover:text-sky-300"
      >
Kim, MinGyu's avatar
Kim, MinGyu committed
43
44
        보트
      </button>
Kim, MinGyu's avatar
Kim, MinGyu committed
45
46
47
48
49
      <button
        id={"desert"}
        onClick={handleClick}
        className="shrink-0 px-5 hover:text-sky-300"
      >
Kim, MinGyu's avatar
Kim, MinGyu committed
50
51
        사막
      </button>
Kim, MinGyu's avatar
Kim, MinGyu committed
52
53
54
55
56
      <button
        id={"golf"}
        onClick={handleClick}
        className="shrink-0 px-5 hover:text-sky-300"
      >
Kim, MinGyu's avatar
Kim, MinGyu committed
57
58
        골프
      </button>
Kim, MinGyu's avatar
Kim, MinGyu committed
59
60
61
62
63
      <button
        id={"cave"}
        onClick={handleClick}
        className="shrink-0 px-5 hover:text-sky-300"
      >
Kim, MinGyu's avatar
Kim, MinGyu committed
64
65
        동굴
      </button>
Kim, MinGyu's avatar
Kim, MinGyu committed
66
67
68
69
70
      <button
        id={"history"}
        onClick={handleClick}
        className="shrink-0 px-5 hover:text-sky-300"
      >
Kim, MinGyu's avatar
Kim, MinGyu committed
71
72
        문화재
      </button>
Kim, MinGyu's avatar
Kim, MinGyu committed
73
74
75
76
77
      <button
        id={"zoo"}
        onClick={handleClick}
        className="shrink-0 px-5 hover:text-sky-300"
      >
Kim, MinGyu's avatar
Kim, MinGyu committed
78
79
        동물원
      </button>
Kim, MinGyu's avatar
Kim, MinGyu committed
80
81
82
83
84
      <button
        id={"cycling"}
        onClick={handleClick}
        className="shrink-0 px-5 hover:text-sky-300"
      >
Kim, MinGyu's avatar
Kim, MinGyu committed
85
86
        사이클링
      </button>
백승민's avatar
백승민 committed
87
88
    </div>
  );
Kim, MinGyu's avatar
Kim, MinGyu committed
89
}