Skip to content

Enhance community page with dropdown details for contribution section… #575

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Sep 21, 2025
Merged

Enhance community page with dropdown details for contribution section… #575

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
40 changes: 39 additions & 1 deletion src/pages/community/community.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -437,10 +437,11 @@
display: flex;
align-items: center;
gap: 16px;
padding: 10px 0;
padding: 12px 0 10px;
font-size: 0.95rem;
color: #374151;
border-bottom: 1px solid #f1f5f9;
font-weight: 600;
}

[data-theme='dark'] .section-item {
Expand Down Expand Up @@ -924,3 +925,40 @@
[data-theme='dark'] .contribution-section h6 {
color: #ffffff;
}

/* Dropdown Details Styling */
.section-item-details {
margin: 5px 0 10px 25px;
padding: 12px 15px;
background: #f8fafc;
border-radius: 8px;
border-left: 3px solid #8b5cf6;
overflow: hidden;
}

[data-theme='dark'] .section-item-details {
background: #2d2d2d;
border-left: 3px solid #8b5cf6;
}

.section-item-details p {
margin: 0;
color: #64748b;
font-size: 0.95rem;
line-height: 1.6;
}

[data-theme='dark'] .section-item-details p {
color: #e2e8f0;
}

.item-arrow {
color: #8b5cf6;
font-size: 0.8rem;
flex-shrink: 0;
transition: transform 0.3s ease;
}

.item-arrow.rotate {
transform: rotate(90deg);
}
96 changes: 71 additions & 25 deletions src/pages/community/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ interface ContributionSection {
icon: string;
description: string;
items: string[];
details?: string[];
links: { text: string; url: string; }[];
color: string;
}
Expand All @@ -22,13 +23,18 @@ const contributionSections: ContributionSection[] = [
icon: '💻',
description: "If you're a developer, you can:",
items: [
'Write code 🧑‍💻',
'Fix bugs 🐞',
'Add new features 🚀'
'Access coding standards 🧑‍💻',
'Find debugging tips 🐞',
'Propose new features 🚀'
],
details: [
'Access coding standards and setup instructions to streamline your work with the team\'s codebase.',
Copy link

Copilot AI Sep 21, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

[nitpick] Inconsistent apostrophe usage. Use a consistent apostrophe character (either straight quotes or curly quotes) throughout the strings for better text consistency.

Copilot uses AI. Check for mistakes.

'Find tips for debugging, troubleshooting common errors, and submitting clear bug reports.',
'Read about how to propose new features, collaborate on pull requests, and review peer code.'
],
links: [
{ text: 'GitHub', url: 'https://github.com/recodehive' },
{ text: 'GitLab', url: 'https://gitlab.com' }
{ text: 'GitLab', url: 'https://gitlab.com' }
],
color: '#8b5cf6'
},
Expand All @@ -39,9 +45,14 @@ const contributionSections: ContributionSection[] = [
description: "If you're a writer or educator, you can:",
items: [
'Improve documentation 🖋️',
'Write tutorials 📚',
'Structure tutorials 📚',
'Translate content 🌍'
],
details: [
'Explore detailed guides for improving existing documentation, including style and terminology tips.',
'Learn how to structure tutorials, add examples, and make learning resources more accessible.',
'See guidelines for translating technical content into different languages or for various backgrounds.'
],
links: [
{ text: 'GitHub Docs', url: 'https://www.recodehive.com/docs' }
],
Expand All @@ -53,13 +64,18 @@ const contributionSections: ContributionSection[] = [
icon: '🤝',
description: "If you're a community-minded person, you can:",
items: [
'Help answer questions',
'Support new members 💬',
'Share knowledge and insights'
'Connect with members 👥',
'Support newcomers 💬',
'Share resources 📝'
],
details: [
'Connect with fellow members by joining active discussions in forums and chats.',
'Offer support to newcomers by guiding them through onboarding and answering beginner questions.',
'Share resources, tutorials, and best practices to help others grow.'
],
links: [
{ text: 'Discord', url: 'https://discord.com/invite/w2V2aH6U' },
{ text: 'Whatsapp', url: 'https://chat.whatsapp.com/Izl2yfbFlmY8CExjnIpNkX?mode=ems_copy_t' }
{ text: 'Discord', url: 'https://discord.com/invite/w2V2aH6U' },
{ text: 'Whatsapp', url: 'https://chat.whatsapp.com/Izl2yfbFlmY8CExjnIpNkX?mode=ems_copy_t' }
],
color: '#10b981'
},
Expand All @@ -69,13 +85,18 @@ const contributionSections: ContributionSection[] = [
icon: '🚀',
description: 'To begin your journey with RecodeHive:',
items: [
'Join our community on Discord or Slack',
'Explore our repositories on GitHub',
'Pick a task or area you\'re excited about!'
'Sign up and introduce yourself 👋',
'Discover key repositories 🔍',
'Browse beginner tasks 📋'
],
details: [
'Learn how to sign up and introduce yourself in the welcome channels on Discord or Slack.',
'Discover key open source repositories and find out how you can contribute, regardless of experience level.',
'Browse a list of beginner-friendly tasks and guides to help select your first area of involvement.'
],
links: [
{ text: 'Discord', url: 'https://discord.com/invite/w2V2aH6U' },
{ text: 'Whatsapp', url: 'https://chat.whatsapp.com/Izl2yfbFlmY8CExjnIpNkX?mode=ems_copy_t' },
{ text: 'Discord', url: 'https://discord.com/invite/w2V2aH6U' },
{ text: 'Whatsapp', url: 'https://chat.whatsapp.com/Izl2yfbFlmY8CExjnIpNkX?mode=ems_copy_t' },
{ text: 'GitHub', url: 'https://github.com/recodehive' }
],
color: '#6366f1'
Expand All @@ -94,6 +115,7 @@ const tableOfContents = [
export default function CommunityPage(): React.ReactElement {
const [activeSections, setActiveSections] = useState<string[]>(['how-you-can-contribute']);
const [selectedSection, setSelectedSection] = useState<string | null>(null);
const [openDropdowns, setOpenDropdowns] = useState<string[]>([]);

useEffect(() => {
const handleScroll = () => {
Expand Down Expand Up @@ -148,6 +170,14 @@ export default function CommunityPage(): React.ReactElement {
setSelectedSection(sectionId);
}
};

const toggleDropdown = (itemId: string) => {
setOpenDropdowns(prev =>
prev.includes(itemId)
? prev.filter(id => id !== itemId)
: [...prev, itemId]
);
};

const [isMobile, setIsMobile] = useState(false);

Expand Down Expand Up @@ -250,16 +280,32 @@ export default function CommunityPage(): React.ReactElement {

<ul className="section-items">
{section.items.map((item, itemIndex) => (
<motion.li
key={itemIndex}
className="section-item"
initial={{ opacity: 0, x: -20 }}
animate={{ opacity: 1, x: 0 }}
transition={{ duration: 0.3, delay: (0.1 * index) + (0.05 * itemIndex) }}
>
<span className="item-arrow">▶</span>
{item}
</motion.li>
<React.Fragment key={itemIndex}>
<motion.li
className="section-item"
initial={{ opacity: 0, x: -20 }}
animate={{ opacity: 1, x: 0 }}
transition={{ duration: 0.3, delay: (0.1 * index) + (0.05 * itemIndex) }}
onClick={() => toggleDropdown(`${section.id}-${itemIndex}`)}
style={{ cursor: 'pointer' }}
>
<span className={`item-arrow ${openDropdowns.includes(`${section.id}-${itemIndex}`) ? 'rotate' : ''}`}>
▶
</span>
{item}
</motion.li>

{section.details && openDropdowns.includes(`${section.id}-${itemIndex}`) && (
<motion.div
className="section-item-details"
initial={{ opacity: 0, height: 0 }}
animate={{ opacity: 1, height: 'auto' }}
transition={{ duration: 0.3 }}
>
<p>{section.details[itemIndex]}</p>
Copy link

Copilot AI Sep 21, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Potential array index out of bounds error. The code accesses section.details[itemIndex] without verifying that the details array has enough elements to match the items array length. This could cause runtime errors if the arrays have different lengths.

Copilot uses AI. Check for mistakes.

</motion.div>
)}
</React.Fragment>
))}
</ul>

Expand Down
Loading