@diagramers/admin
Version:
Diagramers Admin Template - React starter for admin dashboards.
197 lines (195 loc) • 8.23 kB
JavaScript
import React from 'react';
import { Card, Col, Row } from 'react-bootstrap';
import { NavLink } from 'react-router-dom';
import CsLineIcons from 'cs-line-icons/CsLineIcons';
import Clamp from 'components/clamp';
export const ThumbnailsIconList = () => {
return (
<Row className="row row-cols-1 row-cols-sm-2 row-cols-xxl-4">
<Col className="mb-5">
<Card className="h-100">
<Card.Img src="/img/product/small/product-7.webp" className="card-img-top sh-30" alt="card image" />
<Card.Body>
<NavLink to="#" className="body-link stretched-link sh-5 heading h5 d-block mb-3">
<Clamp clamp="2" tag="div" className="lh-1-5">
Basic Introduction to Bread Making
</Clamp>
</NavLink>
<div className="mb-n2">
<Row className="g-0 mb-2">
<Col xs="auto">
<CsLineIcons icon="clock" size="17" className="text-primary me-2" />
</Col>
<Col>
<span className="lh-1-25 text-alternate align-middle d-inline-block">14+ Hours</span>
</Col>
</Row>
<Row className="g-0 mb-2">
<Col xs="auto">
<CsLineIcons icon="star" size="17" className="text-primary me-2" />
</Col>
<Col>
<span className="lh-1-25 text-alternate align-middle d-inline-block">4.9</span>
</Col>
</Row>
<Row className="g-0 mb-2">
<Col xs="auto">
<CsLineIcons icon="user" size="17" className="text-primary me-2" />
</Col>
<Col>
<span className="lh-1-25 text-alternate align-middle d-inline-block">128 Users Enrolled</span>
</Col>
</Row>
<Row className="g-0 mb-2">
<Col xs="auto">
<CsLineIcons icon="trend-up" size="17" className="text-primary me-2" />
</Col>
<Col>
<span className="lh-1-25 text-alternate align-middle d-inline-block">Trending</span>
</Col>
</Row>
</div>
</Card.Body>
</Card>
</Col>
<Col className="mb-5">
<Card className="h-100">
<Card.Img src="/img/product/small/product-7.webp" className="card-img-top sh-30" alt="card image" />
<Card.Body>
<NavLink to="#" className="body-link stretched-link sh-5 heading h5 d-block mb-3">
<Clamp clamp="2" tag="div" className="lh-1-5">
14 Facts About Sugar Products
</Clamp>
</NavLink>
<div className="mb-n2">
<Row className="g-0 mb-2">
<Col xs="auto">
<CsLineIcons icon="clock" size="17" className="text-primary me-2" />
</Col>
<Col>
<span className="lh-1-25 text-alternate align-middle d-inline-block">34+ Hours</span>
</Col>
</Row>
<Row className="g-0 mb-2">
<Col xs="auto">
<CsLineIcons icon="star" size="17" className="text-primary me-2" />
</Col>
<Col>
<span className="lh-1-25 text-alternate align-middle d-inline-block">4.3</span>
</Col>
</Row>
<Row className="g-0 mb-2">
<Col xs="auto">
<CsLineIcons icon="user" size="17" className="text-primary me-2" />
</Col>
<Col>
<span className="lh-1-25 text-alternate align-middle d-inline-block">198 Users Enrolled</span>
</Col>
</Row>
<Row className="g-0 mb-2">
<Col xs="auto">
<CsLineIcons icon="trend-up" size="17" className="text-primary me-2" />
</Col>
<Col>
<span className="lh-1-25 text-alternate align-middle d-inline-block">Trending</span>
</Col>
</Row>
</div>
</Card.Body>
</Card>
</Col>
<Col className="mb-5">
<Card className="h-100">
<Card.Img src="/img/product/small/product-7.webp" className="card-img-top sh-30" alt="card image" />
<Card.Body>
<NavLink to="#" className="body-link stretched-link sh-5 heading h5 d-block mb-3">
<Clamp clamp="2" tag="div" className="lh-1-5">
Apple Cake Recipe for Starters
</Clamp>
</NavLink>
<div className="mb-n2">
<Row className="g-0 mb-2">
<Col xs="auto">
<CsLineIcons icon="clock" size="17" className="text-primary me-2" />
</Col>
<Col>
<span className="lh-1-25 text-alternate align-middle d-inline-block">11+ Hours</span>
</Col>
</Row>
<Row className="g-0 mb-2">
<Col xs="auto">
<CsLineIcons icon="star" size="17" className="text-primary me-2" />
</Col>
<Col>
<span className="lh-1-25 text-alternate align-middle d-inline-block">4.6</span>
</Col>
</Row>
<Row className="g-0 mb-2">
<Col xs="auto">
<CsLineIcons icon="user" size="17" className="text-primary me-2" />
</Col>
<Col>
<span className="lh-1-25 text-alternate align-middle d-inline-block">45 Users Enrolled</span>
</Col>
</Row>
<Row className="g-0 mb-2">
<Col xs="auto">
<CsLineIcons icon="trend-up" size="17" className="text-primary me-2" />
</Col>
<Col>
<span className="lh-1-25 text-alternate align-middle d-inline-block">Popular</span>
</Col>
</Row>
</div>
</Card.Body>
</Card>
</Col>
<Col className="mb-5">
<Card className="h-100">
<Card.Img src="/img/product/small/product-7.webp" className="card-img-top sh-30" alt="card image" />
<Card.Body>
<NavLink to="#" className="body-link stretched-link sh-5 heading h5 d-block mb-3">
<Clamp clamp="2" tag="div" className="lh-1-5">
A Complete Guide to Mix Dough for the Molds{' '}
</Clamp>
</NavLink>
<div className="mb-n2">
<Row className="g-0 mb-2">
<Col xs="auto">
<CsLineIcons icon="clock" size="17" className="text-primary me-2" />
</Col>
<Col>
<span className="lh-1-25 text-alternate align-middle d-inline-block">8+ Hours</span>
</Col>
</Row>
<Row className="g-0 mb-2">
<Col xs="auto">
<CsLineIcons icon="star" size="17" className="text-primary me-2" />
</Col>
<Col>
<span className="lh-1-25 text-alternate align-middle d-inline-block">5.0</span>
</Col>
</Row>
<Row className="g-0 mb-2">
<Col xs="auto">
<CsLineIcons icon="user" size="17" className="text-primary me-2" />
</Col>
<Col>
<span className="lh-1-25 text-alternate align-middle d-inline-block">19 Users Enrolled</span>
</Col>
</Row>
<Row className="g-0 mb-2">
<Col xs="auto">
<CsLineIcons icon="trend-up" size="17" className="text-primary me-2" />
</Col>
<Col>
<span className="lh-1-25 text-alternate align-middle d-inline-block">Popular</span>
</Col>
</Row>
</div>
</Card.Body>
</Card>
</Col>
</Row>
);
};