@diagramers/admin
Version:
Diagramers Admin Template - React starter for admin dashboards.
171 lines (169 loc) • 8.81 kB
JavaScript
import React from 'react';
import { Card, Col, Row } from 'react-bootstrap';
import { NavLink } from 'react-router-dom';
export const TabularDataResponsiveVertical = () => {
return (
<div className="mb-n2">
<Card className="mb-2">
<Row className="g-0 h-auto sh-sm-19 sh-lg-9">
<Col xs="12" sm="auto">
<img src="/img/product/small/product-2.webp" alt="user" className="card-img card-img-horizontal-sm sh-24 h-sm-100 sw-lg-12 sw-sm-16" />
</Col>
<Col xs="12" className="col-sm">
<Card.Body className="pt-sm-0 pb-sm-0 h-100">
<Row className="g-0 h-100 align-content-center">
<Col lg="3" className="d-flex flex-column mb-lg-0 mb-3 mb-lg-0 pe-3 d-flex">
<NavLink to="#">
<div className="lh-1">Spelt Bread</div>
<div className="text-small text-muted text-truncate">Icing liquorice olegário jujubes oat cake.</div>
</NavLink>
</Col>
<Col xs="8" sm="6" lg="3" className="d-flex flex-column pe-1 mb-2 mb-lg-0 align-items-lg-end">
<div className="lh-1 text-alternate">Multigrain</div>
<div className="text-muted text-small">Category</div>
</Col>
<Col xs="4" sm="6" lg="2" className="d-flex flex-column pe-1 mb-2 mb-lg-0 align-items-lg-end">
<div className="lh-1 text-alternate">
<span>
<span className="text-small">$</span>
2.80
</span>
</div>
<div className="text-muted text-small">Price</div>
</Col>
<Col xs="8" sm="6" lg="2" className="d-flex flex-column pe-1 mb-2 mb-lg-0 align-items-lg-end">
<div className="lh-1 text-alternate">2.590</div>
<div className="text-muted text-small">Sales</div>
</Col>
<Col xs="4" sm="6" lg="2" className="d-flex flex-column pe-1 mb-2 mb-lg-0 align-items-lg-end">
<div className="lh-1 text-alternate">8.294</div>
<div className="text-muted text-small">Stock</div>
</Col>
</Row>
</Card.Body>
</Col>
</Row>
</Card>
<Card className="mb-2">
<Row className="g-0 h-auto sh-sm-19 sh-lg-9">
<Col xs="12" sm="auto">
<img src="/img/product/small/product-2.webp" alt="user" className="card-img card-img-horizontal-sm sh-24 h-sm-100 sw-lg-12 sw-sm-16" />
</Col>
<Col xs="12" className="col-sm">
<Card.Body className="pt-sm-0 pb-sm-0 h-100">
<Row className="g-0 h-100 align-content-center">
<Col lg="3" className="d-flex flex-column mb-lg-0 mb-3 mb-lg-0 pe-3 d-flex">
<NavLink to="#">
<div className="lh-1">Cheesymite Scroll</div>
<div className="text-small text-muted text-truncate">Dragée pudding caramels oat cake.</div>
</NavLink>
</Col>
<Col xs="8" sm="6" lg="3" className="d-flex flex-column pe-1 mb-2 mb-lg-0 align-items-lg-end">
<div className="lh-1 text-alternate">Whole Wheat</div>
<div className="text-muted text-small">Category</div>
</Col>
<Col xs="4" sm="6" lg="2" className="d-flex flex-column pe-1 mb-2 mb-lg-0 align-items-lg-end">
<div className="lh-1 text-alternate">
<span>
<span className="text-small">$</span>
1.50
</span>
</div>
<div className="text-muted text-small">Price</div>
</Col>
<Col xs="8" sm="6" lg="2" className="d-flex flex-column pe-1 mb-2 mb-lg-0 align-items-lg-end">
<div className="lh-1 text-alternate">1.152</div>
<div className="text-muted text-small">Sales</div>
</Col>
<Col xs="4" sm="6" lg="2" className="d-flex flex-column pe-1 mb-2 mb-lg-0 align-items-lg-end">
<div className="lh-1 text-alternate">3.793</div>
<div className="text-muted text-small">Stock</div>
</Col>
</Row>
</Card.Body>
</Col>
</Row>
</Card>
<Card className="mb-2">
<Row className="g-0 h-auto sh-sm-19 sh-lg-9">
<Col xs="12" sm="auto">
<img src="/img/product/small/product-2.webp" alt="user" className="card-img card-img-horizontal-sm sh-24 h-sm-100 sw-lg-12 sw-sm-16" />
</Col>
<Col xs="12" className="col-sm">
<Card.Body className="pt-sm-0 pb-sm-0 h-100">
<Row className="g-0 h-100 align-content-center">
<Col lg="3" className="d-flex flex-column mb-lg-0 mb-3 mb-lg-0 pe-3 d-flex">
<NavLink to="#">
<div className="lh-1">Cholermüs</div>
<div className="text-small text-muted text-truncate">Caramels lemon drops candy jelly-o.</div>
</NavLink>
</Col>
<Col xs="8" sm="6" lg="3" className="d-flex flex-column pe-1 mb-2 mb-lg-0 align-items-lg-end">
<div className="lh-1 text-alternate">Whole Wheat</div>
<div className="text-muted text-small">Category</div>
</Col>
<Col xs="4" sm="6" lg="2" className="d-flex flex-column pe-1 mb-2 mb-lg-0 align-items-lg-end">
<div className="lh-1 text-alternate">
<span>
<span className="text-small">$</span>
3.20
</span>
</div>
<div className="text-muted text-small">Price</div>
</Col>
<Col xs="8" sm="6" lg="2" className="d-flex flex-column pe-1 mb-2 mb-lg-0 align-items-lg-end">
<div className="lh-1 text-alternate">1.498</div>
<div className="text-muted text-small">Sales</div>
</Col>
<Col xs="4" sm="6" lg="2" className="d-flex flex-column pe-1 mb-2 mb-lg-0 align-items-lg-end">
<div className="lh-1 text-alternate">4.251</div>
<div className="text-muted text-small">Stock</div>
</Col>
</Row>
</Card.Body>
</Col>
</Row>
</Card>
<Card className="mb-2">
<Row className="g-0 h-auto sh-sm-19 sh-lg-9">
<Col xs="12" sm="auto">
<img src="/img/product/small/product-2.webp" alt="user" className="card-img card-img-horizontal-sm sh-24 h-sm-100 sw-lg-12 sw-sm-16" />
</Col>
<Col xs="12" className="col-sm">
<Card.Body className="pt-sm-0 pb-sm-0 h-100">
<Row className="g-0 h-100 align-content-center">
<Col lg="3" className="d-flex flex-column mb-lg-0 mb-3 mb-lg-0 pe-3 d-flex">
<NavLink to="#">
<div className="lh-1">Ruisreikäleipä</div>
<div className="text-small text-muted text-truncate">Fruitcake tiramisu pastry halvah chocolate.</div>
</NavLink>
</Col>
<Col xs="8" sm="6" lg="3" className="d-flex flex-column pe-1 mb-2 mb-lg-0 align-items-lg-end">
<div className="lh-1 text-alternate">Sourdough</div>
<div className="text-muted text-small">Category</div>
</Col>
<Col xs="4" sm="6" lg="2" className="d-flex flex-column pe-1 mb-2 mb-lg-0 align-items-lg-end">
<div className="lh-1 text-alternate">
<span>
<span className="text-small">$</span>
4.75
</span>
</div>
<div className="text-muted text-small">Price</div>
</Col>
<Col xs="8" sm="6" lg="2" className="d-flex flex-column pe-1 mb-2 mb-lg-0 align-items-lg-end">
<div className="lh-1 text-alternate">1.631</div>
<div className="text-muted text-small">Sales</div>
</Col>
<Col xs="4" sm="6" lg="2" className="d-flex flex-column pe-1 mb-2 mb-lg-0 align-items-lg-end">
<div className="lh-1 text-alternate">2.104</div>
<div className="text-muted text-small">Stock</div>
</Col>
</Row>
</Card.Body>
</Col>
</Row>
</Card>
</div>
);
};