@diagramers/admin
Version:
Diagramers Admin Template - React starter for admin dashboards.
193 lines (191 loc) • 7.74 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 ThumbnailsListItems = () => {
return (
<Row className="row-cols-1 row-cols-sm-2 row-cols-md-3 row-cols-xl-4">
<Col className="mb-5">
<Card className="h-100">
<Card.Body>
<NavLink to="#" className="body-link d-block sh-5 mb-3 h5 heading">
<Clamp tag="span" clamp="2">
Basic Introduction to Bread Making
</Clamp>
</NavLink>
<div className="mb-n2">
<Row className="g-0 mb-2">
<Col xs="auto">
<CsLineIcons icon="chevron-right" size="17" className="text-muted me-2" />
</Col>
<Col>
<span className="lh-1-25 text-alternate align-middle d-inline-block">5+ Hours</span>
</Col>
</Row>
<Row className="g-0 mb-2">
<Col xs="auto">
<CsLineIcons icon="chevron-right" size="17" className="text-muted me-2" />
</Col>
<Col>
<span className="lh-1-25 text-alternate align-middle d-inline-block">5.0 Rating</span>
</Col>
</Row>
<Row className="g-0 mb-2">
<Col xs="auto">
<CsLineIcons icon="chevron-right" size="17" className="text-muted 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="plus" size="17" className="text-primary me-2" />
</Col>
<Col>
<span className="lh-1-25 text-alternate align-middle d-inline-block">4 More</span>
</Col>
</Row>
</div>
</Card.Body>
</Card>
</Col>
<Col className="mb-5">
<Card className="h-100">
<Card.Body>
<NavLink to="#" className="body-link d-block sh-5 mb-3 h5 heading">
<Clamp tag="span" clamp="2">
14 Facts About Sugar Products
</Clamp>
</NavLink>
<div className="mb-n2">
<Row className="g-0 mb-2">
<Col xs="auto">
<CsLineIcons icon="chevron-right" size="17" className="text-muted me-2" />
</Col>
<Col>
<span className="lh-1-25 text-alternate align-middle d-inline-block">34+ Hou</span>
</Col>
</Row>
<Row className="g-0 mb-2">
<Col xs="auto">
<CsLineIcons icon="chevron-right" size="17" className="text-muted me-2" />
</Col>
<Col>
<span className="lh-1-25 text-alternate align-middle d-inline-block">4.2 Rating</span>
</Col>
</Row>
<Row className="g-0 mb-2">
<Col xs="auto">
<CsLineIcons icon="chevron-right" size="17" className="text-muted 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="plus" size="17" className="text-primary me-2" />
</Col>
<Col>
<span className="lh-1-25 text-alternate align-middle d-inline-block">2 More</span>
</Col>
</Row>
</div>
</Card.Body>
</Card>
</Col>
<Col className="mb-5">
<Card className="h-100">
<Card.Body>
<NavLink to="#" className="body-link d-block sh-5 mb-3 h5 heading">
<Clamp tag="span" clamp="2">
Apple Cake Recipe for Starters
</Clamp>
</NavLink>
<div className="mb-n2">
<Row className="g-0 mb-2">
<Col xs="auto">
<CsLineIcons icon="chevron-right" size="17" className="text-muted 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="chevron-right" size="17" className="text-muted me-2" />
</Col>
<Col>
<span className="lh-1-25 text-alternate align-middle d-inline-block">4.6 Rating</span>
</Col>
</Row>
<Row className="g-0 mb-2">
<Col xs="auto">
<CsLineIcons icon="chevron-right" size="17" className="text-muted me-2" />
</Col>
<Col>
<span className="lh-1-25 text-alternate align-middle d-inline-block">37 Users Enrolled</span>
</Col>
</Row>
<Row className="g-0 mb-2">
<Col xs="auto">
<CsLineIcons icon="plus" size="17" className="text-primary me-2" />
</Col>
<Col>
<span className="lh-1-25 text-alternate align-middle d-inline-block">3 More</span>
</Col>
</Row>
</div>
</Card.Body>
</Card>
</Col>
<Col className="mb-5">
<Card className="h-100">
<Card.Body>
<NavLink to="#" className="body-link d-block sh-5 mb-3 h5 heading">
<Clamp tag="span" clamp="2">
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="chevron-right" size="17" className="text-muted me-2" />
</Col>
<Col>
<span className="lh-1-25 text-alternate align-middle d-inline-block">7+ Hours</span>
</Col>
</Row>
<Row className="g-0 mb-2">
<Col xs="auto">
<CsLineIcons icon="chevron-right" size="17" className="text-muted me-2" />
</Col>
<Col>
<span className="lh-1-25 text-alternate align-middle d-inline-block">5.0 Rating</span>
</Col>
</Row>
<Row className="g-0 mb-2">
<Col xs="auto">
<CsLineIcons icon="chevron-right" size="17" className="text-muted 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="plus" size="17" className="text-primary me-2" />
</Col>
<Col>
<span className="lh-1-25 text-alternate align-middle d-inline-block">6 More</span>
</Col>
</Row>
</div>
</Card.Body>
</Card>
</Col>
</Row>
);
};