Skip to content

Commit f92b243

Browse files
freelancerwebrofreelancerwebro
committed
Install tailwindcss and add styling
1 parent 7fa52b2 commit f92b243

12 files changed

+2807
-1145
lines changed

‎package-lock.json

+2,596-960
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+4-1
Original file line numberDiff line numberDiff line change
@@ -43,12 +43,15 @@
4343
},
4444
"devDependencies": {
4545
"@eslint/js": "^9.22.0",
46+
"autoprefixer": "^10.4.20",
4647
"eslint": "^8.57.1",
4748
"eslint-config-prettier": "^10.1.1",
4849
"eslint-plugin-prettier": "^5.2.3",
4950
"eslint-plugin-react": "^7.37.4",
5051
"eslint-plugin-react-hooks": "^5.2.0",
5152
"globals": "^16.0.0",
52-
"prettier": "^3.5.3"
53+
"postcss": "^8.5.3",
54+
"prettier": "^3.5.3",
55+
"tailwindcss": "^3.4.17"
5356
}
5457
}

‎src/App.css

-69
Original file line numberDiff line numberDiff line change
@@ -1,69 +0,0 @@
1-
.App {
2-
text-align: center;
3-
}
4-
5-
.App-logo {
6-
height: 40vmin;
7-
pointer-events: none;
8-
}
9-
10-
@media (prefers-reduced-motion: no-preference) {
11-
.App-logo {
12-
animation: App-logo-spin infinite 20s linear;
13-
}
14-
}
15-
16-
.App-header {
17-
background-color: #282c34;
18-
min-height: 100vh;
19-
display: flex;
20-
flex-direction: column;
21-
align-items: center;
22-
justify-content: center;
23-
font-size: calc(10px + 2vmin);
24-
color: white;
25-
}
26-
27-
.App-link {
28-
color: #61dafb;
29-
}
30-
31-
@keyframes App-logo-spin {
32-
from {
33-
transform: rotate(0deg);
34-
}
35-
to {
36-
transform: rotate(360deg);
37-
}
38-
}
39-
40-
.band-details {
41-
border: 1px solid #ddd;
42-
padding: 20px;
43-
margin-top: 20px;
44-
background-color: #f9f9f9;
45-
border-radius: 8px;
46-
}
47-
48-
.band-details h2 {
49-
color: #333;
50-
}
51-
52-
.band-details .error {
53-
color: red;
54-
}
55-
56-
.band-details button {
57-
background-color: red;
58-
color: white;
59-
border: none;
60-
padding: 5px 10px;
61-
cursor: pointer;
62-
float: right;
63-
margin-left: 10px;
64-
}
65-
66-
.band-details button.band-edit,
67-
.band-details button.band-submit {
68-
background-color: green;
69-
}

‎src/App.js

+14-7
Original file line numberDiff line numberDiff line change
@@ -75,16 +75,23 @@ function App() {
7575
}
7676

