chore: formatting

This commit is contained in:
JohnMark Sill 2022-02-16 11:07:17 -06:00
parent 4dab9a39dc
commit b7f1b381a9
5 changed files with 60 additions and 60 deletions

View File

@ -15,7 +15,7 @@ export default function Cameras() {
return status !== FetchStatus.LOADED ? (
<ActivityIndicator />
) : (
<div className='grid grid-cols-1 3xl:grid-cols-3 md:grid-cols-2 gap-4 p-2 px-4'>
<div className="grid grid-cols-1 3xl:grid-cols-3 md:grid-cols-2 gap-4 p-2 px-4">
{Object.entries(config.cameras).map(([camera, conf]) => (
<Camera name={camera} conf={conf} />
))}

View File

@ -33,9 +33,9 @@ export default function Debug() {
}, [config]);
return (
<div className='space-y-4 p-2 px-4'>
<div className="space-y-4 p-2 px-4">
<Heading>
Debug <span className='text-sm'>{service.version}</span>
Debug <span className="text-sm">{service.version}</span>
</Heading>
{!detectors ? (
@ -44,8 +44,8 @@ export default function Debug() {
</div>
) : (
<Fragment>
<div data-testid='detectors' className='min-w-0 overflow-auto'>
<Table className='w-full'>
<div data-testid="detectors" className="min-w-0 overflow-auto">
<Table className="w-full">
<Thead>
<Tr>
<Th>detector</Th>
@ -67,8 +67,8 @@ export default function Debug() {
</Table>
</div>
<div data-testid='cameras' className='min-w-0 overflow-auto'>
<Table className='w-full'>
<div data-testid="cameras" className="min-w-0 overflow-auto">
<Table className="w-full">
<Thead>
<Tr>
<Th>camera</Th>
@ -96,12 +96,12 @@ export default function Debug() {
</Fragment>
)}
<div className='relative'>
<Heading size='sm'>Config</Heading>
<Button className='absolute top-8 right-4' onClick={handleCopyConfig}>
<div className="relative">
<Heading size="sm">Config</Heading>
<Button className="absolute top-8 right-4" onClick={handleCopyConfig}>
Copy to Clipboard
</Button>
<pre className='overflow-auto font-mono text-gray-900 dark:text-gray-100 rounded bg-gray-100 dark:bg-gray-800 p-2 max-h-96'>
<pre className="overflow-auto font-mono text-gray-900 dark:text-gray-100 rounded bg-gray-100 dark:bg-gray-800 p-2 max-h-96">
{JSON.stringify(config, null, 2)}
</pre>
</div>

View File

@ -81,11 +81,11 @@ export default function Events({ path: pathname, limit = API_LIMIT } = {}) {
[apiHost, handleFilter, pathname, scrollToRef]
);
return (
<div className='space-y-4 p-2 px-4 w-full'>
<div className="space-y-4 p-2 px-4 w-full">
<Heading>Events</Heading>
<Filters onChange={handleFilter} searchParams={searchParams} />
<div className='min-w-0 overflow-auto'>
<Table className='min-w-full table-fixed'>
<div className="min-w-0 overflow-auto">
<Table className="min-w-full table-fixed">
<TableHead />
{events.map((props, idx) => {
@ -95,7 +95,7 @@ export default function Events({ path: pathname, limit = API_LIMIT } = {}) {
<Tfoot>
<Tr>
<Td className='text-center p-4' colSpan='8'>
<Td className="text-center p-4" colSpan="8">
{status === FetchStatus.LOADING ? <ActivityIndicator /> : reachedEnd ? 'No more events' : null}
</Td>
</Tr>

View File

@ -16,10 +16,10 @@ export default function Recording({ camera, date, hour, seconds }) {
if (data.length === 0) {
return (
<div className='space-y-4'>
<div className="space-y-4">
<Heading>{camera} Recordings</Heading>
<div class='bg-yellow-100 border-l-4 border-yellow-500 text-yellow-700 p-4' role='alert'>
<p class='font-bold'>No Recordings Found</p>
<div class="bg-yellow-100 border-l-4 border-yellow-500 text-yellow-700 p-4" role="alert">
<p class="font-bold">No Recordings Found</p>
<p>Make sure you have enabled the record role in your configuration for the {camera} camera.</p>
</div>
</div>
@ -69,7 +69,7 @@ export default function Recording({ camera, date, hour, seconds }) {
}
return (
<div className='space-y-4 p-2 px-4'>
<div className="space-y-4 p-2 px-4">
<Heading>{camera} Recordings</Heading>
<VideoPlayer

View File

@ -25,47 +25,47 @@ export default function StyleGuide() {
};
return (
<div className='p-2 px-4'>
<Heading size='md'>Button</Heading>
<div className='flex space-x-4 mb-4'>
<div className="p-2 px-4">
<Heading size="md">Button</Heading>
<div className="flex space-x-4 mb-4">
<Button>Default</Button>
<Button color='red'>Danger</Button>
<Button color='green'>Save</Button>
<Button color='gray'>Gray</Button>
<Button color="red">Danger</Button>
<Button color="green">Save</Button>
<Button color="gray">Gray</Button>
<Button disabled>Disabled</Button>
</div>
<div className='flex space-x-4 mb-4'>
<Button type='text'>Default</Button>
<Button color='red' type='text'>
<div className="flex space-x-4 mb-4">
<Button type="text">Default</Button>
<Button color="red" type="text">
Danger
</Button>
<Button color='green' type='text'>
<Button color="green" type="text">
Save
</Button>
<Button color='gray' type='text'>
<Button color="gray" type="text">
Gray
</Button>
<Button disabled type='text'>
<Button disabled type="text">
Disabled
</Button>
</div>
<div className='flex space-x-4 mb-4'>
<Button type='outlined'>Default</Button>
<Button color='red' type='outlined'>
<div className="flex space-x-4 mb-4">
<Button type="outlined">Default</Button>
<Button color="red" type="outlined">
Danger
</Button>
<Button color='green' type='outlined'>
<Button color="green" type="outlined">
Save
</Button>
<Button color='gray' type='outlined'>
<Button color="gray" type="outlined">
Gray
</Button>
<Button disabled type='outlined'>
<Button disabled type="outlined">
Disabled
</Button>
</div>
<Heading size='md'>Dialog</Heading>
<Heading size="md">Dialog</Heading>
<Button
onClick={() => {
setShowDialog(true);
@ -76,8 +76,8 @@ export default function StyleGuide() {
{showDialog ? (
<Dialog
onDismiss={handleDismissDialog}
title='This is a dialog'
text='Would you like to see more?'
title="This is a dialog"
text="Would you like to see more?"
actions={[
{ text: 'Yes', color: 'red', onClick: handleDismissDialog },
{ text: 'No', onClick: handleDismissDialog },
@ -85,41 +85,41 @@ export default function StyleGuide() {
/>
) : null}
<Heading size='md'>Switch</Heading>
<div className='flex-col space-y-4 max-w-4xl'>
<Switch label='Disabled, off' labelPosition='after' />
<Switch label='Disabled, on' labelPosition='after' checked />
<Heading size="md">Switch</Heading>
<div className="flex-col space-y-4 max-w-4xl">
<Switch label="Disabled, off" labelPosition="after" />
<Switch label="Disabled, on" labelPosition="after" checked />
<Switch
label='Enabled, (off initial)'
labelPosition='after'
label="Enabled, (off initial)"
labelPosition="after"
checked={switches[0]}
id={0}
onChange={handleSwitch}
/>
<Switch
label='Enabled, (on initial)'
labelPosition='after'
label="Enabled, (on initial)"
labelPosition="after"
checked={switches[1]}
id={1}
onChange={handleSwitch}
/>
<Switch checked={switches[2]} id={2} label='Label before' onChange={handleSwitch} />
<Switch checked={switches[3]} id={3} label='Label after' labelPosition='after' onChange={handleSwitch} />
<Switch checked={switches[2]} id={2} label="Label before" onChange={handleSwitch} />
<Switch checked={switches[3]} id={3} label="Label after" labelPosition="after" onChange={handleSwitch} />
</div>
<Heading size='md'>Select</Heading>
<div className='flex space-x-4 mb-4 max-w-4xl'>
<Select label='Basic select box' options={['All', 'None', 'Other']} selected='None' />
<Heading size="md">Select</Heading>
<div className="flex space-x-4 mb-4 max-w-4xl">
<Select label="Basic select box" options={['All', 'None', 'Other']} selected="None" />
</div>
<Heading size='md'>TextField</Heading>
<div className='flex-col space-y-4 max-w-4xl'>
<TextField label='Default text field' />
<TextField label='Pre-filled' value='This is my pre-filled value' />
<TextField label='With help' helpText='This is some help text' />
<TextField label='Leading icon' leadingIcon={ArrowDropdown} />
<TextField label='Trailing icon' trailingIcon={ArrowDropup} />
<Heading size="md">TextField</Heading>
<div className="flex-col space-y-4 max-w-4xl">
<TextField label="Default text field" />
<TextField label="Pre-filled" value="This is my pre-filled value" />
<TextField label="With help" helpText="This is some help text" />
<TextField label="Leading icon" leadingIcon={ArrowDropdown} />
<TextField label="Trailing icon" trailingIcon={ArrowDropup} />
</div>
</div>
);