reactstrap#ListGroup JavaScript Examples
The following examples show how to use
reactstrap#ListGroup.
You can vote up the ones you like or vote down the ones you don't like,
and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
| Source File: Todos.js From ReactJS-Projects with MIT License | 6 votes |
|
Todos = ({ todos, markComplete }) => {
return (
<ListGroup className='mt-5 mb-2'>
{todos.map((todo) => (
<ListGroupItem key={todo.id}>
{todo.title}
<span onClick={() => markComplete(todo.id)} className='float-end'>
<FaCheck />
</span>
</ListGroupItem>
))}
</ListGroup>
)
}
Example #2
| Source File: Todos.js From ReactJS-Projects with MIT License | 6 votes |
|
Todos = () => {
const { todos, dispatch } = useContext(TodoContext);
return (
<ListGroup className="mt-5 mb-2 items">
{todos.map(todo => (
<ListGroupItem key={todo.id}>
{todo.todoString}
<span
className="float-end"
onClick={() => {
dispatch({
type: REMOVE_TODO,
payload: todo.id
});
}}
>
<FaCheck />
</span>
</ListGroupItem>
))}
</ListGroup>
);
}
Example #3
| Source File: Todo.js From ReactJS-Projects with MIT License | 6 votes |
|
Todo = ({ todos, completedFlag }) => {
return (
<ListGroup className='m-5 mb-2 items'>
{
todos.map((todo => (
<ListGroupItem key={todo.id}>
{todo.todoVal}
<span className='float-end' onClick={() => completedFlag(todo.id)} ><FaCheck /></span>
</ListGroupItem>
)))
}
</ListGroup>
)
}
Example #4
| Source File: Contacts.js From ReactJS-Projects with MIT License | 5 votes |
|
Contacts = () => {
const { state, dispatch } = useContext(ContactContext);
const { contacts, isLoading } = state;
const history = useHistory();
const AddContact = () => {
dispatch({
type: CONTACT_TO_UPDATE,
payload: null,
key: null
})
history.push("/contact/add");
};
if (isLoading) {
return (
<div className="Center">
<Spinner color="primary" />
<div className="text-primary">Loading...</div>
</div>
);
}
return (
<Container className="mt-4">
{
contacts.length === 0 && !isLoading ?
(
<div className="Center text-large text-primary">
No Contacts Found.
</div>
)
:
(
<ListGroup>
{Object.entries(contacts).map(([key, value]) => (
<ListGroupItem key={key}>
<Contact contact={value} contactKey={key} />
</ListGroupItem>
))}
</ListGroup>
)
}
<MdAdd className="fab icon " onClick={AddContact} />
</Container>
);
}
Example #5
| Source File: Details.js From ReactJS-Projects with MIT License | 5 votes |
|
Details = ({ apiUrl }) => {
const [repos, setRepos] = useState([])
const fetchRepos = async () => {
const { data } = await Axios.get(apiUrl)
setRepos(data)
}
useEffect(() => {
fetchRepos()
}, [apiUrl])
return (
<ListGroup>
{repos.map(repo => (
<ListGroupItem key={repo.id}>
<div className='text-primary'>
Repo Name: {repo.name}
</div>
<div className='text-secondary'>
Description: {repo.description}
</div>
<div className='text-secondary'>
Stars: {repo.stargazers_count}
</div>
<div className='text-secondary'>
Watchers: {repo.watchers_count}
</div>
<div className='text-secondary'>
Forks: {repo.forks_count}
</div>
<div className='text-secondary'>
Issues: {repo.open_isses_count}
</div>
<div className='text-secondary'>
Size: {repo.size}
</div>
<div className='text-secondary'>
Language: {repo.language}
</div>
<div className='text-secondary'>
Created at: {repo.created_at}
</div>
<div className='text-secondary'>
Updated at: {repo.updated_at}
</div>
</ListGroupItem>
))}
</ListGroup>
)
}
Example #6
| Source File: Cart.js From ReactJS-Projects with MIT License | 5 votes |
|
Cart = ({ cartItem, removeItem, buy }) => {
let amount = 0;
cartItem.forEach(item => {
amount = parseFloat(amount) + parseFloat(item.productPrice)
})
return (
<Container fluid>
<h1 className='text text-center'>Your Cart</h1>
<ListGroup>
{cartItem.map(item => (
<ListGroupItem key={item.id}>
<Row>
<Col>
<img height={80} src={item.tinyImage} />
</Col>
<Col className='text-center'>
<div className='text-primary'>
{item.productName}
</div>
<span>Price: {item.productPrice}</span>
<Button color="danger" onClick={() => removeItem(item)}>Remove</Button>
</Col>
</Row>
</ListGroupItem>
))}
</ListGroup>
{
cartItem.length >= 1 ?
(
<Card className='text-center mt-3'>
<CardHeader>
Grand Total
</CardHeader>
<CardBody>
Total amount for {cartItem.length} products is: $ {amount}
</CardBody>
<CardFooter>
<Button color="success" onClick={buy}>Proceed to Payment</Button>
</CardFooter>
</Card>
)
:
(
<h1 className='text-warning text-center'>Your cart is empty.</h1>
)
}
</Container>
)
}
Example #7
| Source File: SideBar.js From mattress-store with MIT License | 5 votes |
|
SideBar = () => {
const { MenuVisible, toggleMenu } = useContext(MenuContext);
let menuStyle = {};
if (MenuVisible) {
menuStyle = {
left: '0px',
};
}
const toggleMenuHandler = () => toggleMenu();
return (
<div
className="SideBar-container"
style={menuStyle}
data-test="component-sideBar"
data-testid="component-sideBar-id"
id="menuId"
isVisible={MenuVisible}
>
<button
className="sideBar-button"
onClick={toggleMenuHandler}
type="button"
data-test="sideBar-button"
>
X
</button>
<div className="sideBar-menu" data-test="sideBar-menu">
<ListGroup>
<ListGroupItem active tag="button" action>
MENU
</ListGroupItem>
<ListGroupItem tag="button" action>
<NavLink extact to="/">
<div className="sideBar-link">
<img
src={homeImage}
className="sideBar-image"
alt=""
data-test="home-image"
/>
<h4>Home</h4>
</div>
</NavLink>
</ListGroupItem>
<ListGroupItem tag="button" action>
<NavLink extact to="/Mattress">
<div className="sideBar-link">
<img
src={Mattress}
className="sideBar-image"
alt=""
data-test="mattress-image"
/>
<h4>Mattress</h4>
</div>
</NavLink>
</ListGroupItem>
<ListGroupItem tag="button" action>
<NavLink extact to="/BedBases">
<div className="sideBar-link">
<img
src={BedBase}
className="sideBar-image"
alt=""
data-test="bedBase-image"
/>
<h4>Bed Bases</h4>
</div>
</NavLink>
</ListGroupItem>
</ListGroup>
</div>
</div>
);
}
Example #8
| Source File: jobs.page.js From hiring-system with GNU General Public License v3.0 | 5 votes |
|
HomePage = () => {
const [jobs, setJobs] = useState([]);
const filterWithPropery = (properyName, value) => {
let filteredJobs = jobs.filter((item) => {
return item[properyName].toLowerCase().includes(value.toLowerCase());
});
setJobs(filteredJobs);
};
const handleChange = (e) => {
if (e.target.value.length >= 3) {
filterWithPropery(e.target.name, e.target.value);
} else {
// This will be a problem later where jobs are lost and then needed later
// huge network hit
setJobs(listOfJob);
}
};
useEffect(() => {
setJobs(listOfJob);
}, []);
return (
<>
<Navbar />
<Container className="mt-4 mb-4">
<h1>List of available jobs</h1>
<div className="d-flex justify-content-end mt-3">
<div className="w-25 mr-2">
<Input
name="jobCreator"
onChange={handleChange}
placeholder="Search with company name"
/>
</div>
<div className="w-25">
<Input
name="jobLocation"
onChange={handleChange}
placeholder="Search with location"
/>
</div>
</div>
{jobs.length === 0 && (
<h3 className="text-center mt-5">No result found</h3>
)}
<ListGroup className="mt-3">
{jobs.map((job) => (
<JobCard key={job.userId} job={job} />
))}
</ListGroup>
</Container>
</>
);
}
Example #9
| Source File: Messages.js From light-blue-react-template with MIT License | 5 votes |
|
render() {
return (
<ListGroup className={[s.listGroup, 'thin-scroll'].join(' ')}>
<ListGroupItem className={[s.listGroupItem].join(' ')}>
<span className={[s.notificationIcon, 'thumb-sm'].join(' ')}>
<img className="rounded-circle" src={a2} alt="..." />
<i className="status status-bottom bg-success" />
</span>
<time className="text-link help float-right">10 sec ago</time>
<h6 className="m-0 fw-bold mb-1">Chris Gray</h6>
<p className="deemphasize text-ellipsis m-0">Hey! What's up? So many times since we</p>
</ListGroupItem>
<ListGroupItem className={s.listGroupItem}>
<span className={[s.notificationIcon, 'thumb-sm'].join(' ')}>
<img className="rounded-circle" src={avatar} alt="..." />
<i className="status status-bottom bg-success" />
</span>
<time className="text-link help float-right">2 min ago</time>
<h6 className="m-0 mb-1">Jamey Brownlow</h6>
<p className="deemphasize text-ellipsis m-0">Good news coming tonight. Seems they agreed to proceed</p>
</ListGroupItem>
<ListGroupItem className={s.listGroupItem}>
<span className={[s.notificationIcon, 'thumb-sm'].join(' ')}>
<img className="rounded-circle" src={a1} alt="..." />
<i className="status status-bottom bg-warning" />
</span>
<time className="text-link help float-right">9 min ago</time>
<h6 className="m-0 mb-1">Livia Walsh</h6>
<p className="deemphasize text-ellipsis m-0">Check out my latest email plz!</p>
</ListGroupItem>
<ListGroupItem className={s.listGroupItem}>
<span className={[s.notificationIcon, 'thumb-sm'].join(' ')}>
<img className="rounded-circle" src={avatar} alt="..." />
<i className="status status-bottom bg-danger" />
</span>
<time className="text-link help float-right">12:56 AM</time>
<h6 className="m-0 mb-1">Jaron Fitzroy</h6>
<p className="deemphasize text-ellipsis m-0">What about summer break?</p>
</ListGroupItem>
<ListGroupItem className={s.listGroupItem}>
<span className={[s.notificationIcon, 'thumb-sm'].join(' ')}>
<img className="rounded-circle" src={a4} alt="..." />
<i className="status status-bottom bg-primary" />
</span>
<time className="text-link help float-right">Yesterday</time>
<h6 className="m-0 mb-1">Mike Lewis</h6>
<p className="deemphasize text-ellipsis m-0">Just ain't sure about the weekend now. 90% I'll make it.</p>
</ListGroupItem>
<ListGroupItem className={s.listGroupItem}>
<span className={[s.notificationIcon, 'thumb-sm'].join(' ')}>
<img className="rounded-circle" src={a6} alt="..." />
<i className="status status-bottom bg-success" />
</span>
<time className="text-link help float-right">Apr 23</time>
<h6 className="m-0 mb-1">Freda Edison</h6>
<p className="deemphasize text-ellipsis m-0">Hey what's up? Me and Monica going for a lunch somewhere. Wanna join?</p>
</ListGroupItem>
</ListGroup>
);
}
Example #10
| Source File: tags.js From Blogs with MIT License | 5 votes |
|
render() {
const posts = this.props.data.allMarkdownRemark.edges;
const postLinks = posts.map((post) => (
<ListGroupItem key={post.node.fields.slug}>
<Link to={post.node.fields.slug} className="hover-underline">
<h2 className="is-size-3">
{post.node.frontmatter.title}
</h2>
</Link>
<p>{post.node.frontmatter.author}</p>
</ListGroupItem>
));
const tag = this.props.pageContext.tag;
const title = this.props.data.site.siteMetadata.title;
const totalCount = this.props.data.allMarkdownRemark.totalCount;
const tagHeader = `${totalCount} post${
totalCount === 1 ? "" : "s"
} tagged with “${tag}”`;
return (
<Layout>
<section className="section mt-3">
<Helmet title={`${tag} | ${title}`} />
<div className="container content">
<div className="columns">
<div
className="column is-10 is-offset-1"
style={{ marginBottom: "6rem" }}
>
<h3 className="title is-size-4 is-bold-light">{tagHeader}</h3>
<ListGroup>{postLinks}</ListGroup>
<p>
<Link to="/categories/">Browse all tags</Link>
</p>
</div>
</div>
</div>
</section>
</Layout>
);
}
Example #11
| Source File: index.js From hackchat-client with Do What The F*ck You Want To Public License | 5 votes |
|
export function ChannelsModal({
onCloseChannelsModal,
channelData,
onOpenJoinModal,
open,
className,
intl,
}) {
// @todo Move this object into `components/BaseModal`
const closeBtn = (
<button type="button" className="close" onClick={onCloseChannelsModal}>
×
</button>
);
const channelsModalTitle = intl.formatMessage(messages.ChannelsModalTitle);
const cancelText = intl.formatMessage(messages.cancelText);
const emptyChannelsText = intl.formatMessage(messages.emptyChannelsText);
const joinNewText = intl.formatMessage(messages.joinNewText);
const channels = Object.keys(channelData);
let channelsBtns = <div />;
if (channels.length === 0) {
channelsBtns = <div key="empty">{emptyChannelsText}</div>;
} else {
channelsBtns = channels.map((chan) => (
<ChannelItem key={`${chan}Btn`} channel={chan} />
));
}
return (
<div>
<Modal isOpen={open} toggle={onCloseChannelsModal} className={className}>
<ModalHeader toggle={onCloseChannelsModal} close={closeBtn}>
{channelsModalTitle}
</ModalHeader>
<ModalBody>
<ListGroup>{channelsBtns}</ListGroup>
</ModalBody>
<ModalFooter>
<Button
onClick={() => {
onCloseChannelsModal();
onOpenJoinModal();
}}
>
{joinNewText}
</Button>{' '}
<Button onClick={onCloseChannelsModal}>{cancelText}</Button>
</ModalFooter>
</Modal>
</div>
);
}
Example #12
| Source File: Progress.js From light-blue-react-template with MIT License | 5 votes |
|
render() {
return (
<ListGroup className={[s.listGroup, 'thin-scroll'].join(' ')}>
<ListGroupItem className={s.listGroupItem}>
<span className="text-muted float-right">60%</span>
<h6 className="m-0 mb-1">
<strong>Urgent:</strong>
Rails 4.1.0 upgrade
</h6>
<Progress className={['m-0'].join(' ')} color="primary" value="60" />
<span className="help-block">3 notes added by James 2h ago...</span>
</ListGroupItem>
<ListGroupItem className={s.listGroupItem}>
<span className="text-muted float-right">83%</span>
<h6 className="m-0 mb-1">
<strong>Primary:</strong>
Light Blue App
</h6>
<Progress className={['progress-sm', 'm-0'].join(' ')} color="success" value="83" />
<span className="help-block">verifying stable probability status</span>
</ListGroupItem>
<ListGroupItem className={s.listGroupItem}>
<span className="text-muted float-right">44%</span>
<h6 className="m-0 mb-1">
<span className="circle bg-gray-dark text-warning" id="TooltipQuestion">
<i className="fa fa-question" />
</span>
<UncontrolledTooltip placement="bottom" target="TooltipQuestion">
2 issues require your attention
</UncontrolledTooltip>
Finish The Road to Hell Song
</h6>
<Progress className={['progress-sm', 'm-0'].join(' ')} color="gray-dark" value="44" />
<span className="help-block">last update: 2h ago</span>
</ListGroupItem>
<ListGroupItem className={s.listGroupItem}>
<span className="text-muted float-right">86%</span>
<h6 className="m-0 mb-1">
Complete project planning
</h6>
<Progress className={['progress-xs', 'm-0'].join(' ')} color="danger" value="86" />
<span className="help-block">no, no way this is not working...</span>
</ListGroupItem>
<ListGroupItem className={s.listGroupItem}>
<span className="text-muted float-right">100%</span>
<h6 className="m-0 mb-1">
<strong>Completed:</strong>
Instruct newbies on coding standards
</h6>
<Progress className={['progress-xs', 'm-0'].join(' ')} color="primary" value="100" />
<span className="help-block">last update: April 22, 2014 2:36 pm</span>
</ListGroupItem>
</ListGroup>
);
}
Example #13
| Source File: ListGroups.js From id.co.moonlay-eworkplace-admin-web with MIT License | 4 votes |
|
render() {
return (
<div className="animated fadeIn">
<Row>
<Col sm="12" xl="6">
<Card>
<CardHeader>
<i className="fa fa-align-justify"></i><strong>List Group</strong>
<div className="card-header-actions">
<a href="https://reactstrap.github.io/components/listgroup/" rel="noreferrer noopener" target="_blank" className="card-header-action">
<small className="text-muted">docs</small>
</a>
</div>
</CardHeader>
<CardBody>
<ListGroup>
<ListGroupItem>Cras justo odio</ListGroupItem>
<ListGroupItem>Dapibus ac facilisis in</ListGroupItem>
<ListGroupItem>Morbi leo risus</ListGroupItem>
<ListGroupItem>Porta ac consectetur ac</ListGroupItem>
<ListGroupItem>Vestibulum at eros</ListGroupItem>
</ListGroup>
</CardBody>
</Card>
</Col>
<Col sm="12" xl="6">
<Card>
<CardHeader>
<i className="fa fa-align-justify"></i><strong>List Group</strong>
<small> tags</small>
</CardHeader>
<CardBody>
<ListGroup>
<ListGroupItem className="justify-content-between">Cras justo odio <Badge className="float-right" pill>14</Badge></ListGroupItem>
<ListGroupItem className="justify-content-between">Dapibus ac facilisis in <Badge className="float-right" pill>2</Badge></ListGroupItem>
<ListGroupItem className="justify-content-between">Morbi leo risus <Badge className="float-right" pill
color="warning">1</Badge></ListGroupItem>
</ListGroup>
</CardBody>
</Card>
</Col>
</Row>
<Row>
<Col sm="12" xl="6">
<Card>
<CardHeader>
<i className="fa fa-align-justify"></i><strong>List Group</strong>
<small> disabled items</small>
</CardHeader>
<CardBody>
<ListGroup>
<ListGroupItem disabled tag="a" href="#">Cras justo odio</ListGroupItem>
<ListGroupItem tag="a" href="#">Dapibus ac facilisis in</ListGroupItem>
<ListGroupItem disabled tag="a" href="#">Morbi leo risus</ListGroupItem>
<ListGroupItem tag="a" href="#">Porta ac consectetur ac</ListGroupItem>
<ListGroupItem tag="a" href="#">Vestibulum at eros</ListGroupItem>
</ListGroup>
</CardBody>
</Card>
</Col>
<Col sm="12" xl="6">
<Card>
<CardHeader>
<i className="fa fa-align-justify"></i><strong>List Group</strong>
<small> contextual classes</small>
</CardHeader>
<CardBody>
<ListGroup>
<ListGroupItem action color="success">Cras justo odio</ListGroupItem>
<ListGroupItem action color="info">Dapibus ac facilisis in</ListGroupItem>
<ListGroupItem action color="warning">Morbi leo risus</ListGroupItem>
<ListGroupItem action color="danger">Porta ac consectetur ac</ListGroupItem>
</ListGroup>
</CardBody>
</Card>
</Col>
</Row>
<Row>
<Col sm="12" xl="6">
<Card>
<CardHeader>
<i className="fa fa-align-justify"></i><strong>List Group</strong>
<small> anchors</small>
</CardHeader>
<CardBody>
<p>Be sure to <strong>not use the standard <code>.btn</code> classes here</strong>.</p>
<ListGroup>
<ListGroupItem active tag="a" href="#" action>Cras justo odio</ListGroupItem>
<ListGroupItem tag="a" href="#" action>Dapibus ac facilisis in</ListGroupItem>
<ListGroupItem tag="a" href="#" action>Morbi leo risus</ListGroupItem>
<ListGroupItem tag="a" href="#" action>Porta ac consectetur ac</ListGroupItem>
<ListGroupItem disabled tag="a" href="#" action>Vestibulum at eros</ListGroupItem>
</ListGroup>
<p />
</CardBody>
</Card>
</Col>
<Col sm="12" xl="6">
<Card>
<CardHeader>
<i className="fa fa-align-justify"></i><strong>List Group</strong>
<small> buttons</small>
</CardHeader>
<CardBody>
<ListGroup>
<ListGroupItem active tag="button" action>Cras justo odio</ListGroupItem>
<ListGroupItem tag="button" action>Dapibus ac facilisis in</ListGroupItem>
<ListGroupItem tag="button" action>Morbi leo risus</ListGroupItem>
<ListGroupItem tag="button" action>Porta ac consectetur ac</ListGroupItem>
<ListGroupItem disabled tag="button" action>Vestibulum at eros</ListGroupItem>
</ListGroup>
</CardBody>
</Card>
</Col>
</Row>
<Row>
<Col sm="12" xl="6">
<Card>
<CardHeader>
<i className="fa fa-align-justify"></i><strong>List Group</strong>
<small> custom content</small>
</CardHeader>
<CardBody>
<ListGroup>
<ListGroupItem active action>
<ListGroupItemHeading>List group item heading</ListGroupItemHeading>
<ListGroupItemText>
Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
</ListGroupItemText>
</ListGroupItem>
<ListGroupItem action>
<ListGroupItemHeading>List group item heading</ListGroupItemHeading>
<ListGroupItemText>
Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
</ListGroupItemText>
</ListGroupItem>
<ListGroupItem action>
<ListGroupItemHeading>List group item heading</ListGroupItemHeading>
<ListGroupItemText>
Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
</ListGroupItemText>
</ListGroupItem>
</ListGroup>
</CardBody>
</Card>
</Col>
</Row>
<Row>
<Col>
<Card>
<CardHeader>
<i className="fa fa-align-justify"></i><strong>List Group</strong> <small>with TabPanes</small>
<div className="card-header-actions">
<Badge>NEW</Badge>
</div>
</CardHeader>
<CardBody>
<Row>
<Col xs="4">
<ListGroup id="list-tab" role="tablist">
<ListGroupItem onClick={() => this.toggle(0)} action active={this.state.activeTab === 0} >Home</ListGroupItem>
<ListGroupItem onClick={() => this.toggle(1)} action active={this.state.activeTab === 1} >Profile</ListGroupItem>
<ListGroupItem onClick={() => this.toggle(2)} action active={this.state.activeTab === 2} >Messages</ListGroupItem>
<ListGroupItem onClick={() => this.toggle(3)} action active={this.state.activeTab === 3} >Settings</ListGroupItem>
</ListGroup>
</Col>
<Col xs="8">
<TabContent activeTab={this.state.activeTab}>
<TabPane tabId={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>
</TabPane>
<TabPane tabId={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>
</TabPane>
<TabPane tabId={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>
</TabPane>
<TabPane tabId={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>
</TabPane>
</TabContent>
</Col>
</Row>
</CardBody>
</Card>
</Col>
</Row>
</div>
);
}
Example #14
| Source File: index.js From gobench with Apache License 2.0 | 4 votes |
|
render() {
return (
<div>
<h5 className="mb-4">
<strong>Default Layout</strong>
</h5>
<div className="mb-5">
<ListGroup>
<ListGroupItem>Cras justo odio</ListGroupItem>
<ListGroupItem>Dapibus ac facilisis in</ListGroupItem>
<ListGroupItem>Morbi leo risus</ListGroupItem>
<ListGroupItem>Porta ac consectetur ac</ListGroupItem>
<ListGroupItem>Vestibulum at eros</ListGroupItem>
</ListGroup>
</div>
<h5 className="mb-4">
<strong>Anchors and buttons</strong>
</h5>
<div className="mb-5">
<div className="mb-5">
<ListGroup>
<ListGroupItem active tag="a" href="#" action>
Cras justo odio
</ListGroupItem>
<ListGroupItem tag="a" href="#" action>
Dapibus ac facilisis in
</ListGroupItem>
<ListGroupItem tag="a" href="#" action>
Morbi leo risus
</ListGroupItem>
<ListGroupItem tag="a" href="#" action>
Porta ac consectetur ac
</ListGroupItem>
<ListGroupItem disabled tag="a" href="#" action>
Vestibulum at eros
</ListGroupItem>
</ListGroup>
</div>
<ListGroup>
<ListGroupItem active tag="button" action>
Cras justo odio
</ListGroupItem>
<ListGroupItem tag="button" action>
Dapibus ac facilisis in
</ListGroupItem>
<ListGroupItem tag="button" action>
Morbi leo risus
</ListGroupItem>
<ListGroupItem tag="button" action>
Porta ac consectetur ac
</ListGroupItem>
<ListGroupItem disabled tag="button" action>
Vestibulum at eros
</ListGroupItem>
</ListGroup>
</div>
<h5 className="mb-4">
<strong>Horizontal</strong>
</h5>
<div className="mb-5">
<ListGroup horizontal="lg">
<ListGroupItem tag="a" href="#">
Cras justo odio
</ListGroupItem>
<ListGroupItem tag="a" href="#">
Dapibus ac facilisis in
</ListGroupItem>
<ListGroupItem tag="a" href="#">
Morbi leo risus
</ListGroupItem>
<ListGroupItem tag="a" href="#">
Porta ac consectetur ac
</ListGroupItem>
<ListGroupItem tag="a" href="#">
Vestibulum at eros
</ListGroupItem>
</ListGroup>
</div>
</div>
)
}
Example #15
| Source File: Notifications.js From light-blue-react-template with MIT License | 4 votes |
|
render() {
return (
<ListGroup className={[s.listGroup, 'thin-scroll'].join(' ')}>
<ListGroupItem className={s.listGroupItem}>
<span className={[s.notificationIcon, 'thumb-sm'].join(' ')}>
<img className="rounded-circle" src={a3} alt="..." />
</span>
<p className="m-0 overflow-hidden">
1 new user just signed up! Check out
{/* eslint-disable */}
<a href="#">Monica Smith</a>'s account.
{/* eslint-enable */}
<time className="help-block m-0">
2 mins ago
</time>
</p>
</ListGroupItem>
<ListGroupItem className={s.listGroupItem}>
<span className={[s.notificationIcon, 'thumb-sm'].join(' ')}>
<i className="glyphicon glyphicon-upload fa-lg" />
</span>
<p className="text-ellipsis m-0">
2.1.0-pre-alpha just released.
<time className="help-block m-0">
5h ago
</time>
</p>
</ListGroupItem>
<ListGroupItem className={s.listGroupItem}>
<span className={[s.notificationIcon, 'thumb-sm'].join(' ')}>
<i className="fa fa-bolt fa-lg" />
</span>
<p className="text-ellipsis m-0 overflow-hidden">
Server load limited.
<time className="help-block m-0">
7h ago
</time>
</p>
</ListGroupItem>
<ListGroupItem className={s.listGroupItem}>
<span className={[s.notificationIcon, 'thumb-sm'].join(' ')}>
<img className="rounded-circle" src={a5} alt="..." />
</span>
<p className="m-0 overflow-hidden">
{/* eslint-disable */}
User <a href="#">Jeff</a> registered
{/* eslint-enable */}
<Button size="xs" color="success" className="mr-1">Allow</Button>
<Button size="xs" color="danger">Deny</Button>
<time className="help-block m-0">
12:18 AM
</time>
</p>
</ListGroupItem>
<ListGroupItem className={s.listGroupItem}>
<span className={[s.notificationIcon, 'thumb-sm'].join(' ')}>
<i className="fa fa-shield fa-lg" />
</span>
<p className="m-0 overflow-hidden">
{/* eslint-disable */}
Instructions for changing your Envato Account password. Please
check your account <a href="#">security page</a>.
{/* eslint-enable */}
<time className="help-block m-0">
12:18 AM
</time>
</p>
</ListGroupItem>
<ListGroupItem className={s.listGroupItem}>
<span className={[s.notificationIcon, 'thumb-sm'].join(' ')}>
<span className="rounded bg-primary rounded-lg">
<i className="fa fa-facebook text-white" />
</span>
</span>
<p className="text-ellipsis m-0">
New <strong>76</strong> facebook likes received.
<time className="help-block m-0">
15 Apr 2014
</time>
</p>
</ListGroupItem>
<ListGroupItem className={s.listGroupItem}>
<span className={[s.notificationIcon, 'thumb-sm'].join(' ')}>
<span className="circle circle-lg bg-gray-dark">
<i className="fa fa-circle-o text-white" />
</span>
</span>
<p className="text-ellipsis m-0">
Dark matter detected.
<time className="help-block m-0">
15 Apr 2014
</time>
</p>
</ListGroupItem>
</ListGroup>
);
}
Example #16
| Source File: NewNotifications.js From light-blue-react-template with MIT License | 4 votes |
|
render() {
return (
<ListGroup className={[s.listGroup, 'thin-scroll'].join(' ')}>
<ListGroupItem className={s.listGroupItem}>
<span className={[s.notificationIcon, 'thumb-sm'].join(' ')}>
<i className="fa fa-check text-success fa-lg" />
</span>
<p className="m-0 overflow-hidden">
2 issues require your approval.
{/* eslint-disable */}
<a href="#">The Search Project</a> completed on time!
{/* eslint-enable */}
<time className="help-block m-0">
just now
</time>
</p>
</ListGroupItem>
<ListGroupItem className={s.listGroupItem}>
<span className={[s.notificationIcon, 'thumb-sm'].join(' ')}>
<img className="rounded-circle" src={a6} alt="..." />
</span>
<p className="m-0 overflow-hidden">
{/* eslint-disable */}
<a href="#">Jeniffer Willington </a>has just endorsed you with 50 points!
{/* eslint-enable */}
<time className="help-block m-0">
30 sec ago
</time>
</p>
</ListGroupItem>
<ListGroupItem className={s.listGroupItem}>
<span className={[s.notificationIcon, 'thumb-sm'].join(' ')}>
<img className="rounded-circle" src={a3} alt="..." />
</span>
<p className="m-0 overflow-hidden">
1 new user just signed up! Check out
{/* eslint-disable */}
<a href="#">Monica Smith</a>'s account.
{/* eslint-enable */}
<time className="help-block m-0">
2 mins ago
</time>
</p>
</ListGroupItem>
<ListGroupItem className={s.listGroupItem}>
<span className={[s.notificationIcon, 'thumb-sm'].join(' ')}>
<i className="glyphicon glyphicon-upload fa-lg" />
</span>
<p className="text-ellipsis m-0">
2.1.0-pre-alpha just released.
<time className="help-block m-0">
5h ago
</time>
</p>
</ListGroupItem>
<ListGroupItem className={s.listGroupItem}>
<span className={[s.notificationIcon, 'thumb-sm'].join(' ')}>
<i className="fa fa-bolt fa-lg" />
</span>
<p className="text-ellipsis m-0 overflow-hidden">
Server load limited.
<time className="help-block m-0">
7h ago
</time>
</p>
</ListGroupItem>
<ListGroupItem className={s.listGroupItem}>
<span className={[s.notificationIcon, 'thumb-sm'].join(' ')}>
<img className="rounded-circle" src={a5} alt="..." />
</span>
<p className="m-0 overflow-hidden">
{/* eslint-disable */}
User <a href="#">Jeff</a> registered
{/* eslint-enable */}
<Button size="xs" color="success" className="mr-1">Allow</Button>
<Button size="xs" color="danger">Deny</Button>
<time className="help-block m-0">
12:18 AM
</time>
</p>
</ListGroupItem>
<ListGroupItem className={s.listGroupItem}>
<span className={[s.notificationIcon, 'thumb-sm'].join(' ')}>
<i className="fa fa-shield fa-lg" />
</span>
<p className="m-0 overflow-hidden">
{/* eslint-disable */}
Instructions for changing your Envato Account password. Please
check your account <a href="#">security page</a>.
{/* eslint-enable */}
<time className="help-block m-0">
12:18 AM
</time>
</p>
</ListGroupItem>
<ListGroupItem className={s.listGroupItem}>
<span className={[s.notificationIcon, 'thumb-sm'].join(' ')}>
<span className="rounded bg-primary rounded-lg">
<i className="fa fa-facebook text-white" />
</span>
</span>
<p className="text-ellipsis m-0">
New <strong>76</strong> facebook likes received.
<time className="help-block m-0">
15 Apr 2014
</time>
</p>
</ListGroupItem>
<ListGroupItem className={s.listGroupItem}>
<span className={[s.notificationIcon, 'thumb-sm'].join(' ')}>
<span className="circle circle-lg bg-gray-dark">
<i className="fa fa-circle-o text-white" />
</span>
</span>
<p className="text-ellipsis m-0">
Dark matter detected.
<time className="help-block m-0">
15 Apr 2014
</time>
</p>
</ListGroupItem>
</ListGroup>
);
}
Example #17
| Source File: RoomList.js From react-js-chat-webapp-example with MIT License | 4 votes |
|
function RoomList() {
const [room, setRoom] = useState([]);
const [showLoading, setShowLoading] = useState(true);
const [nickname, setNickname] = useState('');
const history = useHistory();
useEffect(() => {
const fetchData = async () => {
setNickname(localStorage.getItem('nickname'));
firebase.database().ref('rooms/').on('value', resp => {
setRoom([]);
setRoom(snapshotToArray(resp));
setShowLoading(false);
});
};
fetchData();
}, []);
const snapshotToArray = (snapshot) => {
const returnArr = [];
snapshot.forEach((childSnapshot) => {
const item = childSnapshot.val();
item.key = childSnapshot.key;
returnArr.push(item);
});
return returnArr;
}
const enterChatRoom = (roomname) => {
const chat = { roomname: '', nickname: '', message: '', date: '', type: '' };
chat.roomname = roomname;
chat.nickname = nickname;
chat.date = Moment(new Date()).format('DD/MM/YYYY HH:mm:ss');
chat.message = `${nickname} enter the room`;
chat.type = 'join';
const newMessage = firebase.database().ref('chats/').push();
newMessage.set(chat);
firebase.database().ref('roomusers/').orderByChild('roomname').equalTo(roomname).on('value', (resp) => {
let roomuser = [];
roomuser = snapshotToArray(resp);
const user = roomuser.find(x => x.nickname === nickname);
if (user !== undefined) {
const userRef = firebase.database().ref('roomusers/' + user.key);
userRef.update({status: 'online'});
} else {
const newroomuser = { roomname: '', nickname: '', status: '' };
newroomuser.roomname = roomname;
newroomuser.nickname = nickname;
newroomuser.status = 'online';
const newRoomUser = firebase.database().ref('roomusers/').push();
newRoomUser.set(newroomuser);
}
});
history.push('/chatroom/' + roomname);
}
const logout = () => {
localStorage.removeItem('nickname');
history.push('/login');
}
return (
<div>
{showLoading &&
<Spinner color="primary" />
}
<Jumbotron>
<h3>{nickname} <Button onClick={() => { logout() }}>Logout</Button></h3>
<h2>Room List</h2>
<div>
<Link to="/addroom">Add Room</Link>
</div>
<ListGroup>
{room.map((item, idx) => (
<ListGroupItem key={idx} action onClick={() => { enterChatRoom(item.roomname) }}>{item.roomname}</ListGroupItem>
))}
</ListGroup>
</Jumbotron>
</div>
);
}
