refactor: Improve code formatting and structure in LeadershipSection component
This commit is contained in:
@@ -1,125 +1,161 @@
|
||||
import { Users } from 'lucide-react';
|
||||
import { useTheme } from '../contexts/ThemeContext';
|
||||
import { Users } from "lucide-react";
|
||||
import { useTheme } from "../contexts/ThemeContext";
|
||||
|
||||
interface LeadershipSectionProps {
|
||||
isOutOfCollege?: boolean;
|
||||
isOutOfCollege?: boolean;
|
||||
}
|
||||
|
||||
const LeadershipSection: React.FC<LeadershipSectionProps> = ({ isOutOfCollege = false }) => {
|
||||
const { theme } = useTheme();
|
||||
const LeadershipSection: React.FC<LeadershipSectionProps> = ({
|
||||
isOutOfCollege = false,
|
||||
}) => {
|
||||
const { theme } = useTheme();
|
||||
|
||||
return (
|
||||
<section className="mb-16">
|
||||
<div className="flex items-center gap-3 mb-8">
|
||||
<Users 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'
|
||||
}`}>
|
||||
Leadership & Service
|
||||
</h2>
|
||||
</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">
|
||||
return (
|
||||
<section className="mb-16">
|
||||
<div className="flex items-center gap-3 mb-8">
|
||||
<Users
|
||||
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"
|
||||
}`}
|
||||
>
|
||||
Leadership & Service
|
||||
</h2>
|
||||
</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>
|
||||
<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>
|
||||
<h4 className={`font-semibold transition-colors duration-300 ${
|
||||
theme === 'dark' ? 'text-slate-200' : 'text-slate-800'
|
||||
}`}>
|
||||
NJHS Inductee
|
||||
</h4>
|
||||
<p className={`transition-colors duration-300 ${
|
||||
theme === 'dark' ? 'text-slate-300' : 'text-slate-600'
|
||||
}`}>
|
||||
National Junior Honor Society Inductee • 2024
|
||||
</p>
|
||||
<p className={`text-sm transition-colors duration-300 ${
|
||||
theme === 'dark' ? 'text-slate-400' : 'text-slate-600'
|
||||
}`}>
|
||||
Recognized for academic excellence, leadership, and
|
||||
community service in middle school
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<h4 className={`font-semibold transition-colors duration-300 ${
|
||||
theme === 'dark' ? 'text-slate-200' : 'text-slate-800'
|
||||
}`}>
|
||||
"Fabulous Falcon" Award
|
||||
</h4>
|
||||
<p className={`transition-colors duration-300 ${
|
||||
theme === 'dark' ? 'text-slate-300' : 'text-slate-600'
|
||||
}`}>
|
||||
Forestwood Middle School • 2024
|
||||
</p>
|
||||
<p className={`text-sm transition-colors duration-300 ${
|
||||
theme === 'dark' ? 'text-slate-400' : 'text-slate-600'
|
||||
}`}>
|
||||
Awarded for outstanding contributions to school community
|
||||
and leadership in student activities
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<h4 className={`font-semibold transition-colors duration-300 ${
|
||||
theme === 'dark' ? 'text-slate-200' : 'text-slate-800'
|
||||
}`}>
|
||||
Peer Learning Mentor
|
||||
</h4>
|
||||
<p className={`transition-colors duration-300 ${
|
||||
theme === 'dark' ? 'text-slate-300' : 'text-slate-600'
|
||||
}`}>
|
||||
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>
|
||||
<h4
|
||||
className={`font-semibold transition-colors duration-300 ${
|
||||
theme === "dark" ? "text-slate-200" : "text-slate-800"
|
||||
}`}
|
||||
>
|
||||
NJHS Inductee
|
||||
</h4>
|
||||
<p
|
||||
className={`transition-colors duration-300 ${
|
||||
theme === "dark" ? "text-slate-300" : "text-slate-600"
|
||||
}`}
|
||||
>
|
||||
National Junior Honor Society Inductee • 2024
|
||||
</p>
|
||||
<p
|
||||
className={`text-sm transition-colors duration-300 ${
|
||||
theme === "dark" ? "text-slate-400" : "text-slate-600"
|
||||
}`}
|
||||
>
|
||||
Recognized for academic excellence, leadership, and community
|
||||
service in middle school
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<h4
|
||||
className={`font-semibold transition-colors duration-300 ${
|
||||
theme === "dark" ? "text-slate-200" : "text-slate-800"
|
||||
}`}
|
||||
>
|
||||
"Fabulous Falcon" Award
|
||||
</h4>
|
||||
<p
|
||||
className={`transition-colors duration-300 ${
|
||||
theme === "dark" ? "text-slate-300" : "text-slate-600"
|
||||
}`}
|
||||
>
|
||||
Forestwood Middle School • 2024
|
||||
</p>
|
||||
<p
|
||||
className={`text-sm transition-colors duration-300 ${
|
||||
theme === "dark" ? "text-slate-400" : "text-slate-600"
|
||||
}`}
|
||||
>
|
||||
Awarded for outstanding contributions to school community and
|
||||
leadership in student activities
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<h4
|
||||
className={`font-semibold transition-colors duration-300 ${
|
||||
theme === "dark" ? "text-slate-200" : "text-slate-800"
|
||||
}`}
|
||||
>
|
||||
Peer Learning Mentor
|
||||
</h4>
|
||||
<p
|
||||
className={`transition-colors duration-300 ${
|
||||
theme === "dark" ? "text-slate-300" : "text-slate-600"
|
||||
}`}
|
||||
>
|
||||
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>
|
||||
{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>
|
||||
);
|
||||
{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;
|
||||
Reference in New Issue
Block a user