Mirrors/blakeblackshear.frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2024-11-21 19:07:46 +01:00
Code Issues Projects Releases Wiki Activity

feat(web): add button types

Browse Source
This commit is contained in:
Paul Armstrong 2021-02-04 10:36:46 -08:00 committed by Blake Blackshear
parent 5965da88c3
commit 0cac2fec2a
2 changed files with 39 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
web/src/StyleGuide.jsx
View File

@ -28,6 +28,30 @@ export default function StyleGuide() {
<Button color="green">Save</Button> <Button color="green">Save</Button>
<Button disabled>Disabled</Button> <Button disabled>Disabled</Button>
</div> </div>
<div class="flex space-x-4 mb-4">
<Button type="text">Default</Button>
<Button color="red" type="text">
Danger
</Button>
<Button color="green" type="text">
Save
</Button>
<Button disabled type="text">
Disabled
</Button>
</div>
<div class="flex space-x-4 mb-4">
<Button type="outlined">Default</Button>
<Button color="red" type="outlined">
Danger
</Button>
<Button color="green" type="outlined">
Save
</Button>
<Button disabled type="outlined">
Disabled
</Button>
</div>
<Heading size="md">Switch</Heading> <Heading size="md">Switch</Heading>
<div class="flex"> <div class="flex">

23
web/src/components/Button.jsx
View File

@ -5,24 +5,31 @@ const noop = () => {};
const ButtonColors = { const ButtonColors = {
blue: { blue: {
contained: 'bg-blue-500 focus:bg-blue-400 active:bg-blue-600 ring-blue-300', contained: 'bg-blue-500 focus:bg-blue-400 active:bg-blue-600 ring-blue-300',
outlined: '', outlined:
'text-blue-500 border-2 border-blue-500 hover:bg-blue-500 hover:bg-opacity-20 focus:bg-blue-500 focus:bg-opacity-40 active:bg-blue-500 active:bg-opacity-40',
text: text:
'text-blue-500 hover:bg-blue-500 hover:bg-opacity-20 focus:bg-blue-500 focus:bg-opacity-40 active:bg-blue-500 active:bg-opacity-40', 'text-blue-500 hover:bg-blue-500 hover:bg-opacity-20 focus:bg-blue-500 focus:bg-opacity-40 active:bg-blue-500 active:bg-opacity-40',
}, },
red: { red: {
contained: 'bg-red-500 focus:bg-red-400 active:bg-red-600 ring-red-300', contained: 'bg-red-500 focus:bg-red-400 active:bg-red-600 ring-red-300',
outlined: '', outlined:
text: '', 'text-red-500 border-2 border-red-500 hover:bg-red-500 hover:bg-opacity-20 focus:bg-red-500 focus:bg-opacity-40 active:bg-red-500 active:bg-opacity-40',
text:
'text-red-500 hover:bg-red-500 hover:bg-opacity-20 focus:bg-red-500 focus:bg-opacity-40 active:bg-red-500 active:bg-opacity-40',
}, },
green: { green: {
contained: 'bg-green-500 focus:bg-green-400 active:bg-green-600 ring-green-300', contained: 'bg-green-500 focus:bg-green-400 active:bg-green-600 ring-green-300',
outlined: '', outlined:
text: '', 'text-green-500 border-2 border-green-500 hover:bg-green-500 hover:bg-opacity-20 focus:bg-green-500 focus:bg-opacity-40 active:bg-green-500 active:bg-opacity-40',
text:
'text-green-500 hover:bg-green-500 hover:bg-opacity-20 focus:bg-green-500 focus:bg-opacity-40 active:bg-green-500 active:bg-opacity-40',
}, },
disabled: { disabled: {
contained: 'bg-gray-400', contained: 'bg-gray-400',
outlined: '', outlined:
text: '', 'text-gray-500 border-2 border-gray-500 hover:bg-gray-500 hover:bg-opacity-20 focus:bg-gray-500 focus:bg-opacity-40 active:bg-gray-500 active:bg-opacity-40',
text:
'text-gray-500 hover:bg-gray-500 hover:bg-opacity-20 focus:bg-gray-500 focus:bg-opacity-40 active:bg-gray-500 active:bg-opacity-40',
}, },
black: { black: {
contained: '', contained: '',
@ -48,7 +55,7 @@ export default function Button({
type = 'contained', type = 'contained',
...attrs ...attrs
}) { }) {
let classes = `${className} ${ let classes = `${className} ${ButtonTypes[type]} ${
ButtonColors[disabled ? 'disabled' : color][type] ButtonColors[disabled ? 'disabled' : color][type]
} font-sans inline-flex font-bold uppercase text-xs px-2 py-2 rounded outline-none focus:outline-none ring-opacity-50 transition-shadow transition-colors ${ } font-sans inline-flex font-bold uppercase text-xs px-2 py-2 rounded outline-none focus:outline-none ring-opacity-50 transition-shadow transition-colors ${
disabled ? 'cursor-not-allowed' : 'focus:ring-2 cursor-pointer' disabled ? 'cursor-not-allowed' : 'focus:ring-2 cursor-pointer'