Standardize class attributes in issue-scoped files

[hxrshxz]

Summary

• replace issue-scoped className usage with class in the current component and layout files covered by Feature: Standardize HTML class attribute naming (className → class) #989
• update the affected shared component/layout props used by those files so the rename is consistent
• leave intentional non-issue usage like DOM htmlElement.className untouched

Testing

• npm run check
• repo search confirms remaining className hits are outside this diff or intentional (RelatedItems alias, htmlElement.className)

resolves #989

[Copilot]

Pull request overview

This PR standardizes HTML/CSS class attribute usage by replacing className with class on intrinsic/native markup, while leaving component props (e.g., <Icon className="..." />, <CircleButton className="..." />) unchanged. This aligns attribute usage across Astro and Preact-rendered templates and addresses #989.

Changes:

• Replaced className with class on intrinsic elements in multiple TSX/JSX components.
• Renamed an Astro prop destructure (className → sectionClass) to avoid confusion and keep class handling explicit.
• Minor cleanup/formatting improvements (e.g., removing debug logs, small refactors for readability).

Reviewed changes

Copilot reviewed 10 out of 10 changed files in this pull request and generated no comments.

Show a summary per file

File	Description
src/components/SearchResults/index.tsx	Converts intrinsic element className attributes to class while keeping component className props intact.
src/components/RelatedItems/index.astro	Renames destructured class prop local variable and applies it via class={...}.
src/components/ReferenceDirectoryWithFilter/index.tsx	Updates intrinsic elements from className to class.
src/components/PageHeader/HomePage.astro	Small refactor to reuse heroImages and adds explicit callback parameter typing.
src/components/Nav/MainNavLinks.tsx	Updates intrinsic anchor className to class for CSS module usage.
src/components/Icon/index.tsx	Uses class={props.className} on SVG output while preserving the public prop name className.
src/components/Dropdown/index.tsx	Replaces intrinsic element className with class throughout the dropdown markup.
src/components/CopyCodeButton/index.tsx	Removes debug logging and keeps CircleButton’s className prop usage as a component prop.
src/components/CodeEmbed/index.jsx	Converts intrinsic element className to class and applies formatting-only refactors.
src/components/CircleButton/index.tsx	Applies class={...} on intrinsic <a>/<button> while continuing to accept a className prop.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Nwakaego-Ego]

Hi @hxrshxz, thanks for working on this. Here are a few things from the diff.

Some of the changes don't seem to be about className/class, like the console.log messages switching from single quotes to double quotes, and a couple of lines getting split across multiple lines that weren't like that before. Did you run a formatter on the whole file while working on this? If so, it might be good to undo the parts that aren't related to the class rename.

Also noticed a small inconsistency within the PR itself: in BaseLayout.astro, the renamed prop is "class"?: string; (quoted), but the same rename in Icon/index.tsx and CircleButton/index.tsx is class?: string; (unquoted). Just for consistency

Another thing to point out: className didn't just get renamed on regular HTML tags here; it also got renamed on CircleButton, Icon, and BaseLayout themselves, as one of their actual props.