Skip to content

Commit

Permalink
✨ style(change): content
Browse files Browse the repository at this point in the history
  • Loading branch information
@eshanized
eshanized committed Dec 23, 2024
1 parent f4f540a commit 4eb1dda
Show file tree
Hide file tree
Showing 4 changed files with 287 additions and 285 deletions.
2 changes: 1 addition & 1 deletion src/App.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React from 'react';

import { HashRouter as Router, Routes, Route } from 'react-router-dom';
import { Layout } from './components/layout/Layout';
import { Home } from './pages/Home';
Expand Down
188 changes: 92 additions & 96 deletions src/pages/Donors.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,89 +1,116 @@
import { Heart, Trophy, PieChart } from 'lucide-react';
import { useEffect, useState } from 'react';
import { Heart, PieChart } from 'lucide-react';
import { FaRupeeSign } from 'react-icons/fa';

async function getGitHubUserData(username: string): Promise<{ name: string; avatar_url: string }> {
try {
const response = await fetch(`https://api.github.com/users/${username}`);
if (!response.ok) {
throw new Error(`User not found: ${username}`);
}
const data = await response.json();
return {
name: data.name || username, // Use GitHub name or fallback to username
avatar_url: data.avatar_url || '',
};
} catch (error) {
console.error(error);
return { name: username, avatar_url: '' }; // Return username if there is an error
}
}

function useGitHubDonors(usernames: string[]): { [key: string]: { name: string; avatar_url: string } } {
const [donors, setDonors] = useState<{ [key: string]: { name: string; avatar_url: string } }>({});

useEffect(() => {
const fetchDonors = async () => {
const donorData: { [key: string]: { name: string; avatar_url: string } } = {};
for (let username of usernames) {
const data = await getGitHubUserData(username);
donorData[username] = data;
}
setDonors(donorData);
};

fetchDonors();
}, [usernames]);

return donors;
}

