Skip to content

Instantly share code, notes, and snippets.

@wolz-CODElife

wolz-CODElife/Dashboard.tsx

Last active October 31, 2022 00:09
Show Gist options
  • Save wolz-CODElife/a154c25fdf3603bcdb5ec22f2bc4b30f to your computer and use it in GitHub Desktop.
Save wolz-CODElife/a154c25fdf3603bcdb5ec22f2bc4b30f to your computer and use it in GitHub Desktop.
Download ZIP
Raw
Dashboard.tsx
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