mirror of
https://github.com/blakeblackshear/frigate.git
synced 2026-02-02 09:15:22 +03:00
chore: formatting
This commit is contained in:
parent
4dab9a39dc
commit
b7f1b381a9
@ -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} />
|
||||
))}
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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>
|
||||
);
|
||||
|
||||
Loading…
Reference in New Issue
Block a user