Skip to content

Commit 120a6af

Browse files
ajay-dhangarajay-dhangar
committed
modify components with tailwind css
1 parent e39c26a commit 120a6af

File tree

9 files changed

+519
-737
lines changed

9 files changed

+519
-737
lines changed

‎src/components/Aboutpage/chart.tsx‎

Lines changed: 145 additions & 172 deletions
Original file line numberDiff line numberDiff line change
@@ -3,198 +3,171 @@ import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, Cell, Legend, Resp
33

44
const data = [
55
{ name: 'Community', team: 80 },
6-
{ name: 'Courses', team: 78 },
7-
{ name: 'Tutorials', team: 70 },
8-
{ name: 'Problems', team: 67 },
9-
{ name: 'Solutions', team: 65 }
6+
{ name: 'Courses', team: 78 },
7+
{ name: 'Tutorials', team: 70 },
8+
{ name: 'Problems', team: 67 },
9+
{ name: 'Solutions', team: 65 }
1010
];
1111

1212
const colors = [
13-
'rgba(239,216,29,0.9)',
14-
'rgba(49,105,148,0.9)',
15-
'rgba(234,140,16,0.9)',
16-
'rgba(42,1,100,0.9)',
17-
'rgba(115,119,173,0.9)'
13+
'rgba(239,216,29,0.9)',
14+
'rgba(49,105,148,0.9)',
15+
'rgba(234,140,16,0.9)',
16+
'rgba(42,1,100,0.9)',
17+
'rgba(115,119,173,0.9)'
1818
];
1919

20-
const CustomTooltip = ({ active, payload, label }) => {
21-
if (active && payload && payload.length) {
22-
return (
23-
<div className="custom-tooltip">
24-
<p className="label" style={{ fontWeight: "600", fontFamily: "monospace", fontSize: "0.9rem", color: "rgb(51, 212, 91)" }}>{label}</p>
25-
</div>
26-
);
27-
}
28-
return null;
20+
import { TooltipProps } from 'recharts';
21+
22+
const CustomTooltip: React.FC<TooltipProps<number, string>> = ({ active, payload, label }) => {
23+
if (active && payload && payload.length) {
24+
return (
25+
<div className="custom-tooltip bg-black p-2 rounded text-white">
26+
<p className="label font-bold text-sm text-green-500">{label}</p>
27+
</div>
28+
);
29+
}
30+
return null;
2931
};
3032

3133
const Community: React.FC = () => {
3234
return (
33-
<ResponsiveContainer width="100%" height={120}>
34-
<BarChart
35-
data={[{name: 'Community', Community: 80}]}
36-
layout="vertical"
37-
margin={{
38-
top: 20,
39-
right: 5,
40-
left: 30,
41-
bottom: 5,
42-
}}
43-
>
44-
<CartesianGrid strokeDasharray="3 3" />
45-
<XAxis type="number" />
46-
<YAxis dataKey="name" type="category" />
47-
<Tooltip contentStyle={{ backgroundColor: 'black', color: 'white' }}
48-
itemStyle={{ color: colors[0] }} />
49-
<Legend />
50-
<Bar dataKey="Community" fill="rgba(239,216,29,0.9)">
51-
{data.map((entry, index) => (
52-
<Cell key={`cell-${index}`} fill={colors[index]} />
53-
))}
54-
</Bar>
55-
</BarChart>
56-
</ResponsiveContainer>
35+
<ResponsiveContainer width="100%" height={120}>
36+
<BarChart
37+
data={[{ name: 'Community', Community: 80 }]}
38+
layout="vertical"
39+
margin={{ top: 20, right: 5, left: 30, bottom: 5 }}
40+
>
41+
<CartesianGrid strokeDasharray="3 3" />
42+
<XAxis type="number" />
43+
<YAxis dataKey="name" type="category" />
44+
<Tooltip contentStyle={{ backgroundColor: 'black', color: 'white' }} itemStyle={{ color: colors[0] }} />
45+
<Legend />
46+
<Bar dataKey="Community" fill="rgba(239,216,29,0.9)">
47+
{data.map((entry, index) => (
48+
<Cell key={`cell-${index}`} fill={colors[index]} />
49+
))}
50+
</Bar>
51+
</BarChart>
52+
</ResponsiveContainer>
5753
);
58-
};
54+
};
5955

