Skip to content

Commit 6bf7d7b

Browse files
w3bdesignw3bdesign
committed
More work on Tailwind Billing form
1 parent dc9da7c commit 6bf7d7b

File tree

2 files changed

+43
-104
lines changed

2 files changed

+43
-104
lines changed

‎components/Checkout/Billing.component.jsx

Lines changed: 42 additions & 103 deletions
Original file line numberDiff line numberDiff line change
@@ -5,12 +5,12 @@ const countryList = [{ countryCode: 'NO', countryName: 'Norge' }];
55
const Billing = ({ input, handleOnChange }) => {
66
return (
77
<>
8-
<div classNameName="row">
9-
<div classNameName="p-0 pr-2 col-lg-6 col-md-12">
10-
<div classNameName="form-group">
8+
<div className="row">
9+
<div className="p-0 pr-2 col-lg-6 col-md-12">
10+
<div className="form-group">
1111
<label htmlFor="first-name">
1212
Fornavn
13-
<abbr classNameName="required" title="required">
13+
<abbr className="required" title="required">
1414
*
1515
</abbr>
1616
</label>
@@ -19,17 +19,17 @@ const Billing = ({ input, handleOnChange }) => {
1919
value={input.firstName}
2020
type="text"
2121
name="firstName"
22-
classNameName="form-control woo-next-checkout-input"
22+
className="form-control woo-next-checkout-input"
2323
id="first-name"
2424
/>
2525
<Error errors={input.errors} fieldName={'firstName'} />
2626
</div>
2727
</div>
28-
<div classNameName="p-0 col-lg-6 col-sm-12">
29-
<div classNameName="form-group">
28+
<div className="p-0 col-lg-6 col-sm-12">
29+
<div className="form-group">
3030
<label htmlFor="last-name">
3131
Etternavn
32-
<abbr classNameName="required" title="required">
32+
<abbr className="required" title="required">
3333
*
3434
</abbr>
3535
</label>
@@ -38,39 +38,39 @@ const Billing = ({ input, handleOnChange }) => {
3838
value={input.lastName}
3939
type="text"
4040
name="lastName"
41-
classNameName="form-control woo-next-checkout-input"
41+
className="form-control woo-next-checkout-input"
4242
id="last-name"
4343
/>
4444
<Error errors={input.errors} fieldName={'lastName'} />
4545
</div>
4646
</div>
4747
</div>
4848
{/* Company Name */}
49-
<div classNameName="form-group">
49+
<div className="form-group">
5050
<label htmlFor="first-name">Firma</label>
5151
<input
5252
onChange={handleOnChange}
5353
value={input.company}
5454
type="text"
5555
name="company"
56-
classNameName="form-control woo-next-checkout-input"
56+
className="form-control woo-next-checkout-input"
5757
id="first-name"
5858
/>
5959
<Error errors={input.errors} fieldName={'company'} />
6060
</div>
6161
{/* Country */}
62-
<div classNameName="form-group">
62+
<div className="form-group">
6363
<label htmlFor="country-select">
6464
Land
65-
<abbr classNameName="required" title="required">
65+
<abbr className="required" title="required">
6666
*
6767
</abbr>
6868
</label>
6969
<select
7070
onChange={handleOnChange}
7171
value={input.country}
7272
name="country"
73-
classNameName="form-control woo-next-checkout-input"
73+
className="form-control woo-next-checkout-input"
7474
id="country-select"
7575
>
7676
<option value="">Velg ditt land ...</option>
@@ -84,10 +84,10 @@ const Billing = ({ input, handleOnChange }) => {
8484
<Error errors={input.errors} fieldName={'country'} />
8585
</div>
8686
{/* Street Address */}
87-
<div classNameName="form-group">
87+
<div className="form-group">
8888
<label htmlFor="street-address">
8989
Addresse
90-
<abbr classNameName="required" title="required">
90+
<abbr className="required" title="required">
9191
*
9292
</abbr>
9393
</label>
@@ -97,7 +97,7 @@ const Billing = ({ input, handleOnChange }) => {
9797
value={input.address1}
9898
name="address1"
9999
placeholder="Gateaddresse"
100-
classNameName="form-control woo-next-checkout-input"
100+
className="form-control woo-next-checkout-input"
101101
id="street-address"
102102
/>
103103
<Error errors={input.errors} fieldName={'address1'} />
@@ -108,15 +108,15 @@ const Billing = ({ input, handleOnChange }) => {
108108
value={input.address2}
109109
name="address2"
110110
placeholder="Apartment, suite, unit etc.(optional)"
111-
classNameName="form-control woo-next-checkout-input"
111+
className="form-control woo-next-checkout-input"
112112
id="first-name"
113113
/>
114114
</div>
115115
{/* Town/City */}
116-
<div classNameName="form-group">
116+
<div className="form-group">
117117
<label htmlFor="city">
118118
By
119-
<abbr classNameName="required" title="required">
119+
<abbr className="required" title="required">
120120
*
121121
</abbr>
122122
</label>
@@ -125,16 +125,16 @@ const Billing = ({ input, handleOnChange }) => {
125125
value={input.city}
126126
type="text"
127127
name="city"
128-
classNameName="form-control woo-next-checkout-input"
128+
className="form-control woo-next-checkout-input"
129129
id="city"
130130
/>
131131
<Error errors={input.errors} fieldName={'city'} />
132132
</div>
133133
{/* County */}
134-
<div classNameName="form-group">
134+
<div className="form-group">
135135
<label htmlFor="state">
136136
Fylke
137-
<abbr classNameName="required" title="required">
137+
<abbr className="required" title="required">
138138
*
139139
</abbr>
140140
</label>
@@ -143,16 +143,16 @@ const Billing = ({ input, handleOnChange }) => {
143143
value={input.state}
144144
type="text"
145145
name="state"
146-
classNameName="form-control woo-next-checkout-input"
146+
className="form-control woo-next-checkout-input"
147147
id="state"
148148
/>
149149
<Error errors={input.errors} fieldName={'state'} />
150150
</div>
151151
{/* Post Code */}
152-
<div classNameName="form-group">
152+
<div className="form-group">
153153
<label htmlFor="post-code">
154154
Postnummer
155-
<abbr classNameName="required" title="required">
155+
<abbr className="required" title="required">
156156
*
157157
</abbr>
158158
</label>
@@ -161,18 +161,18 @@ const Billing = ({ input, handleOnChange }) => {
161161
value={input.postcode}
162162
type="text"
163163
name="postcode"
164-
classNameName="form-control woo-next-checkout-input"
164+
className="form-control woo-next-checkout-input"
165165
id="post-code"
166166
/>
167167
<Error errors={input.errors} fieldName={'postcode'} />
168168
</div>
169169
{/*Phone & Email*/}
170-
<div classNameName="row">
171-
<div classNameName="p-0 pr-2 col-lg-6 col-md-12">
172-
<div classNameName="form-group">
170+
<div className="row">
171+
<div className="p-0 pr-2 col-lg-6 col-md-12">
172+
<div className="form-group">
173173
<label htmlFor="phone">
174-
Telefon
175-
<abbr classNameName="required" title="required">
174+
Telefon
175+
<abbr className="required" title="required">
176176
*
177177
</abbr>
178178
</label>
@@ -181,17 +181,17 @@ const Billing = ({ input, handleOnChange }) => {
181181
value={input.phone}
182182
type="text"
183183
name="phone"
184-
classNameName="form-control woo-next-checkout-input"
184+
className="form-control woo-next-checkout-input"
185185
id="phone"
186186
/>
187187
<Error errors={input.errors} fieldName={'phone'} />
188188
</div>
189189
</div>
190-
<div classNameName="p-0 col-lg-6 col-sm-12">
191-
<div classNameName="form-group">
190+
<div className="p-0 col-lg-6 col-sm-12">
191+
<div className="form-group">
192192
<label htmlFor="email">
193193
Epost
194-
<abbr classNameName="required" title="required">
194+
<abbr className="required" title="required">
195195
*
196196
</abbr>
197197
</label>
@@ -200,83 +200,22 @@ const Billing = ({ input, handleOnChange }) => {
200200
value={input.email}
201201
type="email"
202202
name="email"
203-
classNameName="form-control woo-next-checkout-input"
203+
className="form-control woo-next-checkout-input"
204204
id="email"
205205
/>
206206
<Error errors={input.errors} fieldName={'email'} />
207207
</div>
208208
</div>
209209
</div>
210-
<br/>
211-
212-
213-
214-
215-
216-
217-
218-
<div className="w-full max-w-lg">
219-
<div className="flex flex-wrap mb-6 -mx-3">
220-
<div className="w-full px-3 mb-6 md:w-1/2 md:mb-0">
221-
<label className="block mb-2 text-xs font-bold tracking-wide text-gray-700 uppercase" for="grid-first-name">
222-
First Name
223-
</label>
224-
<input className="block w-full px-4 py-3 mb-3 leading-tight text-gray-700 bg-gray-200 border border-red-500 rounded appearance-none focus:outline-none focus:bg-white" id="grid-first-name" type="text" placeholder="Jane" />
225-
<p className="text-xs italic text-red-500">Please fill out this field.</p>
226-
</div>
227-
<div className="w-full px-3 md:w-1/2">
228-
<label className="block mb-2 text-xs font-bold tracking-wide text-gray-700 uppercase" for="grid-last-name">
229-
Last Name
230-
</label>
231-
<input className="block w-full px-4 py-3 leading-tight text-gray-700 bg-gray-200 border border-gray-200 rounded appearance-none focus:outline-none focus:bg-white focus:border-gray-500" id="grid-last-name" type="text" placeholder="Doe" />
232-
</div>
233-
</div>
234-
<div className="flex flex-wrap mb-6 -mx-3">
235-
<div className="w-full px-3">
236-
<label className="block mb-2 text-xs font-bold tracking-wide text-gray-700 uppercase" for="grid-password">
237-
Password
238-
</label>
239-
<input className="block w-full px-4 py-3 mb-3 leading-tight text-gray-700 bg-gray-200 border border-gray-200 rounded appearance-none focus:outline-none focus:bg-white focus:border-gray-500" id="grid-password" type="password" placeholder="******************" />
240-
<p className="text-xs italic text-gray-600">Make it as long and as crazy as you'd like</p>
241-
</div>
242-
</div>
243-
<div className="flex flex-wrap mb-2 -mx-3">
244-
<div className="w-full px-3 mb-6 md:w-1/3 md:mb-0">
245-
<label className="block mb-2 text-xs font-bold tracking-wide text-gray-700 uppercase" for="grid-city">
246-
City
247-
</label>
248-
<input className="block w-full px-4 py-3 leading-tight text-gray-700 bg-gray-200 border border-gray-200 rounded appearance-none focus:outline-none focus:bg-white focus:border-gray-500" id="grid-city" type="text" placeholder="Albuquerque" />
249-
</div>
250-
<div className="w-full px-3 mb-6 md:w-1/3 md:mb-0">
251-
<label className="block mb-2 text-xs font-bold tracking-wide text-gray-700 uppercase" for="grid-state">
252-
State
253-
</label>
254-
<div className="relative">
255-
<select className="block w-full px-4 py-3 pr-8 leading-tight text-gray-700 bg-gray-200 border border-gray-200 rounded appearance-none focus:outline-none focus:bg-white focus:border-gray-500" id="grid-state">
256-
<option>New Mexico</option>
257-
<option>Missouri</option>
258-
<option>Texas</option>
259-
</select>
260-
<div className="absolute inset-y-0 right-0 flex items-center px-2 text-gray-700 pointer-events-none">
261-
<svg className="w-4 h-4 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z"/></svg>
262-
</div>
263-
</div>
264-
</div>
265-
<div className="w-full px-3 mb-6 md:w-1/3 md:mb-0">
266-
<label className="block mb-2 text-xs font-bold tracking-wide text-gray-700 uppercase" for="grid-zip">
267-
Zip
268-
</label>
269-
<input className="block w-full px-4 py-3 leading-tight text-gray-700 bg-gray-200 border border-gray-200 rounded appearance-none focus:outline-none focus:bg-white focus:border-gray-500" id="grid-zip" type="text" placeholder="90210" />
270-
</div>
271-
</div>
272-
</div>
273-
274-
275-
276210

211+
<br />
277212

213+
{ // https://tailwindcss.com/components/forms/#
214+
}
278215

216+
279217

218+
280219
</>
281220
);
282221
};

‎components/Checkout/CheckoutForm.component.jsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -93,7 +93,7 @@ const CheckoutForm = () => {
9393
return (
9494
<>
9595
{cart ? (
96-
<form onSubmit={handleFormSubmit} className="w-full max-w-lg">
96+
<form onSubmit={handleFormSubmit} className="">
9797
<div className="">
9898
{/*Payment Details*/}
9999
<div className="">

0 commit comments

Comments
 (0)