refactor: Improve code formatting and structure in LeadershipSection component
This commit is contained in:
@@ -1,125 +1,161 @@
|
|||||||
import { Users } from 'lucide-react';
|
import { Users } from "lucide-react";
|
||||||
import { useTheme } from '../contexts/ThemeContext';
|
import { useTheme } from "../contexts/ThemeContext";
|
||||||
|
|
||||||
interface LeadershipSectionProps {
|
interface LeadershipSectionProps {
|
||||||
isOutOfCollege?: boolean;
|
isOutOfCollege?: boolean;
|
||||||
}
|
}
|
||||||
|
|
||||||
const LeadershipSection: React.FC<LeadershipSectionProps> = ({ isOutOfCollege = false }) => {
|
const LeadershipSection: React.FC<LeadershipSectionProps> = ({
|
||||||
const { theme } = useTheme();
|
isOutOfCollege = false,
|
||||||
|
}) => {
|
||||||
|
const { theme } = useTheme();
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<section className="mb-16">
|
<section className="mb-16">
|
||||||
<div className="flex items-center gap-3 mb-8">
|
<div className="flex items-center gap-3 mb-8">
|
||||||
<Users className={`w-8 h-8 transition-colors duration-300 ${
|
<Users
|
||||||
theme === 'dark' ? 'text-indigo-400' : 'text-indigo-600'
|
className={`w-8 h-8 transition-colors duration-300 ${
|
||||||
}`} />
|
theme === "dark" ? "text-indigo-400" : "text-indigo-600"
|
||||||
<h2 className={`text-3xl font-bold transition-colors duration-300 ${
|
}`}
|
||||||
theme === 'dark' ? 'text-white' : 'text-slate-800'
|
/>
|
||||||
}`}>
|
<h2
|
||||||
Leadership & Service
|
className={`text-3xl font-bold transition-colors duration-300 ${
|
||||||
</h2>
|
theme === "dark" ? "text-white" : "text-slate-800"
|
||||||
</div>
|
}`}
|
||||||
<div className={`rounded-2xl shadow-lg p-8 transition-all duration-300 ${
|
>
|
||||||
theme === 'dark' ? 'bg-slate-800' : 'bg-white'
|
Leadership & Service
|
||||||
}`}>
|
</h2>
|
||||||
<div className="grid gap-8 md:grid-cols-2">
|
</div>
|
||||||
|
<div
|
||||||
|
className={`rounded-2xl shadow-lg p-8 transition-all duration-300 ${
|
||||||
|
theme === "dark" ? "bg-slate-800" : "bg-white"
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
<div className="grid gap-8 md:grid-cols-2">
|
||||||
|
<div>
|
||||||
|
<h3
|
||||||
|
className={`text-xl font-semibold mb-6 transition-colors duration-300 ${
|
||||||
|
theme === "dark" ? "text-white" : "text-slate-800"
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
Leadership Roles
|
||||||
|
</h3>
|
||||||
|
<div className="space-y-4">
|
||||||
<div>
|
<div>
|
||||||
<h3 className={`text-xl font-semibold mb-6 transition-colors duration-300 ${
|
<h4
|
||||||
theme === 'dark' ? 'text-white' : 'text-slate-800'
|
className={`font-semibold transition-colors duration-300 ${
|
||||||
}`}>
|
theme === "dark" ? "text-slate-200" : "text-slate-800"
|
||||||
Leadership Roles
|
}`}
|
||||||
</h3>
|
>
|
||||||
<div className="space-y-4">
|
NJHS Inductee
|
||||||
<div>
|
</h4>
|
||||||
<h4 className={`font-semibold transition-colors duration-300 ${
|
<p
|
||||||
theme === 'dark' ? 'text-slate-200' : 'text-slate-800'
|
className={`transition-colors duration-300 ${
|
||||||
}`}>
|
theme === "dark" ? "text-slate-300" : "text-slate-600"
|
||||||
NJHS Inductee
|
}`}
|
||||||
</h4>
|
>
|
||||||
<p className={`transition-colors duration-300 ${
|
National Junior Honor Society Inductee • 2024
|
||||||
theme === 'dark' ? 'text-slate-300' : 'text-slate-600'
|
</p>
|
||||||
}`}>
|
<p
|
||||||
National Junior Honor Society Inductee • 2024
|
className={`text-sm transition-colors duration-300 ${
|
||||||
</p>
|
theme === "dark" ? "text-slate-400" : "text-slate-600"
|
||||||
<p className={`text-sm transition-colors duration-300 ${
|
}`}
|
||||||
theme === 'dark' ? 'text-slate-400' : 'text-slate-600'
|
>
|
||||||
}`}>
|
Recognized for academic excellence, leadership, and community
|
||||||
Recognized for academic excellence, leadership, and
|
service in middle school
|
||||||
community service in middle school
|
</p>
|
||||||
</p>
|
</div>
|
||||||
</div>
|
<div>
|
||||||
<div>
|
<h4
|
||||||
<h4 className={`font-semibold transition-colors duration-300 ${
|
className={`font-semibold transition-colors duration-300 ${
|
||||||
theme === 'dark' ? 'text-slate-200' : 'text-slate-800'
|
theme === "dark" ? "text-slate-200" : "text-slate-800"
|
||||||
}`}>
|
}`}
|
||||||
"Fabulous Falcon" Award
|
>
|
||||||
</h4>
|
"Fabulous Falcon" Award
|
||||||
<p className={`transition-colors duration-300 ${
|
</h4>
|
||||||
theme === 'dark' ? 'text-slate-300' : 'text-slate-600'
|
<p
|
||||||
}`}>
|
className={`transition-colors duration-300 ${
|
||||||
Forestwood Middle School • 2024
|
theme === "dark" ? "text-slate-300" : "text-slate-600"
|
||||||
</p>
|
}`}
|
||||||
<p className={`text-sm transition-colors duration-300 ${
|
>
|
||||||
theme === 'dark' ? 'text-slate-400' : 'text-slate-600'
|
Forestwood Middle School • 2024
|
||||||
}`}>
|
</p>
|
||||||
Awarded for outstanding contributions to school community
|
<p
|
||||||
and leadership in student activities
|
className={`text-sm transition-colors duration-300 ${
|
||||||
</p>
|
theme === "dark" ? "text-slate-400" : "text-slate-600"
|
||||||
</div>
|
}`}
|
||||||
<div>
|
>
|
||||||
<h4 className={`font-semibold transition-colors duration-300 ${
|
Awarded for outstanding contributions to school community and
|
||||||
theme === 'dark' ? 'text-slate-200' : 'text-slate-800'
|
leadership in student activities
|
||||||
}`}>
|
</p>
|
||||||
Peer Learning Mentor
|
</div>
|
||||||
</h4>
|
<div>
|
||||||
<p className={`transition-colors duration-300 ${
|
<h4
|
||||||
theme === 'dark' ? 'text-slate-300' : 'text-slate-600'
|
className={`font-semibold transition-colors duration-300 ${
|
||||||
}`}>
|
theme === "dark" ? "text-slate-200" : "text-slate-800"
|
||||||
Forestwood Middle School • 2023-2024
|
}`}
|
||||||
</p>
|
>
|
||||||
<p className={`text-sm transition-colors duration-300 ${
|
Peer Learning Mentor
|
||||||
theme === 'dark' ? 'text-slate-400' : 'text-slate-600'
|
</h4>
|
||||||
}`}>
|
<p
|
||||||
Mentored 50+ students in computer science fundamentals,
|
className={`transition-colors duration-300 ${
|
||||||
fostering a collaborative learning environment
|
theme === "dark" ? "text-slate-300" : "text-slate-600"
|
||||||
</p>
|
}`}
|
||||||
</div>
|
>
|
||||||
</div>
|
Forestwood Middle School • 2023-2024
|
||||||
|
</p>
|
||||||
|
<p
|
||||||
|
className={`text-sm transition-colors duration-300 ${
|
||||||
|
theme === "dark" ? "text-slate-400" : "text-slate-600"
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
Mentored 50+ students in computer science fundamentals,
|
||||||
|
fostering a collaborative learning environment
|
||||||
|
</p>
|
||||||
</div>
|
</div>
|
||||||
{isOutOfCollege && (
|
|
||||||
<div>
|
|
||||||
<h3 className={`mb-6 text-xl font-semibold transition-colors duration-300 ${
|
|
||||||
theme === 'dark' ? 'text-white' : 'text-slate-800'
|
|
||||||
}`}>
|
|
||||||
Community Service
|
|
||||||
</h3>
|
|
||||||
<div className="space-y-4">
|
|
||||||
<div>
|
|
||||||
<h4 className={`font-semibold transition-colors duration-300 ${
|
|
||||||
theme === 'dark' ? 'text-slate-200' : 'text-slate-800'
|
|
||||||
}`}>
|
|
||||||
Code for Good Volunteer
|
|
||||||
</h4>
|
|
||||||
<p className={`transition-colors duration-300 ${
|
|
||||||
theme === 'dark' ? 'text-slate-300' : 'text-slate-600'
|
|
||||||
}`}>
|
|
||||||
2020-Present • 500+ hours
|
|
||||||
</p>
|
|
||||||
<p className={`text-sm transition-colors duration-300 ${
|
|
||||||
theme === 'dark' ? 'text-slate-400' : 'text-slate-600'
|
|
||||||
}`}>
|
|
||||||
Built digital solutions for 10+ nonprofits, impacting
|
|
||||||
10,000+ lives
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
{isOutOfCollege && (
|
||||||
);
|
<div>
|
||||||
|
<h3
|
||||||
|
className={`mb-6 text-xl font-semibold transition-colors duration-300 ${
|
||||||
|
theme === "dark" ? "text-white" : "text-slate-800"
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
Community Service
|
||||||
|
</h3>
|
||||||
|
<div className="space-y-4">
|
||||||
|
<div>
|
||||||
|
<h4
|
||||||
|
className={`font-semibold transition-colors duration-300 ${
|
||||||
|
theme === "dark" ? "text-slate-200" : "text-slate-800"
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
Code for Good Volunteer
|
||||||
|
</h4>
|
||||||
|
<p
|
||||||
|
className={`transition-colors duration-300 ${
|
||||||
|
theme === "dark" ? "text-slate-300" : "text-slate-600"
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
2020-Present • 500+ hours
|
||||||
|
</p>
|
||||||
|
<p
|
||||||
|
className={`text-sm transition-colors duration-300 ${
|
||||||
|
theme === "dark" ? "text-slate-400" : "text-slate-600"
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
Built digital solutions for 10+ nonprofits, impacting
|
||||||
|
10,000+ lives
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
export default LeadershipSection;
|
export default LeadershipSection;
|
||||||
Reference in New Issue
Block a user