Skip to content

Commit 9dcdfc9

Browse files
mticklemtickle
committed
Refactor code structure for improved readability and maintainability
1 parent 4d9f0a8 commit 9dcdfc9

4 files changed

Lines changed: 26 additions & 123 deletions

File tree

‎public/images/hope_pro.png‎

269 KB
Loading

‎public/images/love_pro.png‎

162 KB
Loading

‎public/images/praise_pro.png‎

313 KB
Loading

‎src/components/Columns.jsx‎

Lines changed: 26 additions & 123 deletions
Original file line numberDiff line numberDiff line change
@@ -1,137 +1,40 @@
1-
21
export default function Columns() {
3-
const quadrants = [
4-
{
5-
name: "Praise",
6-
movement: "Gathering",
7-
message: "The Awe",
8-
color: "border-t-blue-300",
9-
icon: (
10-
<svg className="w-8 h-8 text-blue-400" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" viewBox="0 0 24 24">
11-
<path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path>
12-
<circle cx="9" cy="7" r="4"></circle>
13-
<path d="M23 21v-2a4 4 0 0 0-3-3.87"></path>
14-
<path d="M16 3.13a4 4 0 0 1 0 7.75"></path>
15-
</svg>
16-
),
17-
illustration: (
18-
<svg viewBox="0 0 100 40" className="w-full h-auto mt-auto opacity-80" preserveAspectRatio="xMidYMax meet">
19-
{/* People gathering / standing together */}
20-
<circle cx="30" cy="15" r="4" className="fill-slate-200" />
21-
<path d="M20 40 Q 30 20 40 40" className="fill-slate-200" />
22-
<circle cx="50" cy="12" r="5" className="fill-slate-300" />
23-
<path d="M35 40 Q 50 15 65 40" className="fill-slate-300" />
24-
<circle cx="70" cy="18" r="4" className="fill-slate-200" />
25-
<path d="M60 40 Q 70 25 80 40" className="fill-slate-200" />
26-
</svg>
27-
)
28-
},
29-
{
30-
name: "Faith",
31-
movement: "Word",
32-
message: "The Story of God",
33-
color: "border-t-blue-500",
34-
icon: (
35-
<svg className="w-8 h-8 text-blue-500" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" viewBox="0 0 24 24">
36-
<path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"></path>
37-
<path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"></path>
38-
</svg>
39-
),
40-
illustration: (
41-
<svg viewBox="0 0 100 40" className="w-full h-auto mt-auto opacity-80" preserveAspectRatio="xMidYMax meet">
42-
{/* One person teaching, others sitting/listening */}
43-
<circle cx="20" cy="10" r="4" className="fill-slate-300" />
44-
<path d="M12 40 Q 20 18 28 40" className="fill-slate-300" />
45-
<circle cx="60" cy="22" r="3.5" className="fill-slate-200" />
46-
<path d="M52 40 Q 60 28 68 40" className="fill-slate-200" />
47-
<circle cx="80" cy="22" r="3.5" className="fill-slate-200" />
48-
<path d="M72 40 Q 80 28 88 40" className="fill-slate-200" />
49-
</svg>
50-
)
51-
},
52-
{
53-
name: "Love",
54-
movement: "Table",
55-
message: "The Gospel & Sacrifice",
56-
color: "border-t-blue-700",
57-
icon: (
58-
<svg className="w-8 h-8 text-blue-600" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" viewBox="0 0 24 24">
59-
<path d="M17 8h1a4 4 0 1 1 0 8h-1"></path>
60-
<path d="M3 8h14v9a4 4 0 0 1-4 4H7a4 4 0 0 1-4-4Z"></path>
61-
<line x1="6" y1="2" x2="6" y2="4"></line>
62-
<line x1="10" y1="2" x2="10" y2="4"></line>
63-
<line x1="14" y1="2" x2="14" y2="4"></line>
64-
</svg>
65-
),
66-
illustration: (
67-
<svg viewBox="0 0 100 40" className="w-full h-auto mt-auto opacity-80" preserveAspectRatio="xMidYMax meet">
68-
{/* People sitting around a table */}
69-
<circle cx="25" cy="18" r="4" className="fill-slate-200" />
70-
<path d="M15 40 Q 25 25 35 40" className="fill-slate-200" />
71-
<circle cx="75" cy="18" r="4" className="fill-slate-200" />
72-
<path d="M65 40 Q 75 25 85 40" className="fill-slate-200" />
73-
<rect x="30" y="30" width="40" height="10" className="fill-slate-300" />
74-
</svg>
75-
)
76-
},
77-
{
78-
name: "Hope",
79-
movement: "Sending",
80-
message: "The Confession",
81-
color: "border-t-blue-900",
82-
icon: (
83-
<svg className="w-8 h-8 text-blue-800" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" viewBox="0 0 24 24">
84-
<line x1="22" y1="2" x2="11" y2="13"></line>
85-
<polygon points="22 2 15 22 11 13 2 9 22 2"></polygon>
86-
</svg>
87-
),
88-
illustration: (
89-
<svg viewBox="0 0 100 40" className="w-full h-auto mt-auto opacity-80" preserveAspectRatio="xMidYMax meet">
90-
{/* People walking outward (to the right) */}
91-
<circle cx="25" cy="16" r="4" className="fill-slate-200" />
92-
<path d="M12 40 L 22 22 L 28 22 L 30 40 Z" className="fill-slate-200" />
93-
<circle cx="50" cy="12" r="4.5" className="fill-slate-300" />
94-
<path d="M35 40 L 47 18 L 53 18 L 57 40 Z" className="fill-slate-300" />
95-
<circle cx="75" cy="18" r="3.5" className="fill-slate-200" />
96-
<path d="M63 40 L 73 24 L 77 24 L 83 40 Z" className="fill-slate-200" />
97-
</svg>
98-
)
99-
},
2+
const columns = [
3+
{ name: "Praise", movement: "Gathering", message: "The Awe", color: "border-t-blue-300", imagePath: "/quadrants/images/praise_pro.png" },
4+
{ name: "Faith", movement: "Word", message: "The Story of God", color: "border-t-blue-500", imagePath: "/quadrants/images/word.png" },
5+
{ name: "Love", movement: "Table", message: "The Gospel & Sacrifice", color: "border-t-blue-700", imagePath: "/quadrants/images/love_pro.png" },
6+
{ name: "Hope", movement: "Sending", message: "The Confession", color: "border-t-blue-900", imagePath: "/quadrants/images/hope_pro.png" },
1007
];
1018

1029
return (
103-
<div className="flex gap-6 p-4 lg:p-8 bg-slate-50 min-h-screen">
104-
{/* 4-Column Workbench */}
105-
<div className="w-full grid grid-cols-1 lg:grid-cols-4 gap-6">
106-
{quadrants.map((q) => (
107-
<div
108-
key={q.name}
109-
className={`bg-white rounded-2xl shadow-sm border-t-4 ${q.color} flex flex-col min-h-[400px] overflow-hidden`}
110-
>
111-
{/* Header Area with Icon */}
112-
<div className="p-6 border-b border-slate-100 flex items-center gap-4">
113-
<div className="p-3 bg-slate-50 rounded-xl">
114-
{q.icon}
115-
</div>
116-
<div>
117-
<h2 className="text-2xl font-black text-slate-800 tracking-tight">{q.name}</h2>
118-
<p className="text-xs font-bold text-slate-400 uppercase tracking-widest">{q.movement}</p>
119-
</div>
10+
<div className="flex gap-6 p-8 bg-slate-50 min-h-screen">
11+
<div className="w-full grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
12+
{columns.map((q) => (
13+
<div key={q.name} className={`bg-white rounded-2xl shadow-sm border-t-4 ${q.color} flex flex-col min-h-[500px]`}>
14+
15+
{/* Header Section */}
16+
<div className="p-6 border-b border-slate-100">
17+
<h2 className="text-2xl font-black text-slate-800 tracking-tight">{q.name}</h2>
18+
<p className="text-xs font-bold text-slate-400 uppercase tracking-widest">{q.movement}</p>
12019
</div>
12120

122-
{/* Middle Content Area */}
21+
{/* Middle Content: Where the service building happens */}
12322
<div className="p-6 flex-1 flex flex-col">
12423
<p className="text-sm font-bold text-slate-500 mb-4">{q.message}</p>
12524

126-
{/* Empty Drop Zone Placeholder */}
127-
<div className="border-2 border-dashed border-slate-200 rounded-xl flex-1 flex items-center justify-center bg-slate-50/50">
128-
<span className="text-slate-400 text-sm font-medium">Drop songs here</span>
129-
</div>
25+
{/* The "Service Slot" - This will hold your future song components */}
26+
{/* <div className="border-2 border-dashed border-slate-200 rounded-xl flex-1 flex items-center justify-center bg-slate-50/30 hover:bg-slate-50 transition-colors">
27+
<span className="text-slate-400 text-xs uppercase tracking-wider font-semibold">Add Content</span>
28+
</div> */}
13029
</div>
13130

132-
{/* Bottom Illustration Area */}
133-
<div className="w-full mt-auto px-4 pt-4">
134-
{q.illustration}
31+
{/* Bottom Graphic Section */}
32+
<div className="w-full pt-4 flex justify-center bg-slate-50/30 rounded-b-2xl overflow-hidden">
33+
<img
34+
src={q.imagePath}
35+
alt={`${q.movement} illustration`}
36+
className="w-full h-32 object-contain object-bottom transition-transform duration-500"
37+
/>
13538
</div>
13639
</div>
13740
))}

0 commit comments

Comments
 (0)