Snigdha-OS/Snigdha-OS.github.io
2
0
Fork 0
mirror of https://github.com/Snigdha-OS/Snigdha-OS.github.io.git synced 2025-09-06 04:35:18 +02:00
Code Issues Actions Packages Projects Releases Wiki Activity

🛠 refactor: some minor changes

Browse Source
This commit is contained in:
eshanized
2025-01-07 02:29:50 +05:30
parent 4d7a361244
commit 2047059c0e
2 changed files with 46 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
src/components/donate/DonorWall.tsx
View File

@@ -5,7 +5,7 @@ interface Donor {
name: string;
amount: number;
message?: string;
date: string;
date: string; // Consider using a Date object for better date handling
}
interface DonorWallProps {
@@ -14,28 +14,35 @@ interface DonorWallProps {
export function DonorWall({ donors }: DonorWallProps) {
return (
<div className="bg-white/80 backdrop-blur-sm p-6 rounded-lg">
<h2 className="text-2xl font-semibold text-gray-900 mb-6">Recent Supporters</h2>
<div className="bg-white/80 backdrop-blur-sm p-6 rounded-lg shadow-md">
<h2 className="text-2xl font-semibold text-gray-900 mb-6" id="donor-wall-title">
Recent Supporters
</h2>
<div className="space-y-6">
<div className="space-y-6" role="list" aria-labelledby="donor-wall-title">
{donors.map((donor, index) => (
<motion.div
key={`${donor.name}-${donor.date}`}
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
exit={{ opacity: 0, y: 20 }} // Add exit animation
transition={{ delay: index * 0.1 }}
className="flex items-start gap-4"
className="flex items-start gap-4 p-4 border border-gray-200 rounded-lg hover:bg-gray-50"
role="listitem"
aria-label={`Donation by ${donor.name} of $${donor.amount} on ${donor.date}`}
>
<Heart className="h-5 w-5 text-red-500 flex-shrink-0 mt-1" />
<Heart className="h-5 w-5 text-red-500 flex-shrink-0 mt-1" aria-hidden="true" />
<div>
<div className="flex items-center gap-2">
<h3 className="font-medium text-gray-900">{donor.name}</h3>
<span className="text-sm text-cornflower-blue">${donor.amount}</span>
<span className="text-sm text-cornflower-blue">${donor.amount.toFixed(2)}</span>
</div>
{donor.message && (
<p className="mt-1 text-sm text-gray-600">{donor.message}</p>
)}
<time className="text-xs text-gray-500">{donor.date}</time>
<time className="text-xs text-gray-500" dateTime={donor.date}>
{new Date(donor.date).toLocaleDateString()} {/* Format date for better readability */}
</time>
</div>
</motion.div>
))}

59
src/components/donate/KeySponsors.tsx
View File

@@ -4,40 +4,40 @@ import { motion } from 'framer-motion';
// Dummy list of sponsors with GitHub usernames
const keySponsors = [
{
username: 'TIAsCode', // GitHub username
username: 'TIAsCode',
description: 'Enterprise Partner & Server Provider',
amount: '₹82,025.36', // Example of amount, could be fetched or hardcoded
amount: '₹82,025.36',
},
{
username: 'ixintl', // GitHub username
username: 'ixintl',
description: 'Strategic Development Partner',
amount: '₹54,399.36', // Example of amount, could be fetched or hardcoded
amount: '₹54,399.36',
},
{
username: 'SkullSync', // GitHub username
username: 'SkullSync',
description: 'Strategic Development Partner',
amount: '₹12,181.36', // Example of amount, could be fetched or hardcoded
amount: '₹12,181.36',
},
];
// Dummy list of individual donors with GitHub usernames
const individualDonors = [
{
username: 'd3v1l0n', // GitHub username
amount: '₹4,183.00', // Example of donation amount
username: 'd3v1l0n',
amount: '₹4,183.00',
},
{
username: 'myself-meghna', // GitHub username
amount: '₹8,554', // Example of donation amount
username: 'myself-meghna',
amount: '₹8,554',
},
{
username: 'lawrencecracker', // GitHub username
amount: '₹3,220', // Example of donation amount
username: 'lawrencecracker',
amount: '₹3,220',
},
];
// Fetch GitHub user data
async function fetchGitHubUser(username: string) {
async function fetchGitHubUser (username: string) {
const response = await fetch(`https://api.github.com/users/${username}`);
const data = await response.json();
return data;
@@ -46,44 +46,49 @@ async function fetchGitHubUser(username: string) {
export function KeySponsors() {
const [sponsorsData, setSponsorsData] = useState<any[]>([]);
const [donorsData, setDonorsData] = useState<any[]>([]);
const [loading, setLoading] = useState(true);
// Fetch sponsor and donor data from GitHub
useEffect(() => {
const fetchSponsorsAndDonorsData = async () => {
// Fetching data for sponsors
setLoading(true);
const sponsorsWithData = await Promise.all(
keySponsors.map(async (sponsor) => {
const user = await fetchGitHubUser(sponsor.username);
const user = await fetchGitHubUser (sponsor.username);
return {
...sponsor,
name: user.name || sponsor.username,
avatar_url: user.avatar_url, // Fetch GitHub profile picture
avatar_url: user.avatar_url,
};
})
);
setSponsorsData(sponsorsWithData);
// Fetching data for donors
const donorsWithData = await Promise.all(
individualDonors.map(async (donor) => {
const user = await fetchGitHubUser(donor.username);
const user = await fetchGitHubUser (donor.username);
return {
...donor,
name: user.name || donor.username,
avatar_url: user.avatar_url, // Fetch GitHub profile picture
avatar_url: user.avatar_url,
};
})
);
setDonorsData(donorsWithData);
setLoading(false);
};
fetchSponsorsAndDonorsData();
}, []);
if (loading) {
return <div className="text-center text-gray-600">Loading...</div>;
}
return (
<div className="space-y-16">
{/* Key Sponsors Section */}
<div className="bg-gradient-to-r from-cornflower-blue/5 to-blue-50/50 rounded-2xl p-8">
<div className="bg-gradient-to-r from-cornflower-blue/5 to-blue-50/50 rounded-2xl p-8 shadow-lg">
<h2 className="text-3xl font-semibold text-gray-900 text-center mb-8">
Key Sponsors
</h2>
@@ -94,15 +99,14 @@ export function KeySponsors() {
initial={{ opacity: 0, y: 20 }}
whileInView={{ opacity: 1, y: 0 }}
transition={{ delay: index * 0.1 }}
className="bg-white/90 backdrop-blur-sm rounded-xl p-6 border border-cornflower-blue/20 shadow-xl hover:shadow-2xl transition-shadow"
className="bg-white rounded-xl p-6 border border-cornflower-blue/20 shadow-lg hover:shadow-2xl transition-shadow duration-300"
>
<div className="flex items-center gap-6">
<div className="p-4 bg-cornflower-blue/10 rounded-lg shadow-sm">
{/* Displaying the profile picture */}
<img
src={sponsor.avatar_url}
alt={sponsor.name}
className="h-10 w-10 rounded-full object-cover"
className="h-12 w-12 rounded-full object-cover"
/>
</div>
<div>
@@ -119,7 +123,7 @@ export function KeySponsors() {
</div>
{/* Individual Donors Section */}
<div className="bg-gradient-to-r from-indigo-100/10 to-blue-50/50 rounded-2xl p-8">
<div className="bg-gradient-to-r from-indigo-100/10 to-blue-50/50 rounded-2xl p-8 shadow-lg">
<h2 className="text-3xl font-semibold text-gray-900 text-center mb-8">
Individual Donors
</h2>
@@ -130,15 +134,14 @@ export function KeySponsors() {
initial={{ opacity: 0, y: 20 }}
whileInView={{ opacity: 1, y: 0 }}
transition={{ delay: index * 0.1 }}
className="bg-white/90 backdrop-blur-sm rounded-xl p-6 border border-indigo-200/50 shadow-md hover:shadow-lg transition-shadow"
className="bg-white rounded-xl p-6 border border-indigo-200/50 shadow-md hover:shadow-lg transition-shadow duration-300"
>
<div className="flex items-center gap-6">
<div className="p-4 bg-indigo-200/10 rounded-lg shadow-sm">
{/* Displaying the profile picture */}
<img
src={donor.avatar_url}
alt={donor.name}
className="h-10 w-10 rounded-full object-cover"
className="h-12 w-12 rounded-full object-cover"
/>
</div>
<div>
@@ -155,4 +158,4 @@ export function KeySponsors() {
</div>
</div>
);
}
}