@knapsack/app
Version:
Build Design Systems on top of knapsack, by Basalt
55 lines (50 loc) • 1.6 kB
JSX
/**
* Copyright (C) 2018 Basalt
This file is part of Knapsack.
Knapsack is free software; you can redistribute it and/or modify it
under the terms of the GNU General Public License as published by the Free
Software Foundation; either version 2 of the License, or (at your option)
any later version.
Knapsack is distributed in the hope that it will be useful, but WITHOUT
ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for
more details.
You should have received a copy of the GNU General Public License along
with Knapsack; if not, see <https://www.gnu.org/licenses>.
*/
import React from 'react';
import PropTypes from 'prop-types';
import './dos-and-donts-panel.scss';
export default function DosAndDontsPanel(props) {
return (
<figure
className="ks-dos-and-donts-panel"
style={{
borderBottomColor: props.item.do
? 'var(--c-success)'
: 'var(--c-danger)',
}}
>
<div>
<img alt="" src={props.item.image} />
<figcaption>
<strong
style={{
color: props.item.do ? 'var(--c-success)' : 'var(--c-danger)',
}}
>
{props.item.do ? 'Do: ' : "Don't: "}
</strong>
{props.item.caption}
</figcaption>
</div>
</figure>
);
}
DosAndDontsPanel.propTypes = {
item: PropTypes.shape({
image: PropTypes.string,
caption: PropTypes.string,
do: PropTypes.bool,
}).isRequired,
};