|
| 1 | +import React, { useState } from 'react'; |
| 2 | +import styled from 'styled-components'; |
| 3 | +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; |
| 4 | +import { faFlag, faMapMarkerAlt, faCalendarAlt, faShareAlt } from '@fortawesome/free-solid-svg-icons'; |
| 5 | + |
| 6 | +const shareContent = (url) => { |
| 7 | + if (navigator.share) { |
| 8 | + navigator |
| 9 | + .share({ |
| 10 | + title: 'Check out this event!', |
| 11 | + text: 'Explore and participate on this amazing tech events!', |
| 12 | + url: url, |
| 13 | + }) |
| 14 | + .then(() => console.log('Successful share')) |
| 15 | + .catch((error) => console.log('Error sharing', error)); |
| 16 | + } else { |
| 17 | + alert('Web Share API is not supported in your browser.'); |
| 18 | + } |
| 19 | +}; |
| 20 | + |
| 21 | +// List of Global Tech Events |
| 22 | + |
| 23 | +const techevents = [ |
| 24 | + { |
| 25 | + organizer: 'Organizer Name', |
| 26 | + title: 'Event Name', |
| 27 | + location: 'Event Location', |
| 28 | + date: 'Event Date', |
| 29 | + domains: ['Open Innovation', 'No Restrictions'], |
| 30 | + applyLink: '#', |
| 31 | + poster: '/assets/Coming Soon.png', |
| 32 | + shareLink: '#comingsoon', |
| 33 | + }, |
| 34 | +]; |
| 35 | + |
| 36 | +const StyledtecheventsCard = styled.div` |
| 37 | + position: relative; |
| 38 | + border: 1px solid rgb(182, 228, 250); |
| 39 | + background: linear-gradient(to right, rgba(15, 27, 53, 0.44), rgba(0, 43, 62, 0.43)); |
| 40 | + border-radius: 0.5rem; |
| 41 | + overflow: hidden; |
| 42 | + transition: |
| 43 | + transform 0.3s, |
| 44 | + box-shadow 0.3s; |
| 45 | + width: 100%; |
| 46 | + max-width: 350px; /* Increased width */ |
| 47 | + margin: 0.5rem; /* Decreased gap */ |
| 48 | +
|
| 49 | + &:hover { |
| 50 | + transform: scale(1.05); |
| 51 | + box-shadow: 0 0 20px rgba(0, 172, 255, 0.6); |
| 52 | + } |
| 53 | +
|
| 54 | + .dot { |
| 55 | + width: 5px; |
| 56 | + aspect-ratio: 1; |
| 57 | + position: absolute; |
| 58 | + background-color: #fff; |
| 59 | + box-shadow: 0 0 10px #ffffff; |
| 60 | + border-radius: 100px; |
| 61 | + z-index: 2; |
| 62 | + right: 0; |
| 63 | + top: 0; |
| 64 | + animation: moveDot 6s linear infinite; |
| 65 | + } |
| 66 | +
|
| 67 | + @keyframes moveDot { |
| 68 | + 0% { |
| 69 | + top: 0; |
| 70 | + right: 0; |
| 71 | + } |
| 72 | + 25% { |
| 73 | + top: 0; |
| 74 | + right: calc(100% - 5px); |
| 75 | + } |
| 76 | + 50% { |
| 77 | + top: calc(100% - 5px); |
| 78 | + right: calc(100% - 5px); |
| 79 | + } |
| 80 | + 75% { |
| 81 | + top: calc(100% - 5px); |
| 82 | + right: 0; |
| 83 | + } |
| 84 | + 100% { |
| 85 | + top: 0; |
| 86 | + right: 0; |
| 87 | + } |
| 88 | + } |
| 89 | +
|
| 90 | + .status-user { |
| 91 | + width: 8px; |
| 92 | + height: 8px; |
| 93 | + margin-right: 4px; |
| 94 | + border-radius: 50%; |
| 95 | + outline: solid 2px var(--bg-color, #fff); |
| 96 | + background-color: var(--online-status, #00a6fb); |
| 97 | + transition: var(--btn-transition, 0.5s); |
| 98 | + animation: active-status 2s ease-in-out infinite; |
| 99 | + } |
| 100 | +
|
| 101 | + @keyframes active-status { |
| 102 | + 0%, |
| 103 | + 100% { |
| 104 | + opacity: 1; |
| 105 | + } |
| 106 | + 50% { |
| 107 | + opacity: 0.2; |
| 108 | + } |
| 109 | + } |
| 110 | +`; |
| 111 | + |
| 112 | +const TecheventsCardComponent = ({ organizer, title, location, date, domains, applyLink, poster, shareLink }) => { |
| 113 | + return ( |
| 114 | + <StyledtecheventsCard id={shareLink.substring(1)}> |
| 115 | + {/* <div className="dot"></div> */} |
| 116 | + <div className="flex items-center justify-between p-2"> |
| 117 | + <span className="text-sm font-semibold text-white"> |
| 118 | + <FontAwesomeIcon icon={faFlag} className="mr-1 text-[#00a6fb]" /> {organizer} |
| 119 | + </span> |
| 120 | + <a |
| 121 | + href={applyLink} |
| 122 | + target="_blank" |
| 123 | + rel="noopener noreferrer" |
| 124 | + className="bg-gray-1000 hover:bg-gray-1000 text-semibold relative flex items-center rounded-full border border-[#00a6fb] px-2 py-1 text-gray-300" |
| 125 | + > |
| 126 | + <div className="status-user" style={{ marginRight: '8px' }} /> |
| 127 | + Apply Now |
| 128 | + </a> |
| 129 | + </div> |
| 130 | + |
| 131 | + <div className="h-50 relative w-full overflow-hidden rounded-xl p-2 shadow-md"> |
| 132 | + <div className="absolute bottom-3 right-3 z-10"> |
| 133 | + <button |
| 134 | + onClick={() => shareContent(window.location.href.split('#')[0] + shareLink)} |
| 135 | + className="bg-gray-1000 hover:bg-slate-1000 flex items-center justify-center gap-2 rounded-xl border border-[#00a6fb] bg-opacity-50 px-2 py-1 text-xs text-white backdrop-blur-md transition-colors" |
| 136 | + > |
| 137 | + <FontAwesomeIcon icon={faShareAlt} /> |
| 138 | + Share |
| 139 | + </button> |
| 140 | + </div> |
| 141 | + <img |
| 142 | + src={poster} |
| 143 | + alt={`${title} Poster`} |
| 144 | + className="h-full w-full rounded-lg object-cover" |
| 145 | + onError={(e) => { |
| 146 | + e.target.onerror = null; |
| 147 | + e.target.src = '/images/default.png'; |
| 148 | + }} |
| 149 | + /> |
| 150 | + </div> |
| 151 | + |
| 152 | + <h2 className="mt-1 p-1 text-center text-lg font-bold text-white">{title}</h2> |
| 153 | + |
| 154 | + <div className="flex justify-between p-2 text-sm text-[#00a6fb]"> |
| 155 | + <span> |
| 156 | + <FontAwesomeIcon icon={faMapMarkerAlt} className="mr-1 text-white" /> {location} |
| 157 | + </span> |
| 158 | + <span> |
| 159 | + <FontAwesomeIcon icon={faCalendarAlt} className="mr-1 text-white" /> {date} |
| 160 | + </span> |
| 161 | + </div> |
| 162 | + |
| 163 | + <div className="mt-2 flex flex-wrap justify-center gap-2 p-2"> |
| 164 | + {domains.map((domain, idx) => ( |
| 165 | + <span |
| 166 | + key={idx} |
| 167 | + className="bg-gray-1000 rounded-full border border-[#00a6fb] px-2 py-1 text-xs text-gray-300" |
| 168 | + > |
| 169 | + {domain} |
| 170 | + </span> |
| 171 | + ))} |
| 172 | + </div> |
| 173 | + </StyledtecheventsCard> |
| 174 | + ); |
| 175 | +}; |
| 176 | + |
| 177 | +<style> |
| 178 | + {` |
| 179 | + @import url('https://fonts.googleapis.com/css2?family=Merriweather+Sans:wght@300&display=swap'); |
| 180 | +
|
| 181 | + @font-face { |
| 182 | + font-family: "MerriweatherSans-SemiBold"; |
| 183 | + src: url('/fonts/MerriweatherSans-SemiBold.ttf') format('truetype'); |
| 184 | + font-weight: normal; |
| 185 | + font-style: normal; |
| 186 | + } |
| 187 | + `} |
| 188 | +</style>; |
| 189 | + |
| 190 | +const StyledtecheventsListContainer = styled.div` |
| 191 | + display: flex; |
| 192 | + flex-wrap: wrap; |
| 193 | + justify-content: center; |
| 194 | + gap: 0.5rem; /* Decreased gap */ |
| 195 | + padding: 1rem; |
| 196 | +
|
| 197 | + @media (min-width: 768px) { |
| 198 | + justify-content: space-around; |
| 199 | + } |
| 200 | +
|
| 201 | + @media (min-width: 1024px) { |
| 202 | + justify-content: center; |
| 203 | + } |
| 204 | +`; |
| 205 | + |
| 206 | +const FilterContainer = styled.div` |
| 207 | + display: flex; |
| 208 | + flex-direction: row; |
| 209 | + align-items: center; |
| 210 | + justify-content: center; |
| 211 | + flex-wrap: wrap; |
| 212 | + gap: 1rem; |
| 213 | + margin-bottom: 2rem; |
| 214 | +
|
| 215 | + input, |
| 216 | + select { |
| 217 | + padding: 0.75rem 1rem; /* Adjusted padding */ |
| 218 | + border: 1px solid #00a6fb; |
| 219 | + border-radius: 9999px; /* fully rounded */ |
| 220 | + background: rgba(15, 27, 53, 0.9); |
| 221 | + color: #ffffff; |
| 222 | + font-size: 1rem; |
| 223 | + min-width: 220px; |
| 224 | + transition: all 0.3s ease-in-out; |
| 225 | +
|
| 226 | + &::placeholder { |
| 227 | + color: #a0aec0; |
| 228 | + } |
| 229 | +
|
| 230 | + &:hover { |
| 231 | + background: rgba(25, 37, 67, 0.95); |
| 232 | + border-color: #14c8ff; |
| 233 | + transform: scale(1.02); |
| 234 | + } |
| 235 | +
|
| 236 | + &:focus { |
| 237 | + outline: none; |
| 238 | + border-color: #14c8ff; |
| 239 | + box-shadow: 0 0 0 2px rgba(20, 200, 255, 0.4); |
| 240 | + } |
| 241 | + } |
| 242 | +`; |
| 243 | + |
| 244 | +const TecheventsList = () => { |
| 245 | + const [locationFilter, setLocationFilter] = useState(''); |
| 246 | + const [monthFilter, setMonthFilter] = useState(''); |
| 247 | + const [domainFilter, setDomainFilter] = useState(''); |
| 248 | + |
| 249 | + const filteredtechevents = techevents.filter((techevents) => { |
| 250 | + const matchesLocation = locationFilter |
| 251 | + ? techevents.location.toLowerCase().includes(locationFilter.toLowerCase()) |
| 252 | + : true; |
| 253 | + const matchesMonth = monthFilter |
| 254 | + ? new Date(techevents.date.split(' - ')[0]).getMonth() + 1 === parseInt(monthFilter) |
| 255 | + : true; |
| 256 | + const matchesDomain = domainFilter |
| 257 | + ? techevents.domains.some((domain) => domain.toLowerCase().includes(domainFilter.toLowerCase())) |
| 258 | + : true; |
| 259 | + return matchesLocation && matchesMonth && matchesDomain; |
| 260 | + }); |
| 261 | + |
| 262 | + return ( |
| 263 | + <> |
| 264 | + <FilterContainer> |
| 265 | + <input |
| 266 | + type="text" |
| 267 | + placeholder="Search by location" |
| 268 | + value={locationFilter} |
| 269 | + onChange={(e) => setLocationFilter(e.target.value)} |
| 270 | + /> |
| 271 | + <select value={monthFilter} onChange={(e) => setMonthFilter(e.target.value)}> |
| 272 | + <option value="">Select month</option> |
| 273 | + <option value="1">January</option> |
| 274 | + <option value="2">February</option> |
| 275 | + <option value="3">March</option> |
| 276 | + <option value="4">April</option> |
| 277 | + <option value="5">May</option> |
| 278 | + <option value="6">June</option> |
| 279 | + <option value="7">July</option> |
| 280 | + <option value="8">August</option> |
| 281 | + <option value="9">September</option> |
| 282 | + <option value="10">October</option> |
| 283 | + <option value="11">November</option> |
| 284 | + <option value="12">December</option> |
| 285 | + </select> |
| 286 | + <input |
| 287 | + type="text" |
| 288 | + placeholder="Search by domain" |
| 289 | + value={domainFilter} |
| 290 | + onChange={(e) => setDomainFilter(e.target.value)} |
| 291 | + /> |
| 292 | + </FilterContainer> |
| 293 | + <StyledtecheventsListContainer> |
| 294 | + {filteredtechevents.map((techevents, idx) => ( |
| 295 | + <TecheventsCardComponent key={idx} {...techevents} /> |
| 296 | + ))} |
| 297 | + </StyledtecheventsListContainer> |
| 298 | + </> |
| 299 | + ); |
| 300 | +}; |
| 301 | + |
| 302 | +export default TecheventsList; |
0 commit comments