mirror of
https://github.com/Snigdha-OS/snigdhaos-web-dev.git
synced 2025-09-22 03:54:55 +02:00
chore(devs): introduce developers
This commit is contained in:
@@ -1,7 +1,40 @@
|
|||||||
import React from 'react';
|
import React, { useEffect, useState } from 'react';
|
||||||
import { Code, GitBranch, Users, MessageSquare } from 'lucide-react';
|
import { Code, GitBranch, Users, MessageSquare } from 'lucide-react';
|
||||||
|
|
||||||
|
// Define the type for a developer's GitHub data
|
||||||
|
type Developer = {
|
||||||
|
id: number;
|
||||||
|
login: string;
|
||||||
|
name: string | null;
|
||||||
|
avatar_url: string;
|
||||||
|
html_url: string;
|
||||||
|
};
|
||||||
|
|
||||||
export default function Developers() {
|
export default function Developers() {
|
||||||
|
const [developers, setDevelopers] = useState<Developer[]>([]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const fetchDevelopers = async () => {
|
||||||
|
const githubUsernames = ["eshanized", "alokified", "utkarshift"]; // Replace with actual GitHub usernames
|
||||||
|
try {
|
||||||
|
const developerData = await Promise.all(
|
||||||
|
githubUsernames.map(async (username) => {
|
||||||
|
const response = await fetch(`https://api.github.com/users/${username}`);
|
||||||
|
if (!response.ok) {
|
||||||
|
throw new Error(`Failed to fetch data for ${username}`);
|
||||||
|
}
|
||||||
|
return response.json();
|
||||||
|
})
|
||||||
|
);
|
||||||
|
setDevelopers(developerData);
|
||||||
|
} catch (error) {
|
||||||
|
console.error("Error fetching developer data:", error);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
fetchDevelopers();
|
||||||
|
}, []);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="py-16">
|
<div className="py-16">
|
||||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||||
@@ -13,8 +46,39 @@ export default function Developers() {
|
|||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Get Involved Section */}
|
{/* Meet the Developers Section */}
|
||||||
|
<div className="bg-white rounded-lg shadow-lg p-8 mb-16">
|
||||||
|
<h2 className="text-2xl font-bold mb-6">Meet the Developers</h2>
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||||
|
{developers.length > 0 ? (
|
||||||
|
developers.map((developer) => (
|
||||||
|
<div key={developer.id} className="p-4 border border-gray-200 rounded-lg text-center">
|
||||||
|
<img
|
||||||
|
src={developer.avatar_url}
|
||||||
|
alt={developer.login}
|
||||||
|
className="w-20 h-20 rounded-full mx-auto mb-4"
|
||||||
|
/>
|
||||||
|
<h3 className="text-lg font-semibold">{developer.name || developer.login}</h3>
|
||||||
|
<p className="text-gray-600">@{developer.login}</p>
|
||||||
|
<a
|
||||||
|
href={developer.html_url}
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
className="text-[#754ffe] font-medium mt-2 inline-block"
|
||||||
|
>
|
||||||
|
View Profile
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
))
|
||||||
|
) : (
|
||||||
|
<p className="text-gray-600">Loading developer information...</p>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Get Involved and Development Resources Section */}
|
||||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-8 mb-16">
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-8 mb-16">
|
||||||
|
{/* Get Involved Section */}
|
||||||
<div className="bg-white p-8 rounded-lg shadow-lg">
|
<div className="bg-white p-8 rounded-lg shadow-lg">
|
||||||
<Code className="h-12 w-12 text-[#754ffe] mb-4" />
|
<Code className="h-12 w-12 text-[#754ffe] mb-4" />
|
||||||
<h2 className="text-2xl font-bold mb-4">Get Involved</h2>
|
<h2 className="text-2xl font-bold mb-4">Get Involved</h2>
|
||||||
@@ -37,6 +101,7 @@ export default function Developers() {
|
|||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
{/* Development Resources Section */}
|
||||||
<div className="bg-white p-8 rounded-lg shadow-lg">
|
<div className="bg-white p-8 rounded-lg shadow-lg">
|
||||||
<h2 className="text-2xl font-bold mb-4">Development Resources</h2>
|
<h2 className="text-2xl font-bold mb-4">Development Resources</h2>
|
||||||
<div className="space-y-4">
|
<div className="space-y-4">
|
||||||
@@ -56,6 +121,7 @@ export default function Developers() {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
{/* Current Projects */}
|
{/* Current Projects */}
|
||||||
<div className="bg-white rounded-lg shadow-lg p-8 mb-16">
|
<div className="bg-white rounded-lg shadow-lg p-8 mb-16">
|
||||||
<h2 className="text-2xl font-bold mb-6">Current Projects</h2>
|
<h2 className="text-2xl font-bold mb-6">Current Projects</h2>
|
||||||
|
Reference in New Issue
Block a user