274 lines
13 KiB
JavaScript
274 lines
13 KiB
JavaScript
import React, { useState } from 'react'
|
|
import {
|
|
CBadge,
|
|
CCard,
|
|
CCardBody,
|
|
CCardHeader,
|
|
CCol,
|
|
CListGroup,
|
|
CListGroupItem,
|
|
CRow,
|
|
CTabContent,
|
|
CTabPane
|
|
} from '@coreui/react-ts'
|
|
import { DocsLink } from 'src/reusable'
|
|
|
|
|
|
const ListGroups = () => {
|
|
const [activeTab, setActiveTab] = useState(1)
|
|
|
|
return (
|
|
<>
|
|
<CRow>
|
|
<CCol sm="12" xl="6">
|
|
|
|
<CCard className="mb-4">
|
|
<CCardHeader>
|
|
List group
|
|
<DocsLink name="CListGroup"/>
|
|
</CCardHeader>
|
|
<CCardBody>
|
|
<CListGroup>
|
|
<CListGroupItem>Cras justo odio</CListGroupItem>
|
|
<CListGroupItem>Dapibus ac facilisis in</CListGroupItem>
|
|
<CListGroupItem>Morbi leo risus</CListGroupItem>
|
|
<CListGroupItem>Porta ac consectetur ac</CListGroupItem>
|
|
<CListGroupItem>Vestibulum at eros</CListGroupItem>
|
|
</CListGroup>
|
|
</CCardBody>
|
|
</CCard>
|
|
|
|
</CCol>
|
|
<CCol sm="12" xl="6">
|
|
<CCard className="mb-4">
|
|
<CCardHeader>
|
|
List group links
|
|
<small> with first item active and last item disabled</small>
|
|
</CCardHeader>
|
|
<CCardBody>
|
|
<CListGroup>
|
|
<CListGroupItem href="#" active>Cras justo odio</CListGroupItem>
|
|
<CListGroupItem href="#">Dapibus ac facilisis in</CListGroupItem>
|
|
<CListGroupItem href="#">Morbi leo risus</CListGroupItem>
|
|
<CListGroupItem href="#">Porta ac consectetur ac</CListGroupItem>
|
|
<CListGroupItem href="#" disabled>Vestibulum at eros</CListGroupItem>
|
|
</CListGroup>
|
|
</CCardBody>
|
|
</CCard>
|
|
</CCol>
|
|
</CRow>
|
|
|
|
<CRow>
|
|
<CCol sm="12" xl="6">
|
|
|
|
<CCard className="mb-4">
|
|
<CCardHeader>
|
|
List group
|
|
<small> contextual classes</small>
|
|
</CCardHeader>
|
|
<CCardBody>
|
|
<CListGroup>
|
|
<CListGroupItem>Dapibus ac facilisis in</CListGroupItem>
|
|
<CListGroupItem color="primary">This is a primary list group item</CListGroupItem>
|
|
<CListGroupItem color="secondary">This is a secondary list group item</CListGroupItem>
|
|
<CListGroupItem color="success">This is a success list group item</CListGroupItem>
|
|
<CListGroupItem color="danger">This is a danger list group item</CListGroupItem>
|
|
<CListGroupItem color="warning">This is a warning list group item</CListGroupItem>
|
|
<CListGroupItem color="info">This is a info list group item</CListGroupItem>
|
|
<CListGroupItem color="light">This is a light list group item</CListGroupItem>
|
|
<CListGroupItem color="dark">This is a dark list group item</CListGroupItem>
|
|
</CListGroup>
|
|
</CCardBody>
|
|
</CCard>
|
|
|
|
</CCol>
|
|
<CCol sm="12" xl="6">
|
|
|
|
<CCard className="mb-4">
|
|
<CCardHeader>
|
|
List group
|
|
<small> contextual classes with .action</small>
|
|
</CCardHeader>
|
|
<CCardBody>
|
|
<CListGroup>
|
|
<CListGroupItem component="button">Dapibus ac facilisis in</CListGroupItem>
|
|
<CListGroupItem component="button" color="primary">This is a primary list group item</CListGroupItem>
|
|
<CListGroupItem component="button" color="secondary">This is a secondary list group item</CListGroupItem>
|
|
<CListGroupItem component="button" color="success">This is a success list group item</CListGroupItem>
|
|
<CListGroupItem component="button" color="danger">This is a danger list group item</CListGroupItem>
|
|
<CListGroupItem component="button" color="warning">This is a warning list group item</CListGroupItem>
|
|
<CListGroupItem component="button" color="info">This is a info list group item</CListGroupItem>
|
|
<CListGroupItem component="button" color="light">This is a light list group item</CListGroupItem>
|
|
<CListGroupItem component="button" color="dark">This is a dark list group item</CListGroupItem>
|
|
</CListGroup>
|
|
</CCardBody>
|
|
</CCard>
|
|
|
|
</CCol>
|
|
</CRow>
|
|
<CRow>
|
|
<CCol sm="12" xl="6">
|
|
<CCard className="mb-4">
|
|
<CCardHeader>
|
|
List group
|
|
<small> accent</small>
|
|
</CCardHeader>
|
|
<CCardBody>
|
|
<CListGroup accent>
|
|
<CListGroupItem accent="primary">This is a primary list group item</CListGroupItem>
|
|
<CListGroupItem accent="secondary">This is a secondary list group item</CListGroupItem>
|
|
<CListGroupItem accent="success">This is a success list group item</CListGroupItem>
|
|
<CListGroupItem accent="danger">This is a danger list group item</CListGroupItem>
|
|
<CListGroupItem accent="warning">This is a warning list group item</CListGroupItem>
|
|
<CListGroupItem accent="info">This is a info list group item</CListGroupItem>
|
|
<CListGroupItem accent="light">This is a light list group item</CListGroupItem>
|
|
<CListGroupItem accent="dark">This is a dark list group item</CListGroupItem>
|
|
</CListGroup>
|
|
</CCardBody>
|
|
</CCard>
|
|
</CCol>
|
|
<CCol sm="12" xl="6">
|
|
<CCard className="mb-4">
|
|
<CCardHeader>
|
|
List group
|
|
<small> accent with color</small>
|
|
</CCardHeader>
|
|
<CCardBody>
|
|
<CListGroup accent>
|
|
<CListGroupItem accent="primary" color="primary">This is a primary list group item</CListGroupItem>
|
|
<CListGroupItem accent="secondary" color="secondary">This is a secondary list group item</CListGroupItem>
|
|
<CListGroupItem accent="success" color="success">This is a success list group item</CListGroupItem>
|
|
<CListGroupItem accent="danger" color="danger">This is a danger list group item</CListGroupItem>
|
|
<CListGroupItem accent="warning" color="warning">This is a warning list group item</CListGroupItem>
|
|
<CListGroupItem accent="info" color="info">This is a info list group item</CListGroupItem>
|
|
<CListGroupItem accent="light" color="light">This is a light list group item</CListGroupItem>
|
|
<CListGroupItem accent="dark" color="dark">This is a dark list group item</CListGroupItem>
|
|
</CListGroup>
|
|
</CCardBody>
|
|
</CCard>
|
|
</CCol>
|
|
</CRow>
|
|
<CRow>
|
|
<CCol sm="12" xl="6">
|
|
<CCard className="mb-4">
|
|
<CCardHeader>
|
|
List group
|
|
<small> with badges</small>
|
|
</CCardHeader>
|
|
<CCardBody>
|
|
<CListGroup>
|
|
<CListGroupItem className="justify-content-between">
|
|
Cras justo odio
|
|
<CBadge className="float-end" shape="pill" color="primary">14</CBadge>
|
|
</CListGroupItem>
|
|
<CListGroupItem className="justify-content-between">
|
|
Dapibus ac facilisis in
|
|
<CBadge className="float-end" shape="pill" color="primary">2</CBadge>
|
|
</CListGroupItem>
|
|
<CListGroupItem className="justify-content-between">
|
|
Morbi leo risus
|
|
<CBadge className="float-end" shape="pill" color="primary">1</CBadge>
|
|
</CListGroupItem>
|
|
</CListGroup>
|
|
</CCardBody>
|
|
</CCard>
|
|
|
|
</CCol>
|
|
<CCol sm="12" xl="6">
|
|
|
|
<CCard className="mb-4">
|
|
<CCardHeader>
|
|
List group
|
|
<small> custom content</small>
|
|
</CCardHeader>
|
|
<CCardBody>
|
|
|
|
<CListGroup>
|
|
<CListGroupItem component="a" active>
|
|
<h5 className="d-flex w-100 justify-content-between">
|
|
List group item heading
|
|
<small>3 days ago</small>
|
|
</h5>
|
|
<div className="mb-1">
|
|
Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
|
|
<small>Donec id elit non mi porta.</small>
|
|
</div>
|
|
</CListGroupItem>
|
|
<CListGroupItem component="a">
|
|
<h5>List group item heading</h5>
|
|
<div>
|
|
Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
|
|
</div>
|
|
<small>Small.</small>
|
|
</CListGroupItem>
|
|
<CListGroupItem component="a">
|
|
<h5>List group item heading</h5>
|
|
<div>
|
|
Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
|
|
</div>
|
|
<small>Small.</small>
|
|
</CListGroupItem>
|
|
</CListGroup>
|
|
|
|
</CCardBody>
|
|
</CCard>
|
|
</CCol>
|
|
</CRow>
|
|
<CRow>
|
|
<CCol xs>
|
|
<CCard className="mb-4">
|
|
<CCardHeader>
|
|
List group
|
|
<small> tab Javascript plugin</small>
|
|
</CCardHeader>
|
|
<CCardBody>
|
|
<CRow>
|
|
<CCol xs="4">
|
|
<CListGroup id="list-tab" role="tablist">
|
|
<CListGroupItem onClick={() => setActiveTab(0)} component="button" active={activeTab === 0} >Home</CListGroupItem>
|
|
<CListGroupItem onClick={() => setActiveTab(1)} component="button" active={activeTab === 1} >Profile</CListGroupItem>
|
|
<CListGroupItem onClick={() => setActiveTab(2)} component="button" active={activeTab === 2} >Messages</CListGroupItem>
|
|
<CListGroupItem onClick={() => setActiveTab(3)} component="button" active={activeTab === 3} >Settings</CListGroupItem>
|
|
</CListGroup>
|
|
</CCol>
|
|
<CCol xs="8">
|
|
<CTabContent>
|
|
<CTabPane visible={activeTab === 0} >
|
|
<p>Velit aute mollit ipsum ad dolor consectetur nulla officia culpa adipisicing exercitation fugiat tempor. Voluptate deserunt sit sunt
|
|
nisi aliqua fugiat proident ea ut. Mollit voluptate reprehenderit occaecat nisi ad non minim
|
|
tempor sunt voluptate consectetur exercitation id ut nulla. Ea et fugiat aliquip nostrud sunt incididunt consectetur culpa aliquip
|
|
eiusmod dolor. Anim ad Lorem aliqua in cupidatat nisi enim eu nostrud do aliquip veniam minim.</p>
|
|
</CTabPane>
|
|
<CTabPane visible={activeTab === 1}>
|
|
<p>Cupidatat quis ad sint excepteur laborum in esse qui. Et excepteur consectetur ex nisi eu do cillum ad laborum. Mollit et eu officia
|
|
dolore sunt Lorem culpa qui commodo velit ex amet id ex. Officia anim incididunt laboris deserunt
|
|
anim aute dolor incididunt veniam aute dolore do exercitation. Dolor nisi culpa ex ad irure in elit eu dolore. Ad laboris ipsum
|
|
reprehenderit irure non commodo enim culpa commodo veniam incididunt veniam ad.</p>
|
|
</CTabPane>
|
|
<CTabPane visible={activeTab === 2}>
|
|
<p>Ut ut do pariatur aliquip aliqua aliquip exercitation do nostrud commodo reprehenderit aute ipsum voluptate. Irure Lorem et laboris
|
|
nostrud amet cupidatat cupidatat anim do ut velit mollit consequat enim tempor. Consectetur
|
|
est minim nostrud nostrud consectetur irure labore voluptate irure. Ipsum id Lorem sit sint voluptate est pariatur eu ad cupidatat et
|
|
deserunt culpa sit eiusmod deserunt. Consectetur et fugiat anim do eiusmod aliquip nulla
|
|
laborum elit adipisicing pariatur cillum.</p>
|
|
</CTabPane>
|
|
<CTabPane visible={activeTab === 3}>
|
|
<p>Irure enim occaecat labore sit qui aliquip reprehenderit amet velit. Deserunt ullamco ex elit nostrud ut dolore nisi officia magna
|
|
sit occaecat laboris sunt dolor. Nisi eu minim cillum occaecat aute est cupidatat aliqua labore
|
|
aute occaecat ea aliquip sunt amet. Aute mollit dolor ut exercitation irure commodo non amet consectetur quis amet culpa. Quis ullamco
|
|
nisi amet qui aute irure eu. Magna labore dolor quis ex labore id nostrud deserunt dolor
|
|
eiusmod eu pariatur culpa mollit in irure.</p>
|
|
</CTabPane>
|
|
</CTabContent>
|
|
</CCol>
|
|
</CRow>
|
|
</CCardBody>
|
|
</CCard>
|
|
</CCol>
|
|
</CRow>
|
|
</>
|
|
)
|
|
}
|
|
|
|
export default ListGroups
|