Skip to content

Commit ef7ed2e

Browse files
bncummingsbncummings
committed
fix: added structure to each of the other tabs
1 parent 80a1ae0 commit ef7ed2e

File tree

3 files changed

+341
-224
lines changed

3 files changed

+341
-224
lines changed

‎src/components/tabs/BrandTabContent.tsx‎

Lines changed: 121 additions & 85 deletions
Original file line numberDiff line numberDiff line change
@@ -23,110 +23,146 @@ const BrandTabContent: React.FC<BrandTabContentProps> = ({
2323
calculateBrandStats,
2424
}) => {
2525
return (
26-
<div className="w-full flex flex-col opacity-0 animate-fade-in" style={{ animationDelay: '0.05s' }}>
26+
<div className="w-full flex flex-col items-center opacity-0 animate-fade-in px-1" style={{ animationDelay: '0.05s' }}>
2727
<h2
28-
className="text-lg font-bold mb-4 self-start"
28+
className="text-lg font-bold mb-2 self-start"
2929
style={{ color: colours.text.primary }}
3030
>
3131
Brand Performance
3232
</h2>
33-
<div className="flex items-center gap-6">
34-
{/* Brand Score Circle - Smaller and on the left */}
35-
<div className="flex flex-col items-center">
36-
<span className="relative inline-block w-16 h-16 align-middle">
37-
<svg width="64" height="64" viewBox="0 0 64 64" className="absolute top-0 left-0" style={{ zIndex: 1 }}>
38-
<circle
39-
cx="32" cy="32" r="28"
40-
fill="none"
41-
stroke={colours.chart.primary}
42-
strokeWidth="6"
43-
strokeDasharray={Math.PI * 2 * 28}
44-
strokeDashoffset={Math.PI * 2 * 28 * (1 - (animatedBrand / 5))}
45-
strokeLinecap="round"
46-
style={{
47-
transition: 'stroke-dashoffset 0.7s cubic-bezier(0.4,0,0.2,1)',
48-
transform: 'rotate(-90deg)',
49-
transformOrigin: 'center center',
50-
}}
51-
/>
52-
</svg>
53-
<div className="absolute inset-0 flex flex-col items-center justify-center">
54-
<span className="text-2xl">🏢</span>
55-
<span
56-
className="text-lg font-bold"
57-
style={{ color: colours.text.primary }}
58-
>
59-
{animatedBrand}
33+
{/* Brand Score Card */}
34+
<div
35+
className="w-full p-3 sm:p-4 rounded-xl border-2 mb-4"
36+
style={{
37+
backgroundColor: '#f1f5fb', // baby blue
38+
borderColor: colours.content.border
39+
}}
40+
>
41+
<div className="flex items-center justify-between gap-3">
42+
<div className="flex flex-col flex-1 min-w-0">
43+
<span
44+
className="text-lg font-medium"
45+
style={{ color: colours.text.primary }}
46+
>
47+
Brand Score
48+
</span>
49+
<span
50+
className="text-[10px]"
51+
style={{ color: colours.text.muted }}
52+
>
53+
Overall brand performance rating
54+
</span>
55+
</div>
56+
<div className="flex-shrink-0">
57+
<div
58+
className="relative w-16 h-16 rounded-full border-2 border-dashed flex items-center justify-center"
59+
style={{
60+
borderColor: colours.chart.primary,
61+
backgroundColor: colours.chart.primary + '20', // 20% opacity
62+
}}
63+
>
64+
<span className="relative inline-block w-12 h-12 align-middle">
65+
<svg width="48" height="48" viewBox="0 0 48 48" className="absolute top-0 left-0" style={{ zIndex: 1 }}>
66+
<circle
67+
cx="24" cy="24" r="18"
68+
fill="none"
69+
stroke={colours.chart.primary}
70+
strokeWidth="3"
71+
strokeDasharray={Math.PI * 2 * 18}
72+
strokeDashoffset={Math.PI * 2 * 18 * (1 - (animatedBrand / 5))}
73+
strokeLinecap="round"
74+
style={{
75+
transition: 'stroke-dashoffset 0.7s cubic-bezier(0.4,0,0.2,1), stroke 0.7s cubic-bezier(0.4,0,0.2,1)',
76+
transform: 'rotate(-90deg)',
77+
transformOrigin: 'center center',
78+
}}
79+
/>
80+
</svg>
81+
<div className="absolute inset-0 flex flex-col items-center justify-center">
82+
<span className="text-lg">🏢</span>
83+
<span
84+
className="text-xs font-bold"
85+
style={{ color: colours.chart.primary }}
86+
>
87+
{animatedBrand}
88+
</span>
89+
</div>
6090
</span>
6191
</div>
62-
</span>
63-
<span
64-
className="text-xs font-medium mt-1 text-center"
65-
style={{ color: colours.text.secondary }}
66-
>
67-
Brand Score
68-
</span>
92+
</div>
6993
</div>
94+
</div>
7095

71-
{/* Brand Stats Bar Graph - On the right */}
72-
<div className="flex-1">
73-
<div
74-
className="text-sm font-medium mb-3"
75-
style={{ color: colours.text.primary }}
76-
>
77-
Average Performance
96+
{/* Brand Performance Card */}
97+
<div
98+
className="w-full p-3 sm:p-4 rounded-xl border-2"
99+
style={{
100+
backgroundColor: '#f1f5fb', // baby blue
101+
borderColor: colours.content.border
102+
}}
103+
>
104+
<div className="w-full min-w-0">
105+
<div className="flex items-baseline gap-2 mb-3">
106+
<span
107+
className="text-lg font-medium"
108+
style={{ color: colours.text.primary }}
109+
>
110+
Performance Metrics
111+
</span>
78112
</div>
79-
<div className="space-y-3">
80-
{calculateBrandStats ? [
81-
{ label: 'Price', value: calculateBrandStats.price, color: '#ECCC36' }, // colourMap.yellow for price
82-
{ label: 'Quality', value: calculateBrandStats.quality, color: '#D24330' }, // colourMap.red for quality
83-
{ label: 'Nutrition', value: calculateBrandStats.nutrition, color: '#3b82f6' }, // blue for nutrition
84-
{ label: 'Sustainability', value: calculateBrandStats.sustainability, color: '#309563' } // colourMap.green for sustainability
85-
].map((stat, index) => (
86-
<div key={stat.label} className="flex items-center gap-3">
87-
<span
88-
className="text-xs font-medium w-20 text-right"
89-
style={{ color: colours.text.secondary }}
90-
>
91-
{stat.label}
92-
</span>
93-
<div className="flex-1 max-w-24">
94-
<div
95-
className="flex items-center h-4 rounded-full overflow-hidden"
96-
style={{ backgroundColor: colours.content.surfaceSecondary }}
97-
>
98-
<div
99-
className="h-full rounded-full transition-all duration-1000 ease-out opacity-0 animate-fade-in"
100-
style={{
101-
width: `${(stat.value / 5) * 100}%`,
102-
backgroundColor: stat.color,
103-
animationDelay: `${0.3 + index * 0.1}s`
104-
}}
105-
/>
113+
{calculateBrandStats ? (
114+
<div className="w-full">
115+
<div className="space-y-3">
116+
{[
117+
{ label: 'Price', value: calculateBrandStats.price, color: '#ECCC36' },
118+
{ label: 'Quality', value: calculateBrandStats.quality, color: '#D24330' },
119+
{ label: 'Nutrition', value: calculateBrandStats.nutrition, color: '#3b82f6' },
120+
{ label: 'Sustainability', value: calculateBrandStats.sustainability, color: '#309563' }
121+
].map((stat, index) => (
122+
<div key={stat.label} className="flex items-center gap-3">
123+
<span
124+
className="text-xs font-medium w-20 text-right"
125+
style={{ color: colours.text.secondary }}
126+
>
127+
{stat.label}
128+
</span>
129+
<div className="flex-1 max-w-24">
130+
<div
131+
className="flex items-center h-4 rounded-full overflow-hidden"
132+
style={{ backgroundColor: colours.content.surfaceSecondary }}
133+
>
134+
<div
135+
className="h-full rounded-full transition-all duration-1000 ease-out opacity-0 animate-fade-in"
136+
style={{
137+
width: `${(stat.value / 5) * 100}%`,
138+
backgroundColor: stat.color,
139+
animationDelay: `${0.3 + index * 0.1}s`
140+
}}
141+
/>
142+
</div>
143+
</div>
144+
<span
145+
className="text-xs font-medium w-8"
146+
style={{ color: colours.text.primary }}
147+
>
148+
{stat.value.toFixed(1)}
149+
</span>
106150
</div>
107-
</div>
108-
<span
109-
className="text-xs font-medium w-8"
110-
style={{ color: colours.text.primary }}
111-
>
112-
{stat.value.toFixed(1)}
113-
</span>
151+
))}
114152
</div>
115-
)) : (
116153
<div
117-
className="text-sm text-center py-4"
154+
className="text-xs mt-3 text-center"
118155
style={{ color: colours.text.secondary }}
119156
>
120-
Not enough brand data available
157+
Based on {calculateBrandStats.productCount} products
121158
</div>
122-
)}
123-
</div>
124-
{calculateBrandStats && (
159+
</div>
160+
) : (
125161
<div
126-
className="text-xs mt-3 text-center"
162+
className="text-sm text-center py-4"
127163
style={{ color: colours.text.secondary }}
128164
>
129-
Based on {calculateBrandStats.productCount} products
165+
Not enough brand data available
130166
</div>
131167
)}
132168
</div>

0 commit comments

Comments
 (0)