DESKTOP-GBA0BK8\Admin
137 lines
4.9 KiB
React
137 lines
4.9 KiB
React
/* eslint-disable jsx-a11y/anchor-is-valid */
|
|
import React from "react";
|
|
import { Link } from "react-router-dom";
|
|
import { e1, e2, e3, e4, e5, e6, e7, e8, e9 } from "../constant/images";
|
|
|
|
const EventsList = () => {
|
|
return (
|
|
<div className="nav-tab-wrapper tabs section-padding">
|
|
<div className="container">
|
|
<div className="flex items-center mb-14">
|
|
<div className="flex-1 flex space-x-6 items-center">
|
|
<span>Showing 12 courses of 52</span>
|
|
</div>
|
|
<div className="flex-0">
|
|
<div className="min-w-[272px]">
|
|
<select>
|
|
<option data-display="Sort By: Popularity">
|
|
Sort By: Popularity
|
|
</option>
|
|
<option value="1">Popularity</option>
|
|
<option value="2">Another option</option>
|
|
<option value="4">Potato</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="grid lg:grid-cols-3 md:grid-cols-2 grid-cols-1 gap-[30px]">
|
|
{[e1, e2, e3, e4, e5, e6, e7, e8, e9].map((item, index) => (
|
|
<div
|
|
className=" bg-white shadow-box5 rounded-[8px] transition duration-100 hover:shadow-box3"
|
|
key={index}
|
|
>
|
|
<div className="course-thumb h-[297px] rounded-t-[8px] relative">
|
|
<img
|
|
src={item}
|
|
alt=""
|
|
className=" w-full h-full object-cover rounded-t-[8px]"
|
|
/>
|
|
</div>
|
|
<div className="course-content p-8">
|
|
<h4 className=" text-xl mb-5 font-bold">
|
|
<Link
|
|
to={"/react-templates/edumim/event-single"}
|
|
className=" hover:text-primary transition duration-150"
|
|
>
|
|
International Art Fair 2022
|
|
</Link>
|
|
</h4>
|
|
<ul className=" list space-y-3 mb-6">
|
|
<li className=" flex space-x-2">
|
|
<span className="text-lg text-secondary">
|
|
<iconify-icon icon="heroicons:calendar-days"></iconify-icon>
|
|
</span>
|
|
<span>Thu, Oct 5, 2023 03:48 PM</span>
|
|
</li>
|
|
<li className=" flex space-x-2">
|
|
<span className="text-lg text-secondary">
|
|
<iconify-icon icon="heroicons:map-pin"></iconify-icon>
|
|
</span>
|
|
<span>Humberg City, Germany</span>
|
|
</li>
|
|
</ul>
|
|
<Link
|
|
to={"/react-templates/edumim/event-single"}
|
|
className="btn px-8 py-[11px] bg-black text-white hover:bg-primary"
|
|
>
|
|
Book A Seat
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
<div className="pagination mt-14">
|
|
<ul className=" flex justify-center space-x-3">
|
|
<li className="inline-flex">
|
|
<a
|
|
href="#"
|
|
className="flex w-12 h-12 flex-col items-center justify-center bg-[#ECECEC] rounded font-semibold"
|
|
>
|
|
<iconify-icon
|
|
icon="heroicons:chevron-double-left-20-solid"
|
|
className=" text-2xl"
|
|
></iconify-icon>
|
|
</a>
|
|
</li>
|
|
<li className="inline-flex">
|
|
<a
|
|
href="#"
|
|
className="flex w-12 h-12 flex-col items-center justify-center bg-primary text-white rounded font-semibold"
|
|
>
|
|
1
|
|
</a>
|
|
</li>
|
|
<li className="inline-flex">
|
|
<a
|
|
href="#"
|
|
className="flex w-12 h-12 flex-col items-center justify-center bg-[#ECECEC] rounded font-semibold"
|
|
>
|
|
2
|
|
</a>
|
|
</li>
|
|
<li className="inline-flex">
|
|
<a
|
|
href="#"
|
|
className="flex w-12 h-12 flex-col items-center justify-center bg-[#ECECEC] rounded font-semibold"
|
|
>
|
|
3
|
|
</a>
|
|
</li>
|
|
<li className="inline-flex">
|
|
<a
|
|
href="#"
|
|
className="flex w-12 h-12 flex-col items-center justify-center bg-[#ECECEC] rounded font-semibold"
|
|
>
|
|
4
|
|
</a>
|
|
</li>
|
|
<li className="inline-flex">
|
|
<a
|
|
href="#"
|
|
className="flex w-12 h-12 flex-col items-center justify-center bg-[#ECECEC] rounded font-semibold"
|
|
>
|
|
<iconify-icon
|
|
icon="heroicons:chevron-double-right-20-solid"
|
|
className=" text-2xl"
|
|
></iconify-icon>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default EventsList;
|