export function Donors() {
const donorUsernames = [
"eshanized", "GlobalSystemsLtd", "FutureComputingInc", "SarahJohnson", "MichaelChang",
"DataFlowSolutions", "RobertWilson", "EmmaThompson", "RajeshKumar", "PriyaSharma",
"AryanPatel", "MeenaIyer", "VikramSingh"
];

const donorData = useGitHubDonors(donorUsernames);

return (
<div className="py-12">
<div className="container mx-auto px-4">
{/* Hero Section */}
<section className="text-center mb-16">
<Heart className="h-16 w-16 text-red-500 mx-auto mb-6" />
<h1 className="text-4xl font-bold mb-6">Our Amazing Donors</h1>
<Heart className="h-16 w-16 text-[#6495ed] mx-auto mb-6" />
<h1 className="text-4xl font-bold mb-6 text-[#6495ed]">Our Amazing Donors</h1>
<p className="text-xl text-gray-600 max-w-3xl mx-auto">
Snigdha OS is made possible thanks to the generous support of our
donors. We are grateful for their contributions to keep our project
running.
Snigdha OS is made possible thanks to the generous support of our donors. We are grateful for their contributions to keep our project running.
</p>
</section>

{/* Donation Tiers */}
{/* Donor List */}
<section className="mb-16">
<h2 className="text-3xl font-bold mb-8 text-center">
<Trophy className="inline-block h-6 w-6 text-yellow-500 mr-2" />
Donation Tiers
</h2>
<h2 className="text-3xl font-bold mb-8 text-center text-[#6495ed]">Donors List</h2>
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
<DonationTier
title="Platinum Donors"
amount="₹500+"
icon={<Trophy className="h-6 w-6 text-gray-500" />}
color="bg-gradient-to-r from-gray-200 to-gray-100"
donors={[
"TechCorp International",
"Global Systems Ltd",
"Future Computing Inc",
]}
/>
<DonationTier
title="Gold Donors"
amount="₹100-₹499"
icon={<Trophy className="h-6 w-6 text-yellow-500" />}
color="bg-gradient-to-r from-yellow-100 to-yellow-50"
donors={[
"Sarah Johnson",
"Michael Chang",
"DataFlow Solutions",
"Robert Wilson",
"Emma Thompson",
]}
/>
<DonationTier
title="Silver Donors"
amount="$₹10-₹99"
icon={<Trophy className="h-6 w-6 text-gray-400" />}
color="bg-gradient-to-r from-gray-100 to-white"
donors={[
"Rajesh Kumar",
"Priya Sharma",
"Aryan Patel",
"Meena Iyer",
"Vikram Singh",
// "And many more...",
]}
/>
{donorUsernames.map((donor) => (
<div key={donor} className="flex items-center gap-4">
{donorData[donor]?.avatar_url ? (
<img
src={donorData[donor].avatar_url}
alt={donorData[donor].name}
className="h-12 w-12 rounded-full"
/>
) : (
<div className="h-12 w-12 rounded-full bg-gray-300"></div> // Placeholder if no avatar
)}
<div>
<span className="font-semibold">{donorData[donor]?.name || donor}</span>
<br />
<span className="text-sm text-gray-500">
<a
href={`https://github.com/${donor}`}
target="_blank"
rel="noopener noreferrer"
className="text-blue-500 hover:underline"
>
@{donor}
</a>
</span>
</div>
</div>
))}
</div>
</section>

{/* Become a Donor */}
<section className="bg-indigo-50 rounded-lg p-8 text-center">
<h2 className="text-3xl font-bold mb-4">
<section className="bg-[#6495ed] rounded-lg p-8 text-center">
<h2 className="text-3xl font-bold mb-4 text-white">
<FaRupeeSign className="inline-block h-6 w-6 text-green-500 mr-2" />
Become a Donor
</h2>
<p className="text-gray-600 mb-8 max-w-2xl mx-auto">
Your support helps us maintain and improve Snigdha OS. Every donation,
big or small, makes a difference in keeping our project independent and
sustainable.
<p className="text-white mb-8 max-w-2xl mx-auto">
Your support helps us maintain and improve Snigdha OS. Every donation, big or small, makes a difference in keeping our project independent and sustainable.
</p>
<button className="bg-indigo-600 text-white px-8 py-3 rounded-[5px] hover:bg-indigo-700 transition-colors">
<button className="bg-[#6495ed] text-white px-8 py-3 rounded-[5px] hover:bg-[#6495ed] transition-colors">
Make a Donation
</button>
</section>

{/* Yearly Report */}
<section className="mt-16">
<h2 className="text-3xl font-bold mb-8">
<PieChart className="inline-block h-6 w-6 text-blue-500 mr-2" />
<h2 className="text-3xl font-bold mb-8 text-[#6495ed]">
<PieChart className="inline-block h-6 w-6 text-[#6495ed] mr-2" />
Yearly Donation Report
</h2>
<div className="bg-white rounded-lg shadow-lg p-8">
Expand All @@ -95,25 +122,25 @@ export function Donors() {
averageDonation={1125}
/>
<div className="border-t pt-6">
<h3 className="font-bold mb-4">How Donations Are Used</h3>
<h3 className="font-bold mb-4 text-[#6495ed]">How Donations Are Used</h3>
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
<UsageCard
percentage={40}
category="Development"
description="Supporting core developers and infrastructure"
icon={<PieChart className="h-6 w-6 text-green-500" />}
icon={<PieChart className="h-6 w-6 text-[#6495ed]" />}
/>
<UsageCard
percentage={35}
category="Server Costs"
description="Maintaining mirrors and websites"
icon={<PieChart className="h-6 w-6 text-blue-500" />}
icon={<PieChart className="h-6 w-6 text-[#6495ed]" />}
/>
<UsageCard
percentage={25}
category="Community"
description="Supporting community projects and events"
icon={<PieChart className="h-6 w-6 text-indigo-500" />}
icon={<PieChart className="h-6 w-6 text-[#6495ed]" />}
/>
</div>
</div>
Expand All @@ -125,37 +152,6 @@ export function Donors() {
);
}

type DonationTierProps = {
title: string;
amount: string;
color: string;
icon: React.ReactNode;
donors: string[];
};

function DonationTier({
title,
amount,
color,
icon,
donors,
}: DonationTierProps) {
return (
<div className={`rounded-lg shadow-lg p-6 ${color}`}>
<h3 className="text-xl font-bold mb-2 flex items-center gap-2">
{icon}
{title}
</h3>
<p className="text-gray-600 mb-4">{amount}</p>
<ul className="space-y-2">
{donors.map((donor, index) => (
<li key={index} className="text-gray-700">{donor}</li>
))}
</ul>
</div>
);
}

type YearlyStatsProps = {
month: string;
amount: number;
Expand All @@ -171,7 +167,7 @@ function YearlyStats({
}: YearlyStatsProps) {
return (
<div>
<h3 className="font-bold text-xl mb-4">{month}</h3>
<h3 className="font-bold text-xl mb-4 text-[#6495ed]">{month}</h3>
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
<div className="bg-gray-50 p-4 rounded-lg">
<p className="text-sm text-gray-600">Total Donations</p>
Expand Down Expand Up @@ -207,11 +203,11 @@ function UsageCard({
<div className="bg-gray-50 p-4 rounded-lg">
<div className="flex items-center mb-2">
{icon}
<span className="ml-2 text-xl font-semibold text-indigo-600">
<span className="ml-2 text-xl font-semibold text-[#6495ed]">
{percentage}%
</span>
</div>
<h4 className="font-regular mb-1">{category}</h4>
<h4 className="font-regular mb-1 text-[#6495ed]">{category}</h4>
<p className="text-sm text-gray-600">{description}</p>
</div>
);
Expand Down
Loading

0 comments on commit 4eb1dda

Please sign in to comment.