fix: improve organization's sponsor logo rendering

[rahul-vyas-dev]

Improved the sponsor section to not display when no sponsors are provided.

Screenshots/Recordings:

Before:

After:

Checklist

• My code follows the project's code style and conventions
• I have made corresponding changes to the documentation
• My changes generate no new warnings or errors
• I have joined the Discord server and I will share a link to this PR with the project maintainers there
• I have read the Contributing Guidelines

⚠️ AI Notice - Important!

We encourage contributors to use AI tools responsibly when creating Pull Requests. While AI can be a valuable aid, it is essential to ensure that your contributions meet the task requirements, build successfully, include relevant tests, and pass all linters. Submissions that do not meet these standards may be closed without warning to maintain the quality and integrity of the project. Please take the time to understand the changes you are proposing and their impact.

Summary by CodeRabbit

• Bug Fixes
  • Sponsors section now only displays when sponsors are available, preventing empty containers from rendering.

[coderabbitai]

Walkthrough

Restructured JSX indentation and nesting within the SupportUsButton component to correctly position the logoContent assignment. Added an outer conditional wrapper that renders the sponsors section only when sponsors data exists and has length, removing redundant nested conditionals within the card markup.

Changes

Cohort / File(s)	Summary
SupportUsButton Component src/components/SupportUsButton.tsx	Restructured JSX indentation/parentheses for logoContent nesting; added outer conditional render for sponsors container (sponsors && sponsors.length > 0); removed redundant nested condition within sponsor card; minor whitespace cleanup and trailing newline addition.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Possibly related PRs

• Add support for organization URL #23 — Both PRs modify organization logo and sponsors rendering in the same component, with overlapping changes to conditional rendering logic.
• chore: add support us button component with customizable themes and b… #6 — Both PRs adjust sponsor rendering logic within the SupportUsButton component.
• Enhance Theme-Based Shadows and Improve Typography Weight for Sponsors Section #19 — Both PRs modify the sponsors container markup structure and rendering behavior.

Suggested labels

Typescript Lang

Poem

🐰 A rabbit hops through JSX so neat,
Restructuring sponsors—conditional and sweet!
Nesting corrected with pristine care,
Sponsors now render when data's there! ✨

🚥 Pre-merge checks | ✅ 2

✅ Passed checks (2 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately describes the main change: improving sponsor logo rendering by conditionally rendering the sponsors section only when sponsors exist.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 4

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)

src/components/SupportUsButton.tsx (1)

1-1: 🧹 Nitpick | 🔵 Trivial

Missing "use client" directive for NextJS client component.

Per coding guidelines, NextJS components should include the "use client" directive. This component renders interactive elements and should be explicitly marked as a client component.

Proposed fix

+"use client";
+
 import React from "react";

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@src/components/SupportUsButton.tsx` at line 1, This component
(SupportUsButton) is missing the Next.js client directive; add the line "use
client" at the very top of the file before any imports so the component is
treated as a client component (place the directive above the existing import
React from "react"; and ensure it remains a plain string literal on the first
non-comment line).

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@src/components/SupportUsButton.tsx`:
- Around line 303-307: Replace the hardcoded heading text in the SupportUsButton
component (the h2 element rendering "Our Sponsors") with an i18n lookup; import
and use the appropriate translation function or hook (e.g., t or useTranslation)
and replace the literal string with t('support_us.ourSponsors') or the agreed
key, ensuring the new key is added to the resource files for all locales and
used in the h2 inside SupportUsButton.tsx so the className and markup remain
unchanged.
- Around line 317-322: The sponsor.anchor currently uses sponsor.link directly;
update SupportUsButton to validate sponsor.link with the same validateUrl(...)
used for organizationInformation.url and only set href (and target/rel/title)
when validateUrl(sponsor.link) returns true (otherwise omit the href or render a
non-clickable element/fallback). Locate the anchor that references sponsor.link
and wrap its href assignment in the validateUrl check (or conditionally render
the <a>), reusing the validateUrl function to prevent javascript: XSS vectors.
- Around line 316-319: The sponsors.map in the SupportUsButton component is
using the array index as the React key which can cause rendering bugs when the
list changes; update the key prop on the <a> element inside sponsors.map to use
a stable unique identifier from the sponsor object (e.g., sponsor.name or
sponsor.link) instead of index so React can correctly track items during
re-renders.
- Around line 273-275: Remove the redundant inner conditional around the
sponsors list in the SupportUsButton component: delete the inner "sponsors &&
sponsors.length > 0 &&" check and directly render the <div> that lists sponsors
(the block that references sponsors and their logos), since the outer wrapper
already guarantees sponsors is non-empty; update any corresponding parentheses
so the JSX remains valid and no extra nesting remains.

---

Outside diff comments:
In `@src/components/SupportUsButton.tsx`:
- Line 1: This component (SupportUsButton) is missing the Next.js client
directive; add the line "use client" at the very top of the file before any
imports so the component is treated as a client component (place the directive
above the existing import React from "react"; and ensure it remains a plain
string literal on the first non-comment line).

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: ASSERTIVE

Plan: Pro

Run ID: 42461e85-652d-43b7-888b-dc92250c4635

📥 Commits

Reviewing files that changed from the base of the PR and between 59fd0c6 and 2d3054a.

📒 Files selected for processing (1)

• src/components/SupportUsButton.tsx