60-
const Courses: React.FC = () => {
56+
const Courses: React.FC = () => {
6157
return (
62-
<ResponsiveContainer width="100%" height={120}>
63-
<BarChart
64-
data={[{name: 'Courses', Courses: 78}]}
65-
layout="vertical"
66-
margin={{
67-
top: 20,
68-
right: 5,
69-
left: 30,
70-
bottom: 5,
71-
}}
72-
>
73-
<CartesianGrid strokeDasharray="3 3" />
74-
<XAxis type="number" />
75-
<YAxis dataKey="name" type="category" />
76-
<Tooltip contentStyle={{ backgroundColor: 'black', color: 'white' }}
77-
itemStyle={{ color: colors[1] }} />
78-
<Legend />
79-
<Bar dataKey="Courses" fill={colors[1]}>
80-
{data.map((entry, index) => (
81-
<Cell key={`cell-${index}`} fill={colors[1]} />
82-
))}
83-
</Bar>
84-
</BarChart>
85-
</ResponsiveContainer>
58+
<ResponsiveContainer width="100%" height={120}>
59+
<BarChart
60+
data={[{ name: 'Courses', Courses: 78 }]}
61+
layout="vertical"
62+
margin={{ top: 20, right: 5, left: 30, bottom: 5 }}
63+
>
64+
<CartesianGrid strokeDasharray="3 3" />
65+
<XAxis type="number" />
66+
<YAxis dataKey="name" type="category" />
67+
<Tooltip contentStyle={{ backgroundColor: 'black', color: 'white' }} itemStyle={{ color: colors[1] }} />
68+
<Legend />
69+
<Bar dataKey="Courses" fill={colors[1]}>
70+
{data.map((entry, index) => (
71+
<Cell key={`cell-${index}`} fill={colors[1]} />
72+
))}
73+
</Bar>
74+
</BarChart>
75+
</ResponsiveContainer>
8676
);
87-
};
77+
};
8878

