-
-
Save prince-joel/91458840e0586f7661e559919373b89a to your computer and use it in GitHub Desktop.
Dashboard.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import React from "react"; | |
// Import Swiper React components | |
import { Swiper, SwiperSlide } from "swiper/react"; | |
import { Navigation, Autoplay } from "swiper"; | |
// Import Swiper styles | |
import "swiper/css"; | |
import "swiper/css/effect-cards"; | |
import "swiper/css/pagination"; | |
import "./styles.css"; | |
import img1 from '../assets/img1.png' | |
import img2 from '../assets/img2.png' | |
import img3 from '../assets/img3.png' | |
import img4 from '../assets/img4.png' | |
import img5 from '../assets/img5.png' | |
import img6 from '../assets/img6.png' | |
import img7 from '../assets/img7.png' | |
import img8 from '../assets/img8.png' | |
import img9 from '../assets/img9.png' | |
import img10 from '../assets/img10.png' | |
import img11 from '../assets/img11.png' | |
import img12 from '../assets/img12.png' | |
import img13 from '../assets/img13.png' | |
import img14 from '../assets/img14.png' | |
import img15 from '../assets/img15.png' | |
import img16 from '../assets/img16.png' | |
import img17 from '../assets/img17.png' | |
import img18 from '../assets/img18.png' | |
// import required modules | |
import { EffectCards } from "swiper"; | |
import { Pagination } from "swiper"; | |
export default function Dashboard() { | |
const pagination = { | |
clickable: true, | |
renderBullet: function (index: number, className: string) { | |
return '<span class="' + className + '">' + (index + 1) + "</span>"; | |
}, | |
}; | |
return ( | |
<div> | |
<div className="hero"> | |
<div className="brand"> | |
<svg width="40" height="35" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10.845 10.454h-3.18a.5.5 0 0 1-.342-.145.49.49 0 0 1-.146-.337V9.39c-.001-2.427 1.114-3.64 3.347-3.64a5.307 5.307 0 0 1 2.15.429.866.866 0 0 0 .974-.187.848.848 0 0 0 .185-.293l1.342-3.664a.847.847 0 0 0-.44-1.063 8.745 8.745 0 0 0-1.79-.617A13.71 13.71 0 0 0 9.806 0C6.695 0 4.282.84 2.57 2.52.856 4.2 0 6.472 0 9.333V31.36c0 .966.388 1.892 1.077 2.574a3.698 3.698 0 0 0 4.009.79 3.682 3.682 0 0 0 1.193-.79 3.607 3.607 0 0 0 1.077-2.574V16.544a.499.499 0 0 1 .496-.491h2.993c.75 0 1.47-.295 2-.82.53-.525.828-1.237.828-1.98 0-.742-.298-1.454-.828-1.98a2.844 2.844 0 0 0-2-.82Z" fill="url(#a)"></path><path d="M20.3 12c.929 0 1.741.638 1.994 1.532.082.293.179.627.29 1.003.06.2.167.546.31 1H37.57a2 2 0 0 1 1.95 2.45l-2.078 9a2 2 0 0 1-1.949 1.55H25.117a2 2 0 0 1-1.931-1.48l-1.006-3.736-3.209-8.784h-2.704a1.267 1.267 0 0 1 0-2.535H20.3Z" fill="url(#b)"></path><path d="M37.084 32.035a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0Z" fill="url(#c)"></path><path d="M25.584 34.535a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5Z" fill="url(#d)"></path><defs><linearGradient id="a" x1="3.742" y1="17.5" x2="34.688" y2="17.5" gradientUnits="userSpaceOnUse"><stop stop-color="#3FDCF7"></stop><stop offset="1" stop-color="#1890FF"></stop></linearGradient><linearGradient id="b" x1="3.742" y1="17.5" x2="34.688" y2="17.5" gradientUnits="userSpaceOnUse"><stop stop-color="#3FDCF7"></stop><stop offset="1" stop-color="#1890FF"></stop></linearGradient><linearGradient id="c" x1="3.742" y1="17.5" x2="34.688" y2="17.5" gradientUnits="userSpaceOnUse"><stop stop-color="#3FDCF7"></stop><stop offset="1" stop-color="#1890FF"></stop></linearGradient><linearGradient id="d" x1="3.742" y1="17.5" x2="34.688" y2="17.5" gradientUnits="userSpaceOnUse"><stop stop-color="#3FDCF7"></stop><stop offset="1" stop-color="#1890FF"></stop></linearGradient></defs></svg> | |
<h1>Refine Demo Dashboard</h1> | |
</div> | |
<Swiper | |
pagination={pagination} | |
autoplay={{ | |
delay: 4000, | |
disableOnInteraction: true, | |
}} modules={[Navigation, Autoplay, Pagination]} | |
> | |
<SwiperSlide><img src={img1} loading="lazy" alt="Slide 1" /></SwiperSlide> | |
<SwiperSlide><img src={img2} loading="lazy" alt="Slide 2" /></SwiperSlide> | |
<SwiperSlide><img src={img3} loading="lazy" alt="Slide 3" /></SwiperSlide> | |
<SwiperSlide><img src={img4} loading="lazy" alt="Slide 4" /></SwiperSlide> | |
</Swiper> | |
</div> | |
<div className="main"> | |
<Swiper effect={"cards"} grabCursor={true} modules={[EffectCards]} className="mySwiper center-main" > | |
<SwiperSlide> | |
<img src={img5} loading="lazy" alt="Product 1" /> | |
</SwiperSlide> | |
<SwiperSlide> | |
<img src={img6} loading="lazy" alt="Product 1" /> | |
</SwiperSlide> | |
<SwiperSlide> | |
<img src={img7} loading="lazy" alt="Product 1" /> | |
</SwiperSlide> | |
<SwiperSlide> | |
<img src={img8} loading="lazy" alt="Product 1" /> | |
</SwiperSlide> | |
</Swiper> | |
<h1>Let's start shopping!</h1> | |
<div className="grid"> | |
<Swiper navigation={true} | |
autoplay={{ | |
delay: 2500, | |
disableOnInteraction: false, | |
}} modules={[Navigation, Autoplay]} className="mySwiper"> | |
<SwiperSlide> | |
<img src={img9} loading="lazy" alt="Product 1" /> | |
<div className="btns"> | |
<button><img src="https://api.iconify.design/flat-color-icons:like.svg?color=%23888888" alt="like" /></button> | |
<button><img src="https://api.iconify.design/icon-park:buy.svg?color=%23888888" alt="add" /></button> | |
</div> | |
</SwiperSlide> | |
<SwiperSlide> | |
<img src={img5} loading="lazy" alt="Product 1" /> | |
<div className="btns"> | |
<button><img src="https://api.iconify.design/flat-color-icons:like.svg?color=%23888888" alt="like" /></button> | |
<button><img src="https://api.iconify.design/icon-park:buy.svg?color=%23888888" alt="add" /></button> | |
</div> | |
</SwiperSlide> | |
<SwiperSlide> | |
<img src={img6} loading="lazy" alt="Product 1" /> | |
<div className="btns"> | |
<button><img src="https://api.iconify.design/flat-color-icons:like.svg?color=%23888888" alt="like" /></button> | |
<button><img src="https://api.iconify.design/icon-park:buy.svg?color=%23888888" alt="add" /></button> | |
</div> | |
</SwiperSlide> | |
</Swiper> | |
<Swiper navigation={true} | |
autoplay={{ | |
delay: 2700, | |
disableOnInteraction: false, | |
}} modules={[Navigation, Autoplay]} className="mySwiper"> | |
<SwiperSlide> | |
<img src={img15} loading="lazy" alt="Product 1" /> | |
<div className="btns"> | |
<button><img src="https://api.iconify.design/flat-color-icons:like.svg?color=%23888888" alt="like" /></button> | |
<button><img src="https://api.iconify.design/icon-park:buy.svg?color=%23888888" alt="add" /></button> | |
</div> | |
</SwiperSlide> | |
<SwiperSlide> | |
<img src={img10} loading="lazy" alt="Product 1" /> | |
<div className="btns"> | |
<button><img src="https://api.iconify.design/flat-color-icons:like.svg?color=%23888888" alt="like" /></button> | |
<button><img src="https://api.iconify.design/icon-park:buy.svg?color=%23888888" alt="add" /></button> | |
</div> | |
</SwiperSlide> | |
<SwiperSlide> | |
<img src={img11} loading="lazy" alt="Product 1" /> | |
<div className="btns"> | |
<button><img src="https://api.iconify.design/flat-color-icons:like.svg?color=%23888888" alt="like" /></button> | |
<button><img src="https://api.iconify.design/icon-park:buy.svg?color=%23888888" alt="add" /></button> | |
</div> | |
</SwiperSlide> | |
</Swiper> | |
<Swiper navigation={true} | |
autoplay={{ | |
delay: 2900, | |
disableOnInteraction: false, | |
}} modules={[Navigation, Autoplay]} className="mySwiper"> | |
<SwiperSlide> | |
<img src={img12} loading="lazy" alt="Product 1" /> | |
<div className="btns"> | |
<button><img src="https://api.iconify.design/flat-color-icons:like.svg?color=%23888888" alt="like" /></button> | |
<button><img src="https://api.iconify.design/icon-park:buy.svg?color=%23888888" alt="add" /></button> | |
</div> | |
</SwiperSlide> | |
<SwiperSlide> | |
<img src={img7} loading="lazy" alt="Product 1" /> | |
<div className="btns"> | |
<button><img src="https://api.iconify.design/flat-color-icons:like.svg?color=%23888888" alt="like" /></button> | |
<button><img src="https://api.iconify.design/icon-park:buy.svg?color=%23888888" alt="add" /></button> | |
</div> | |
</SwiperSlide> | |
<SwiperSlide> | |
<img src={img13} loading="lazy" alt="Product 1" /> | |
<div className="btns"> | |
<button><img src="https://api.iconify.design/flat-color-icons:like.svg?color=%23888888" alt="like" /></button> | |
<button><img src="https://api.iconify.design/icon-park:buy.svg?color=%23888888" alt="add" /></button> | |
</div> | |
</SwiperSlide> | |
</Swiper> | |
</div> | |
<div className="gallery"> | |
<div className="col"> | |
<img src={img14} loading="lazy" alt="Product 1" /> | |
<p>iWatch Series 6</p> | |
<div className="btns"> | |
<button><img src="https://api.iconify.design/flat-color-icons:like.svg?color=%23888888" alt="like" /></button> | |
<button><img src="https://api.iconify.design/icon-park:buy.svg?color=%23888888" alt="add" /></button> | |
</div> | |
</div> | |
<div className="col"> | |
<img src={img15} loading="lazy" alt="Product 1" /> | |
<p>Sony Headset</p> | |
<div className="btns"> | |
<button><img src="https://api.iconify.design/flat-color-icons:like.svg?color=%23888888" alt="like" /></button> | |
<button><img src="https://api.iconify.design/icon-park:buy.svg?color=%23888888" alt="add" /></button> | |
</div> | |
</div> | |
<div className="col"> | |
<img src={img8} loading="lazy" alt="Product 1" /> | |
<p>Logitech Webcam</p> | |
<div className="btns"> | |
<button><img src="https://api.iconify.design/flat-color-icons:like.svg?color=%23888888" alt="like" /></button> | |
<button><img src="https://api.iconify.design/icon-park:buy.svg?color=%23888888" alt="add" /></button> | |
</div> | |
</div> | |
<div className="col"> | |
<img src={img16} loading="lazy" alt="Product 1" /> | |
<p>Logitech Webcam</p> | |
<div className="btns"> | |
<button><img src="https://api.iconify.design/flat-color-icons:like.svg?color=%23888888" alt="like" /></button> | |
<button><img src="https://api.iconify.design/icon-park:buy.svg?color=%23888888" alt="add" /></button> | |
</div> | |
</div> | |
<div className="col"> | |
<img src={img17} loading="lazy" alt="Product 1" /> | |
<p>Make Over forever</p> | |
<div className="btns"> | |
<button><img src="https://api.iconify.design/flat-color-icons:like.svg?color=%23888888" alt="like" /></button> | |
<button><img src="https://api.iconify.design/icon-park:buy.svg?color=%23888888" alt="add" /></button> | |
</div> | |
</div> | |
<div className="col"> | |
<img src={img18} loading="lazy" alt="Product 1" /> | |
<p>Milk Magic butter</p> | |
<div className="btns"> | |
<button><img src="https://api.iconify.design/flat-color-icons:like.svg?color=%23888888" alt="like" /></button> | |
<button><img src="https://api.iconify.design/icon-park:buy.svg?color=%23888888" alt="add" /></button> | |
</div> | |
</div> | |
</div> | |
</div> | |
</div> | |
); | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment