Skip to content

Commit d24694e

Browse files
freds-devfreds-dev
committed
fix ESLint
1 parent 483a37e commit d24694e

24 files changed

+673
-675
lines changed

‎app/components/device/new/general/index.tsx‎

Lines changed: 190 additions & 192 deletions
Original file line numberDiff line numberDiff line change
@@ -1,206 +1,204 @@
1-
import { InfoIcon } from "lucide-react";
2-
import { useTranslation } from "react-i18next";
3-
import TagsInput from "react-tagsinput";
4-
import { useField } from "remix-validated-form";
5-
import { Alert, AlertDescription, AlertTitle } from "~/components/ui/alert";
6-
import "react-tagsinput/react-tagsinput.css";
7-
import { useState } from "react";
1+
import { InfoIcon } from 'lucide-react'
2+
import { useState } from 'react'
3+
import { useTranslation } from 'react-i18next'
4+
import TagsInput from 'react-tagsinput'
5+
import { useField } from 'remix-validated-form'
6+
import { Alert, AlertDescription, AlertTitle } from '~/components/ui/alert'
7+
import 'react-tagsinput/react-tagsinput.css'
88

99
export interface GeneralProps {
10-
data: any;
10+
data: any
1111
}
1212

1313
export default function General({ data }: GeneralProps) {
14-
const { t } = useTranslation("newdevice");
14+
const { t } = useTranslation('newdevice')
1515

16-
const nameField = useField("name");
17-
const exposureField = useField("exposure");
18-
const groupIdField = useField("groupId");
16+
const nameField = useField('name')
17+
const exposureField = useField('exposure')
18+
const groupIdField = useField('groupId')
1919

20-
const [tags, setTags] = useState(
21-
data.groupId ? data.groupId.split(", ") : [],
22-
);
20+
const [tags, setTags] = useState(data.groupId ? data.groupId.split(', ') : [])
2321

24-
const handleChange = (tags: any) => {
25-
setTags(tags);
26-
};
22+
const handleChange = (tags: any) => {
23+
setTags(tags)
24+
}
2725

28-
return (
29-
<div className="space-y-4 pt-4">
30-
<div>
31-
<p className="mt-1 max-w-2xl text-sm text-gray-500 dark:text-dark-text">
32-
{t("general_text")}
33-
</p>
34-
</div>
26+
return (
27+
<div className="space-y-4 pt-4">
28+
<div>
29+
<p className="mt-1 max-w-2xl text-sm text-gray-500 dark:text-dark-text">
30+
{t('general_text')}
31+
</p>
32+
</div>
3533

36-
<div className="py-2">
37-
<Alert>
38-
<InfoIcon className="h-4 w-4" />
39-
<AlertTitle>Info</AlertTitle>
40-
<AlertDescription>{t("general_info_text")}</AlertDescription>
41-
</Alert>
42-
</div>
34+
<div className="py-2">
35+
<Alert>
36+
<InfoIcon className="h-4 w-4" />
37+
<AlertTitle>Info</AlertTitle>
38+
<AlertDescription>{t('general_info_text')}</AlertDescription>
39+
</Alert>
40+
</div>
4341

44-
<div className="mt-6 sm:mt-5">
45-
<div className="sm:grid sm:grid-cols-3 sm:items-start sm:gap-4 sm:border-t sm:border-gray-200 sm:pt-5">
46-
<label
47-
htmlFor="username"
48-
className="block text-sm font-medium text-gray-700 dark:text-dark-text sm:mt-px sm:pt-2"
49-
>
50-
{t("station_name")}
51-
</label>
52-
<div className="mt-1 sm:col-span-2 sm:mt-0">
53-
<div className="flex max-w-lg rounded-md shadow-sm">
54-
<input
55-
{...nameField.getInputProps({ id: "name" })}
56-
type="text"
57-
name="name"
58-
id="name"
59-
required
60-
defaultValue={data.name}
61-
autoComplete="name"
62-
className="focus:ring-indigo-500 focus:border-indigo-500 block w-full min-w-0 flex-1 rounded-md border-gray-300 sm:text-sm dark:border-slate-800 dark:bg-slate-950 dark:ring-offset-slate-950 dark:placeholder:text-slate-400 dark:focus-visible:ring-slate-300"
63-
/>
64-
</div>
65-
{nameField.error && (
66-
<span className="ml-1 text-sm font-medium text-red-500">
67-
{nameField.error}
68-
</span>
69-
)}
70-
</div>
71-
</div>
42+
<div className="mt-6 sm:mt-5">
43+
<div className="sm:grid sm:grid-cols-3 sm:items-start sm:gap-4 sm:border-t sm:border-gray-200 sm:pt-5">
44+
<label
45+
htmlFor="username"
46+
className="block text-sm font-medium text-gray-700 dark:text-dark-text sm:mt-px sm:pt-2"
47+
>
48+
{t('station_name')}
49+
</label>
50+
<div className="mt-1 sm:col-span-2 sm:mt-0">
51+
<div className="flex max-w-lg rounded-md shadow-sm">
52+
<input
53+
{...nameField.getInputProps({ id: 'name' })}
54+
type="text"
55+
name="name"
56+
id="name"
57+
required
58+
defaultValue={data.name}
59+
autoComplete="name"
60+
className="focus:ring-indigo-500 focus:border-indigo-500 block w-full min-w-0 flex-1 rounded-md border-gray-300 dark:border-slate-800 dark:bg-slate-950 dark:ring-offset-slate-950 dark:placeholder:text-slate-400 dark:focus-visible:ring-slate-300 sm:text-sm"
61+
/>
62+
</div>
63+
{nameField.error && (
64+
<span className="ml-1 text-sm font-medium text-red-500">
65+
{nameField.error}
66+
</span>
67+
)}
68+
</div>
69+
</div>
7270

73-
<div
74-
data-error={nameField.error !== undefined}
75-
className="pt-5 data-[error=false]:mt-6 sm:grid sm:grid-cols-3 sm:items-start sm:border-t sm:border-gray-200"
76-
>
77-
<div>
78-
<div
79-
className="text-base font-medium text-gray-900 sm:text-sm sm:text-gray-700 dark:text-dark-text"
80-
id="device-exposure"
81-
>
82-
{t("exposure")}
83-
</div>
84-
</div>
85-
<div className="sm:col-span-2">
86-
<div className="max-w-lg">
87-
<p className="text-sm text-gray-500 dark:text-dark-text">
88-
{t("exposure_explaination")}
89-
</p>
90-
<div className="mt-4 space-y-4">
91-
<div className="flex items-center">
92-
<input
93-
{...exposureField.getInputProps({ id: "exposure" })}
94-
id="exposure-indoor"
95-
name="exposure"
96-
value="INDOOR"
97-
defaultChecked={data.exposure === "INDOOR"}
98-
type="radio"
99-
required
100-
className="focus:ring-indigo-500 text-indigo-600 h-4 w-4 border-gray-300 dark:border-slate-800 dark:bg-slate-950 dark:ring-offset-slate-950 dark:placeholder:text-slate-400 dark:focus-visible:ring-slate-300"
101-
/>
102-
<label
103-
htmlFor="exposure-indoor"
104-
className="ml-3 block text-sm font-medium text-gray-700 dark:text-dark-text"
105-
>
106-
{t("indoor")}
107-
</label>
108-
</div>
109-
<div className="flex items-center">
110-
<input
111-
{...exposureField.getInputProps({ id: "exposure" })}
112-
id="exposure-outdoor"
113-
name="exposure"
114-
value="OUTDOOR"
115-
defaultChecked={data.exposure === "OUTDOOR"}
116-
type="radio"
117-
required
118-
className="focus:ring-indigo-500 text-indigo-600 h-4 w-4 border-gray-300 dark:border-slate-800 dark:bg-slate-950 dark:ring-offset-slate-950 dark:placeholder:text-slate-400 dark:focus-visible:ring-slate-300"
119-
/>
120-
<label
121-
htmlFor="exposure-outdoor"
122-
className="ml-3 block text-sm font-medium text-gray-700 dark:text-dark-text"
123-
>
124-
{t("outdoor")}
125-
</label>
126-
</div>
127-
<div className="flex items-center">
128-
<input
129-
{...exposureField.getInputProps({ id: "exposure" })}
130-
id="exposure-mobile"
131-
name="exposure"
132-
value="MOBILE"
133-
defaultChecked={data.exposure === "MOBILE"}
134-
type="radio"
135-
required
136-
className="focus:ring-indigo-500 text-indigo-600 h-4 w-4 border-gray-300 dark:border-slate-800 dark:bg-slate-950 dark:ring-offset-slate-950 dark:placeholder:text-slate-400 dark:focus-visible:ring-slate-300"
137-
/>
138-
<label
139-
htmlFor="exposure-mobile"
140-
className="ml-3 block text-sm font-medium text-gray-700 dark:text-dark-text"
141-
>
142-
{t("mobile")}
143-
</label>
144-
</div>
145-
</div>
146-
{exposureField.error && (
147-
<span className="ml-2 mt-2 text-sm font-medium text-red-500">
148-
{exposureField.error}
149-
</span>
150-
)}
151-
</div>
152-
</div>
153-
</div>
71+
<div
72+
data-error={nameField.error !== undefined}
73+
className="pt-5 data-[error=false]:mt-6 sm:grid sm:grid-cols-3 sm:items-start sm:border-t sm:border-gray-200"
74+
>
75+
<div>
76+
<div
77+
className="text-base font-medium text-gray-900 dark:text-dark-text sm:text-sm sm:text-gray-700"
78+
id="device-exposure"
79+
>
80+
{t('exposure')}
81+
</div>
82+
</div>
83+
<div className="sm:col-span-2">
84+
<div className="max-w-lg">
85+
<p className="text-sm text-gray-500 dark:text-dark-text">
86+
{t('exposure_explaination')}
87+
</p>
88+
<div className="mt-4 space-y-4">
89+
<div className="flex items-center">
90+
<input
91+
{...exposureField.getInputProps({ id: 'exposure' })}
92+
id="exposure-indoor"
93+
name="exposure"
94+
value="INDOOR"
95+
defaultChecked={data.exposure === 'INDOOR'}
96+
type="radio"
97+
required
98+
className="focus:ring-indigo-500 text-indigo-600 h-4 w-4 border-gray-300 dark:border-slate-800 dark:bg-slate-950 dark:ring-offset-slate-950 dark:placeholder:text-slate-400 dark:focus-visible:ring-slate-300"
99+
/>
100+
<label
101+
htmlFor="exposure-indoor"
102+
className="ml-3 block text-sm font-medium text-gray-700 dark:text-dark-text"
103+
>
104+
{t('indoor')}
105+
</label>
106+
</div>
107+
<div className="flex items-center">
108+
<input
109+
{...exposureField.getInputProps({ id: 'exposure' })}
110+
id="exposure-outdoor"
111+
name="exposure"
112+
value="OUTDOOR"
113+
defaultChecked={data.exposure === 'OUTDOOR'}
114+
type="radio"
115+
required
116+
className="focus:ring-indigo-500 text-indigo-600 h-4 w-4 border-gray-300 dark:border-slate-800 dark:bg-slate-950 dark:ring-offset-slate-950 dark:placeholder:text-slate-400 dark:focus-visible:ring-slate-300"
117+
/>
118+
<label
119+
htmlFor="exposure-outdoor"
120+
className="ml-3 block text-sm font-medium text-gray-700 dark:text-dark-text"
121+
>
122+
{t('outdoor')}
123+
</label>
124+
</div>
125+
<div className="flex items-center">
126+
<input
127+
{...exposureField.getInputProps({ id: 'exposure' })}
128+
id="exposure-mobile"
129+
name="exposure"
130+
value="MOBILE"
131+
defaultChecked={data.exposure === 'MOBILE'}
132+
type="radio"
133+
required
134+
className="focus:ring-indigo-500 text-indigo-600 h-4 w-4 border-gray-300 dark:border-slate-800 dark:bg-slate-950 dark:ring-offset-slate-950 dark:placeholder:text-slate-400 dark:focus-visible:ring-slate-300"
135+
/>
136+
<label
137+
htmlFor="exposure-mobile"
138+
className="ml-3 block text-sm font-medium text-gray-700 dark:text-dark-text"
139+
>
140+
{t('mobile')}
141+
</label>
142+
</div>
143+
</div>
144+
{exposureField.error && (
145+
<span className="ml-2 mt-2 text-sm font-medium text-red-500">
146+
{exposureField.error}
147+
</span>
148+
)}
149+
</div>
150+
</div>
151+
</div>
154152

155-
<div
156-
data-exposureerror={exposureField.error !== undefined}
157-
data-groupiderror={groupIdField.error !== undefined}
158-
className="pt-5 data-[exposureerror=false]:mt-6 data-[groupiderror=false]:mb-6 sm:grid sm:grid-cols-3 sm:items-start sm:gap-4 sm:border-t sm:border-gray-200"
159-
>
160-
<label
161-
htmlFor="groupId"
162-
className="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2 dark:text-dark-text"
163-
>
164-
Group ID ({t("optional")})
165-
</label>
166-
<div className="mt-1 sm:col-span-2 sm:mt-0">
167-
<div className="flex max-w-lg rounded-md flex-1 border border-gray-300 focus-within:border-[3px] focus-within:border-blue-700 sm:text-sm">
168-
<input
169-
{...groupIdField.getInputProps({ id: "groupId" })}
170-
type="text"
171-
name="groupId"
172-
id="groupId"
173-
value={tags.length > 0 ? tags.join(", ") : ""}
174-
className="hidden"
175-
disabled={tags.length === 0}
176-
/>
177-
<TagsInput
178-
value={tags}
179-
onChange={handleChange}
180-
addKeys={[9, 13, 32, 188]}
181-
className="block w-full flex-1 rounded-md sm:text-sm"
182-
focusedClassName=""
183-
tagProps={{
184-
className:
185-
"bg-blue-700 inline-block m-1 p-1 rounded-md inline-flex items-center text-white",
186-
classNameRemove:
187-
"h-5 w-5 text-black ml-1 bg-white cursor-pointer rounded-full after:content-['_×'] text-center",
188-
}}
189-
inputProps={{
190-
className:
191-
"border-0 rounded-md focus:ring-0 focus:border-0 w-fit m-1 p-1 dark:border-slate-800 dark:bg-slate-950 dark:ring-offset-slate-950 dark:placeholder:text-slate-400 dark:focus-visible:ring-slate-300",
192-
placeholder: "Add a Group ID",
193-
}}
194-
/>
195-
</div>
196-
{groupIdField.error && (
197-
<span className="ml-1 text-sm font-medium text-red-500">
198-
{groupIdField.error}
199-
</span>
200-
)}
201-
</div>
202-
</div>
203-
</div>
204-
</div>
205-
);
153+
<div
154+
data-exposureerror={exposureField.error !== undefined}
155+
data-groupiderror={groupIdField.error !== undefined}
156+
className="pt-5 data-[exposureerror=false]:mt-6 data-[groupiderror=false]:mb-6 sm:grid sm:grid-cols-3 sm:items-start sm:gap-4 sm:border-t sm:border-gray-200"
157+
>
158+
<label
159+
htmlFor="groupId"
160+
className="block text-sm font-medium text-gray-700 dark:text-dark-text sm:mt-px sm:pt-2"
161+
>
162+
Group ID ({t('optional')})
163+
</label>
164+
<div className="mt-1 sm:col-span-2 sm:mt-0">
165+
<div className="flex max-w-lg flex-1 rounded-md border border-gray-300 focus-within:border-[3px] focus-within:border-blue-700 sm:text-sm">
166+
<input
167+
{...groupIdField.getInputProps({ id: 'groupId' })}
168+
type="text"
169+
name="groupId"
170+
id="groupId"
171+
value={tags.length > 0 ? tags.join(', ') : ''}
172+
className="hidden"
173+
disabled={tags.length === 0}
174+
/>
175+
<TagsInput
176+
value={tags}
177+
onChange={handleChange}
178+
addKeys={[9, 13, 32, 188]}
179+
className="block w-full flex-1 rounded-md sm:text-sm"
180+
focusedClassName=""
181+
tagProps={{
182+
className:
183+
'bg-blue-700 inline-block m-1 p-1 rounded-md inline-flex items-center text-white',
184+
classNameRemove:
185+
"h-5 w-5 text-black ml-1 bg-white cursor-pointer rounded-full after:content-['_×'] text-center",
186+
}}
187+
inputProps={{
188+
className:
189+
'border-0 rounded-md focus:ring-0 focus:border-0 w-fit m-1 p-1 dark:border-slate-800 dark:bg-slate-950 dark:ring-offset-slate-950 dark:placeholder:text-slate-400 dark:focus-visible:ring-slate-300',
190+
placeholder: 'Add a Group ID',
191+
}}
192+
/>
193+
</div>
194+
{groupIdField.error && (
195+
<span className="ml-1 text-sm font-medium text-red-500">
196+
{groupIdField.error}
197+
</span>
198+
)}
199+
</div>
200+
</div>
201+
</div>
202+
</div>
203+
)
206204
}

0 commit comments

Comments
 (0)