@diagramers/admin
Version:
Diagramers Admin Template - React starter for admin dashboards.
171 lines (169 loc) • 8.61 kB
JavaScript
import React from 'react';
import { Card, Col, Row } from 'react-bootstrap';
import { NavLink } from 'react-router-dom';
export const TabularDataResponsiveHorizontal = () => {
return (
<div className="mb-n2">
<Card className="mb-2">
<Row className="g-0 sh-19 sh-lg-9">
<Col xs="auto" className="position-relative">
<img src="/img/product/small/product-1.webp" alt="user" className="card-img card-img-horizontal sw-11" />
</Col>
<Col>
<Card.Body className="pt-0 pb-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">Barmbrack</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">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>
2.25
</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.602</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.193</div>
<div className="text-muted text-small">Stock</div>
</Col>
</Row>
</Card.Body>
</Col>
</Row>
</Card>
<Card className="mb-2">
<Row className="g-0 sh-19 sh-lg-9">
<Col xs="auto" className="position-relative">
<img src="/img/product/small/product-1.webp" alt="user" className="card-img card-img-horizontal sw-11" />
</Col>
<Col>
<Card.Body className="pt-0 pb-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">Carrot cake cupcake pastry jelly-o pie.</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.299</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 sh-19 sh-lg-9">
<Col xs="auto" className="position-relative">
<img src="/img/product/small/product-1.webp" alt="user" className="card-img card-img-horizontal sw-11" />
</Col>
<Col>
<Card.Body className="pt-0 pb-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">Gingerbread jelly marshmallow muffin.</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>
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.348</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 sh-19 sh-lg-9">
<Col xs="auto" className="position-relative">
<img src="/img/product/small/product-1.webp" alt="user" className="card-img card-img-horizontal sw-11" />
</Col>
<Col>
<Card.Body className="pt-0 pb-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">Buccellato di Lucca</div>
<div className="text-small text-muted text-truncate">Shortbread jujubes sesame gingerbread.</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">874</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">1.842</div>
<div className="text-muted text-small">Stock</div>
</Col>
</Row>
</Card.Body>
</Col>
</Row>
</Card>
</div>
);
};