89-
const Tutorials: React.FC = () => {
79+
const Tutorials: React.FC = () => {
9080
return (
91-
<ResponsiveContainer width="100%" height={120}>
92-
<BarChart
93-
data={[{name: 'Tutorials', Tutorials: 70}]}
94-
layout="vertical"
95-
margin={{
96-
top: 20,
97-
right: 5,
98-
left: 30,
99-
bottom: 5,
100-
}}
101-
>
102-
<CartesianGrid strokeDasharray="3 3" />
103-
<XAxis type="number" />
104-
<YAxis dataKey="name" type="category" />
105-
<Tooltip contentStyle={{ backgroundColor: 'black', color: 'white' }}
106-
itemStyle={{ color: colors[2] }} />
107-
<Legend />
108-
<Bar dataKey="Tutorials" fill={colors[2]}>
109-
{data.map((entry, index) => (
110-
<Cell key={`cell-${index}`} fill={colors[2]} />
111-
))}
112-
</Bar>
113-
</BarChart>
114-
</ResponsiveContainer>
81+
<ResponsiveContainer width="100%" height={120}>
82+
<BarChart
83+
data={[{ name: 'Tutorials', Tutorials: 70 }]}
84+
layout="vertical"
85+
margin={{ top: 20, right: 5, left: 30, bottom: 5 }}
86+
>
87+
<CartesianGrid strokeDasharray="3 3" />
88+
<XAxis type="number" />
89+
<YAxis dataKey="name" type="category" />
90+
<Tooltip contentStyle={{ backgroundColor: 'black', color: 'white' }} itemStyle={{ color: colors[2] }} />
91+
<Legend />
92+
<Bar dataKey="Tutorials" fill={colors[2]}>
93+
{data.map((entry, index) => (
94+
<Cell key={`cell-${index}`} fill={colors[2]} />
95+
))}
96+
</Bar>
97+
</BarChart>
98+
</ResponsiveContainer>
11599
);
116-
};
117-
const Problems: React.FC = () => {
100+
};
101+
102+
const Problems: React.FC = () => {
118103
return (
119-
<ResponsiveContainer width="100%" height={120}>
120-
<BarChart
121-
data={[{name: 'Problems', Problems: 67}]}
122-
layout="vertical"
123-
margin={{
124-
top: 20,
125-
right: 5,
126-
left: 30,
127-
bottom: 5,
128-
}}
129-
>
130-
<CartesianGrid strokeDasharray="3 3" />
131-
<XAxis type="number" />
132-
<YAxis dataKey="name" type="category" />
133-
<Tooltip contentStyle={{ backgroundColor: 'black', color: 'white' }}
134-
itemStyle={{ color: colors[3] }} />
135-
<Legend />
136-
<Bar dataKey="Problems" fill={colors[3]}>
137-
{data.map((entry, index) => (
138-
<Cell key={`cell-${index}`} fill={colors[3]} />
139-
))}
140-
</Bar>
141-
</BarChart>
142-
</ResponsiveContainer>
104+
<ResponsiveContainer width="100%" height={120}>
105+
<BarChart
106+
data={[{ name: 'Problems', Problems: 67 }]}
107+
layout="vertical"
108+
margin={{ top: 20, right: 5, left: 30, bottom: 5 }}
109+
>
110+
<CartesianGrid strokeDasharray="3 3" />
111+
<XAxis type="number" />
112+
<YAxis dataKey="name" type="category" />
113+
<Tooltip contentStyle={{ backgroundColor: 'black', color: 'white' }} itemStyle={{ color: colors[3] }} />
114+
<Legend />
115+
<Bar dataKey="Problems" fill={colors[3]}>
116+
{data.map((entry, index) => (
117+
<Cell key={`cell-${index}`} fill={colors[3]} />
118+
))}
119+
</Bar>
120+
</BarChart>
121+
</ResponsiveContainer>
143122
);
144-
};
145-
const Solutions: React.FC = () => {
123+
};
124+
125+
const Solutions: React.FC = () => {
146126
return (
147-
<ResponsiveContainer width="100%" height={120}>
148-
<BarChart
149-
data={[{name: 'Solutions', Solutions: 65}]}
150-
layout="vertical"
151-
margin={{
152-
top: 20,
153-
right: 5,
154-
left: 30,
155-
bottom: 5,
156-
}}
157-
>
158-
<CartesianGrid strokeDasharray="3 3" />
159-
<XAxis type="number" />
160-
<YAxis dataKey="name" type="category" />
161-
<Tooltip contentStyle={{ backgroundColor: 'black', color: 'white' }}
162-
itemStyle={{ color: colors[4] }} />
163-
<Legend />
164-
<Bar dataKey="Solutions" fill={colors[4]}>
165-
{data.map((entry, index) => (
166-
<Cell key={`cell-${index}`} fill={colors[4]} />
167-
))}
168-
</Bar>
169-
</BarChart>
170-
</ResponsiveContainer>
127+
<ResponsiveContainer width="100%" height={120}>
128+
<BarChart
129+
data={[{ name: 'Solutions', Solutions: 65 }]}
130+
layout="vertical"
131+
margin={{ top: 20, right: 5, left: 30, bottom: 5 }}
132+
>
133+
<CartesianGrid strokeDasharray="3 3" />
134+
<XAxis type="number" />
135+
<YAxis dataKey="name" type="category" />
136+
<Tooltip contentStyle={{ backgroundColor: 'black', color: 'white' }} itemStyle={{ color: colors[4] }} />
137+
<Legend />
138+
<Bar dataKey="Solutions" fill={colors[4]}>
139+
{data.map((entry, index) => (
140+
<Cell key={`cell-${index}`} fill={colors[4]} />
141+
))}
142+
</Bar>
143+
</BarChart>
144+
</ResponsiveContainer>
171145
);
172-
};
146+
};
147+
173148
const Chart: React.FC = () => {
174-
return (
175-
<>
176-
<h2 style={{margin:"1rem",color:"transparent"}}>Join our Dynamic team to learn and success of our .</h2>
177-
<ResponsiveContainer width="100%" height={400}>
178-
<BarChart
179-
data={data}
180-
margin={{
181-
top: 20, right: 30, left: 20, bottom: 5,
182-
}}
183-
>
184-
<CartesianGrid strokeDasharray="3 3" />
185-
<XAxis dataKey="name" />
186-
<YAxis />
187-
<Tooltip content={<CustomTooltip />} />
188-
<Legend />
189-
<Bar dataKey="team" fill='rgb(51, 212, 91)'>
190-
{data.map((entry, index) => (
191-
<Cell key={`cell-${index}`} fill={colors[index]} />
192-
))}
193-
</Bar>
194-
</BarChart>
195-
</ResponsiveContainer>
196-
</>
197-
);
149+
return (
150+
<>
151+
<h2 className="text-transparent mt-4">Join our Dynamic team to learn and succeed.</h2>
152+
<ResponsiveContainer width="100%" height={400}>
153+
<BarChart
154+
data={data}
155+
margin={{ top: 20, right: 30, left: 20, bottom: 5 }}
156+
>
157+
<CartesianGrid strokeDasharray="3 3" />
158+
<XAxis dataKey="name" />
159+
<YAxis />
160+
<Tooltip content={<CustomTooltip />} />
161+
<Legend />
162+
<Bar dataKey="team" fill="rgb(51, 212, 91)">
163+
{data.map((entry, index) => (
164+
<Cell key={`cell-${index}`} fill={colors[index]} />
165+
))}
166+
</Bar>
167+
</BarChart>
168+
</ResponsiveContainer>
169+
</>
170+
);
198171
};
199172

200-
export { Chart,Community,Courses,Tutorials,Problems,Solutions};
173+
export { Chart, Community, Courses, Tutorials, Problems, Solutions };

0 commit comments

Comments
 (0)