agent/agentskills
2
0
Fork 0
mirror of https://github.com/agentskills/agentskills.git synced 2026-06-18 15:54:06 +08:00
Code Issues Packages Projects Releases Wiki Activity

Move logo sizing from <img> to wrapper <div> in logo carousel

Browse Source 
Use a wrapper `<div>` to control each logo's width instead of styling
the `<img>` elements directly. This also replaces inline styles on the
`<a>` elements with Tailwind utility classes (`no-underline`,
`border-none`) and simplifies the map callbacks.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Jonathan Hefner
2026-04-01 11:04:56 -05:00
Unverified
parent 8c2596540b
commit 15ddb74928
1 changed files with 14 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/snippets/LogoCarousel.jsx
+14 -16
View File
@@ -322,28 +322,26 @@ export const LogoCarousel = () => {
<>
<div className="logo-carousel">
<div className="logo-carousel-track" style={{ animation: 'logo-scroll 50s linear infinite' }}>
{row1Doubled.map((logo, i) => {
const imgStyle = { width: 150 * (logo.scale || 1), maxWidth: "100%" };
return (
<a key={`${logo.name}-${i}`} href={logo.url} style={{ textDecoration: 'none', border: 'none' }}>
<img className="block dark:hidden object-contain" style={imgStyle} src={logo.lightSrc} alt={logo.name} noZoom />
<img className="hidden dark:block object-contain" style={imgStyle} src={logo.darkSrc} alt={logo.name} noZoom />
{row1Doubled.map((logo, i) => (
<div key={`${logo.name}-${i}`} style={{ width: 150 * (logo.scale || 1), maxWidth: "100%" }}>
<a href={logo.url} className="block no-underline border-none w-full h-full">
<img className="block dark:hidden object-contain w-full h-full" src={logo.lightSrc} alt={logo.name} noZoom />
<img className="hidden dark:block object-contain w-full h-full" src={logo.darkSrc} alt={logo.name} noZoom />
</a>
);
})}
</div>
))}
</div>
</div>
<div className="logo-carousel">
<div className="logo-carousel-track" style={{ animation: 'logo-scroll 60s linear infinite reverse' }}>
{row2Doubled.map((logo, i) => {
const imgStyle = { width: 150 * (logo.scale || 1), maxWidth: "100%" };
return (
<a key={`${logo.name}-${i}`} href={logo.url} style={{ textDecoration: 'none', border: 'none' }}>
<img className="block dark:hidden object-contain" style={imgStyle} src={logo.lightSrc} alt={logo.name} noZoom />
<img className="hidden dark:block object-contain" style={imgStyle} src={logo.darkSrc} alt={logo.name} noZoom />
{row2Doubled.map((logo, i) => (
<div key={`${logo.name}-${i}`} style={{ width: 150 * (logo.scale || 1), maxWidth: "100%" }}>
<a href={logo.url} className="block no-underline border-none w-full h-full">
<img className="block dark:hidden object-contain w-full h-full" src={logo.lightSrc} alt={logo.name} noZoom />
<img className="hidden dark:block object-contain w-full h-full" src={logo.darkSrc} alt={logo.name} noZoom />
</a>
);
})}
</div>
))}
</div>
</div>
</>