-
Notifications
You must be signed in to change notification settings - Fork 0
/
search.jsx
153 lines (152 loc) · 5.73 KB
/
search.jsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
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
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
import {
SearchIcon,
ArrowRight,
ArrowUpRight,
Heart,
Bookmark,
} from "lucide-react";
import React from "react";
export const Search = () => {
const searchResult = [
{
title: "Heritage building",
topic: "",
tag: "Heritage",
},
{
title: "The Hedberg Cultural Building",
topic: "Heritage building",
tag: "",
},
{
title: "UNESCO Removes Liverpool's World Heritage Statue and bla ble blu",
topic: "Article news",
tag: "",
},
{
title: "The Heritage / CYS.ASDO",
topic: "Article",
tag: "",
},
];
return (
<div className="shadow rounded-xl dark:bg-gray-800/50 dark:border-gray-700 w-full max-w-[650px] mx-auto">
{/* search input */}
<div className="flex justify-between items-center gap-4 p-5">
<div className="flex gap-2">
<SearchIcon />
<input
type="text"
placeholder="Herita"
className="caret-purple-700 outline-none bg-transparent"
/>
</div>
<button className="font-semibold hover:underline text-xs xs:text-base">Clear</button>
</div>
{/* navigation menu */}
<div className="menu border-b dark:border-gray-700 mb-5">
<nav className="px-5">
<ul className="flex gap-5 text-[16px] text-gray-400 font-semibold">
<li className="py-2 cursor-pointer active text-purple-700 border-b-3 border-purple-700">
<span className="inline-block mr-2">All</span>
<span className="text-xs font-normal px-2 py-[2px] bg-[#E3DCFF] dark:bg-[#a9a0cd] rounded-md">
99+
</span>
</li>
<li className="py-2 cursor-pointer">
<span className="inline-block mr-2">Project</span>
<span className="text-xs font-normal px-2 py-[2px] bg-[#F1F1F1] dark:bg-[#434343] rounded-md">
42
</span>
</li>
<li className="py-2 cursor-pointer">
<span className="inline-block mr-2">Article</span>
<span className="text-xs font-normal px-2 py-[2px] bg-[#F1F1F1] dark:bg-[#434343] rounded-md">
17
</span>
</li>
<li className="py-2 cursor-pointer">
<sp className="inline-block mr-2"an>Event</sp>
<span className="text-xs font-normal px-2 py-[2px] bg-[#F1F1F1] dark:bg-[#434343] rounded-md">
8
</span>
</li>
</ul>
</nav>
</div>
{/* result */}
<div className="result">
{/* related topic */}
<div className="related mb-5">
<h3 className="uppercase text-gray-400 text-xs mb-3 font-semibold tracking-wider px-5">
Related Topic
</h3>
<div className="flex flex-wrap gap-3 px-5">
<span className="px-2 py-1 rounded-md font-semibold bg-[#EFEFEF] dark:bg-[#2e2e2e] whitespace-nowrap text-sm">
Landscape architecture
</span>
<span className="px-2 py-1 rounded-md font-semibold bg-[#EFEFEF] dark:bg-[#2e2e2e] whitespace-nowrap text-sm">
Historical building
</span>
<span className="px-2 py-1 rounded-md font-semibold bg-[#EFEFEF] dark:bg-[#2e2e2e] whitespace-nowrap text-sm">
Urban design
</span>
</div>
</div>
{/* search result */}
<div className="list">
<h3 className="uppercase text-gray-400 text-xs font-semibold tracking-wider px-5">
Search Result
</h3>
<div>
{searchResult.map((item, i) => {
return (
<div key={i} className="px-5 hover:bg-[#F0ECFF] dark:hover:bg-gray-900/50 transition-all cursor-pointer group">
<div className="py-3 border-b dark:border-gray-700 flex justify-between items-center gap-4">
<div className="overflow-hidden space-y-1">
<h4 className="font-[500] truncate">{item.title}</h4>
<p className="text-xs text-gray-400">
{item.tag && (
<>
See all project with tag:{" "}
<a href="#" className="hover:text-purple-700">
Heritage
</a>
</>
)}
{item.topic && item.topic}
</p>
</div>
<div className="hidden gap-2 group-hover:flex">
<ArrowUpRight
size={27}
className="p-[5px] hover:bg-[#E1DAFC] dark:hover:bg-[#27272e] rounded-full transition-all"
/>
<Heart
size={27}
className="p-[5px] hover:bg-[#E1DAFC] dark:hover:bg-[#27272e] rounded-full transition-all"
/>
<Bookmark
size={27}
className="p-[5px] hover:bg-[#E1DAFC] dark:hover:bg-[#27272e] rounded-full transition-all"
/>
</div>
</div>
</div>
);
})}
</div>
</div>
</div>
{/* other actions */}
<div className="action px-5 py-6 flex justify-between font-semibold text-purple-700">
<a href="#" className="hover:underline transition-all">
See all result <ArrowRight className="inline-block mb-1" size={15} />
</a>
<a href="#" className="hover:underline transition-all">
Search settings
</a>
</div>
</div>
);
};