7777
return (
78-
<div>
79-
<h1>🎵 Bands Management</h1>
78+
<div className="flex flex-col items-center justify-start min-h-screen text-center pt-10">
79+
<h1 className="text-3xl font-bold text-gray-900 mb-6 flex items-center">
80+
🎵 Bands Management
81+
</h1>
8082

8183
{view === 'list' && (
82-
<div>
83-
<button className="create-band" onClick={openCreateForm}>
84-
Create new band
84+
<div className="flex space-x-4">
85+
<button
86+
className="bg-blue-600 text-white px-4 py-2 rounded-md font-semibold hover:bg-blue-700 transition-all"
87+
onClick={openCreateForm}
88+
>
89+
Create New Band
8590
</button>
86-
&nbsp;&nbsp;
87-
<button className="upload-csv" onClick={openUploadCsvForm}>
91+
<button
92+
className="bg-green-600 text-white px-4 py-2 rounded-md font-semibold hover:bg-green-700 transition-all"
93+
onClick={openUploadCsvForm}
94+
>
8895
Upload CSV
8996
</button>
9097
</div>

‎src/components/BandDetails.js

+49-19
Original file line numberDiff line numberDiff line change
@@ -4,28 +4,58 @@ function BandDetails({ band, onClose, onEdit }) {
44
}
55

66
return (
7-
<div className="band-details">
8-
<h2>Band Details</h2>
7+
<div className="max-w-2xl mx-auto bg-white shadow-lg rounded-lg p-6 border border-gray-300">
8+
<h2 className="text-2xl font-bold text-gray-800 mb-4 text-left">
9+
Band Details
10+
</h2>
11+
912
{band ? (
10-
<div>
11-
<h3>Name: {band.name}</h3>
12-
<p>Origin: {band.origin}</p>
13-
<p>City: {band.city}</p>
14-
<p>Start year: {band.startYear}</p>
15-
<p>Separation year: {band.separationYear}</p>
16-
<p>Members: {band.members}</p>
17-
<p>Musical current: {band.musicalCurrent}</p>
18-
<p>Presentation: {band.presentation}</p>
19-
<button className="band-close" onClick={onClose}>
20-
Close
21-
</button>
22-
&nbsp;&nbsp;
23-
<button className="band-edit" onClick={onEdit}>
24-
Edit
25-
</button>
13+
<div className="space-y-3 text-left">
14+
<h3 className="text-lg font-semibold text-gray-700">
15+
Name: <span className="font-normal text-gray-900">{band.name}</span>
16+
</h3>
17+
<p className="text-gray-700">
18+
<span className="font-semibold">Origin:</span> {band.origin}
19+
</p>
20+
<p className="text-gray-700">
21+
<span className="font-semibold">City:</span> {band.city}
22+
</p>
23+
<p className="text-gray-700">
24+
<span className="font-semibold">Start Year:</span> {band.startYear}
25+
</p>
26+
<p className="text-gray-700">
27+
<span className="font-semibold">Separation Year:</span>{' '}
28+
{band.separationYear || 'N/A'}
29+
</p>
30+
<p className="text-gray-700">
31+
<span className="font-semibold">Members:</span> {band.members}
32+
</p>
33+
<p className="text-gray-700">
34+
<span className="font-semibold">Musical Current:</span>{' '}
35+
{band.musicalCurrent}
36+
</p>
37+
<p className="text-gray-700">
38+
<span className="font-semibold">Presentation:</span>{' '}
39+
{band.presentation}
40+
</p>
41+
42+
<div className="flex space-x-4 mt-6">
43+
<button
44+
className="px-4 py-2 text-sm font-semibold text-white bg-gray-600 rounded-md hover:bg-gray-700 transition-all"
45+
onClick={onClose}
46+
>
47+
Close
48+
</button>
49+
<button
50+
className="px-4 py-2 text-sm font-semibold text-white bg-blue-600 rounded-md hover:bg-blue-700 transition-all"
51+
onClick={onEdit}
52+
>
53+
Edit
54+
</button>
55+
</div>
2656
</div>
2757
) : (
28-
<p>Loading...</p>
58+
<p className="text-gray-500 text-lg italic text-left">Loading...</p>
2959
)}
3060
</div>
3161
)

‎src/components/BandForm.js

+64-39
Original file line numberDiff line numberDiff line change
@@ -36,96 +36,121 @@ function BandForm({ band, onSave, onClose }) {
3636
}
3737

3838
return (
39-
<div className="band-details">
40-
<form onSubmit={handleSubmit}>
41-
<h2>{band ? 'Edit Band' : 'Add Band'}</h2>
42-
<label>
43-
Name:
39+
<div className="max-w-3xl mx-auto bg-white shadow-lg rounded-lg p-6 border border-gray-300">
40+
<form
41+
onSubmit={handleSubmit}
42+
className="grid grid-cols-1 sm:grid-cols-2 gap-6"
43+
>
44+
<h2 className="col-span-1 sm:col-span-2 text-2xl font-bold text-gray-800 mb-4 text-left">
45+
{band ? 'Edit Band' : 'Add Band'}
46+
</h2>
47+
48+
<label className="block">
49+
<span className="font-semibold text-gray-700">Name:</span>
4450
<input
4551
type="text"
4652
name="name"
4753
value={formData.name || ''}
4854
onChange={handleChange}
4955
required
50-
/>{' '}
51-
<br />
56+
className="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500"
57+
/>
5258
</label>
53-
<label>
54-
Origin:
59+
60+
<label className="block">
61+
<span className="font-semibold text-gray-700">Origin:</span>
5562
<input
5663
type="text"
5764
name="origin"
5865
value={formData.origin || ''}
5966
onChange={handleChange}
6067
required
61-
/>{' '}
62-
<br />
68+
className="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500"
69+
/>
6370
</label>
64-
<label>
65-
City:
71+
72+
<label className="block">
73+
<span className="font-semibold text-gray-700">City:</span>
6674
<input
6775
type="text"
6876
name="city"
6977
value={formData.city || ''}
7078
onChange={handleChange}
7179
required
72-
/>{' '}
73-
<br />
80+
className="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500"
81+
/>
7482
</label>
75-
<label>
76-
Start year:
83+
84+
<label className="block">
85+
<span className="font-semibold text-gray-700">Start Year:</span>
7786
<input
7887
type="number"
7988
name="startYear"
8089
value={formData.startYear || ''}
8190
onChange={handleChange}
8291
required
83-
/>{' '}
84-
<br />
92+
className="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500"
93+
/>
8594
</label>
86-
<label>
87-
Separation year:
95+
96+
<label className="block">
97+
<span className="font-semibold text-gray-700">Separation Year:</span>
8898
<input
8999
type="number"
90100
name="separationYear"
91101
value={formData.separationYear || ''}
92102
onChange={handleChange}
93-
/>{' '}
94-
<br />
103+
className="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500"
104+
/>
95105
</label>
96-
<label>
97-
Members:
106+
107+
<label className="block">
108+
<span className="font-semibold text-gray-700">Members:</span>
98109
<input
99110
type="number"
100111
name="members"
101112
value={formData.members || ''}
102113
onChange={handleChange}
103-
/>{' '}
104-
<br />
114+
className="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500"
115+
/>
105116
</label>
106-
<label>
107-
Musical current:
117+
118+
<label className="block">
119+
<span className="font-semibold text-gray-700">Musical Current:</span>
108120
<input
109121
type="text"
110122
name="musicalCurrent"
111123
value={formData.musicalCurrent || ''}
112124
onChange={handleChange}
113-
/>{' '}
114-
<br />
125+
className="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500"
126+
/>
115127
</label>
116-
<label>
117-
Presentation:
128+
129+
<label className="block col-span-1 sm:col-span-2">
130+
<span className="font-semibold text-gray-700">Presentation:</span>
118131
<textarea
119132
name="presentation"
120133
value={formData.presentation || ''}
121134
onChange={handleChange}
122-
/>{' '}
123-
<br />
135+
className="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500"
136+
/>
124137
</label>
125-
<button onClick={onClose}>Close</button> &nbsp;&nbsp;
126-
<button type="submit" className="band-edit">
127-
{band ? 'Update Band' : 'Create Band'}
128-
</button>
138+
139+
<div className="col-span-1 sm:col-span-2 flex justify-between mt-6">
140+
<button
141+
type="button"
142+
onClick={onClose}
143+
className="px-4 py-2 text-sm font-semibold text-white bg-gray-600 rounded-md hover:bg-gray-700 transition-all"
144+
>
145+
Close
146+
</button>
147+
<button
148+
type="submit"
149+
className="px-4 py-2 text-sm font-semibold text-white bg-blue-600 rounded-md hover:bg-blue-700 transition-all"
150+
>
151+
{band ? 'Update Band' : 'Create Band'}
152+
</button>
153+
</div>
129154
</form>
130155
</div>
131156
)

0 commit comments

Comments
 (0)