@diagramers/admin
Version:
Diagramers Admin Template - React starter for admin dashboards.
190 lines (187 loc) • 9.28 kB
JavaScript
import React from 'react';
import { Button, Card, Col, Row } from 'react-bootstrap';
import CsLineIcons from 'cs-line-icons/CsLineIcons';
export const StepsBoxedIcons = () => {
return (
<Card>
<Card.Body>
<Row className="g-0">
<Col xs="auto" className="sw-5 d-flex flex-column justify-content-center align-items-center position-relative">
<div className="w-100 d-flex h-0" />
<div className="sw-5 sh-5 rounded-xl d-flex flex-shrink-0 justify-content-center align-items-center">
<div className="bg-gradient-light sw-5 sh-5 rounded-xl">
<div className="text-white d-flex justify-content-center align-items-center h-100">
<CsLineIcons icon="cupcake" />
</div>
</div>
</div>
<div className="w-100 d-flex h-100 justify-content-center position-relative">
<div className="line-w-1 bg-separator h-100 position-absolute" />
</div>
</Col>
<Col className="mb-4 ps-4">
<div className="h-100">
<div className="d-flex flex-column justify-content-start">
<div className="d-flex flex-column">
<Button variant="link" className="p-0 pt-1 heading text-start">
Powder Sesame Snaps Cupcake
</Button>
<div className="text-alternate">06.11.2020</div>
<div className="text-muted mt-1">
Jujubes tootsie roll liquorice cake jelly beans pudding gummi bears chocolate cake donut. Jelly-o sugar plum fruitcake bonbon bear claw cake
cookie chocolate bar. Tiramisu soufflé apple pie.
</div>
</div>
</div>
</div>
</Col>
</Row>
<Row className="g-0">
<Col xs="auto" className="sw-5 d-flex flex-column justify-content-center align-items-center position-relative">
<div className="w-100 d-flex h-0" />
<div className="sw-5 sh-5 rounded-xl d-flex flex-shrink-0 justify-content-center align-items-center">
<div className="bg-gradient-light sw-5 sh-5 rounded-xl">
<div className="text-white d-flex justify-content-center align-items-center h-100">
<CsLineIcons icon="pepper" />
</div>
</div>
</div>
<div className="w-100 d-flex h-100 justify-content-center position-relative">
<div className="line-w-1 bg-separator h-100 position-absolute" />
</div>
</Col>
<Col className="mb-4 ps-4">
<div className="h-100">
<div className="d-flex flex-column justify-content-start">
<div className="d-flex flex-column">
<Button variant="link" className="p-0 pt-1 heading text-start">
Jujubes Wafer Topping Biscuit
</Button>
<div className="text-alternate">25.11.2020</div>
<div className="text-muted mt-1">
Jelly-o wafer sesame snaps candy canes. Danish dragée toffee bonbon. Jelly-o marshmallow cake oat cake caramels jujubes.
</div>
</div>
</div>
</div>
</Col>
</Row>
<Row className="g-0">
<Col xs="auto" className="sw-5 d-flex flex-column justify-content-center align-items-center position-relative">
<div className="w-100 d-flex h-0" />
<div className="sw-5 sh-5 rounded-xl d-flex flex-shrink-0 justify-content-center align-items-center">
<div className="bg-gradient-light sw-5 sh-5 rounded-xl">
<div className="text-white d-flex justify-content-center align-items-center h-100">
<CsLineIcons icon="loaf" />
</div>
</div>
</div>
<div className="w-100 d-flex h-100 justify-content-center position-relative" />
</Col>
<Col className="ps-4">
<div className="h-100">
<div className="d-flex flex-column justify-content-start">
<div className="d-flex flex-column">
<Button variant="link" className="p-0 pt-1 heading text-start">
Jelly Beans Lemon Danish
</Button>
<div className="text-alternate">29.11.2020</div>
<div className="text-muted mt-1">
Cake fruitcake oat cake. Muffin jelly bonbon croissant. Bonbon topping donut marshmallow carrot cake muffin.
</div>
</div>
</div>
</div>
</Col>
</Row>
</Card.Body>
</Card>
);
};
export const StepsBoxedDots = () => {
return (
<Card className="h-100">
<Card.Body>
<Row className="g-0">
<Col xs="auto" className="sw-1 d-flex flex-column justify-content-center align-items-center position-relative me-4">
<div className="w-100 d-flex sh-1" />
<div className="rounded-xl shadow d-flex flex-shrink-0 justify-content-center align-items-center">
<div className="bg-gradient-light sw-1 sh-1 rounded-xl position-relative" />
</div>
<div className="w-100 d-flex h-100 justify-content-center position-relative">
<div className="line-w-1 bg-separator h-100 position-absolute" />
</div>
</Col>
<Col className="mb-4">
<div className="h-100">
<div className="d-flex flex-column justify-content-start">
<div className="d-flex flex-column">
<Button variant="link" className="p-0 pt-1 heading text-start">
Candy Cake Gummi Bears
</Button>
<div className="text-alternate">21.11.2020</div>
<div className="text-muted mt-1">
Jujubes tootsie roll liquorice cake jelly beans pudding gummi bears chocolate cake donut. Jelly-o sugar plum fruitcake bonbon bear claw cake
cookie chocolate bar. Tiramisu soufflé apple pie.
</div>
</div>
</div>
</div>
</Col>
</Row>
<Row className="g-0">
<Col xs="auto" className="sw-1 d-flex flex-column justify-content-center align-items-center position-relative me-4">
<div className="w-100 d-flex sh-1 position-relative justify-content-center">
<div className="line-w-1 bg-separator h-100 position-absolute" />
</div>
<div className="rounded-xl shadow d-flex flex-shrink-0 justify-content-center align-items-center">
<div className="bg-gradient-light sw-1 sh-1 rounded-xl position-relative" />
</div>
<div className="w-100 d-flex h-100 justify-content-center position-relative">
<div className="line-w-1 bg-separator h-100 position-absolute" />
</div>
</Col>
<Col className="mb-4">
<div className="h-100">
<div className="d-flex flex-column justify-content-start">
<div className="d-flex flex-column">
<Button variant="link" className="p-0 pt-1 heading text-start">
Donut Biscuit Chocolate Cake
</Button>
<div className="text-alternate">03.12.2020</div>
<div className="text-muted mt-1">
Jelly-o wafer sesame snaps candy canes. Danish dragée toffee bonbon. Jelly-o marshmallow cake oat cake caramels jujubes.
</div>
</div>
</div>
</div>
</Col>
</Row>
<Row className="g-0">
<Col xs="auto" className="sw-1 d-flex flex-column justify-content-center align-items-center position-relative me-4">
<div className="w-100 d-flex sh-1 position-relative justify-content-center">
<div className="line-w-1 bg-separator h-100 position-absolute" />
</div>
<div className="rounded-xl shadow d-flex flex-shrink-0 justify-content-center align-items-center">
<div className="bg-gradient-light sw-1 sh-1 rounded-xl position-relative" />
</div>
<div className="w-100 d-flex h-100 justify-content-center position-relative" />
</Col>
<Col>
<div className="h-100">
<div className="d-flex flex-column justify-content-start">
<div className="d-flex flex-column">
<Button variant="link" className="p-0 pt-1 heading text-start">
Danish Tootsie Roll Dessert
</Button>
<div className="text-alternate">09.12.2020</div>
<div className="text-muted mt-1">Chocolate apple pie powder tart chupa chups bonbon. Donut biscuit chocolate cake pie topping.</div>
</div>
</div>
</div>
</Col>
</Row>
</Card.Body>
</Card>
);
};