Shadcn migration - ContributorsQuizBanner

[saurabhburade]

Description

Migrate ContributorsQuizBanner to tailwind

[netlify]

✅ Deploy Preview for ethereumorg ready!

Name	Link
🔨 Latest commit	84e36e0
🔍 Latest deploy log	https://app.netlify.com/sites/ethereumorg/deploys/66f3f23960bbd20008837e1d
😎 Deploy Preview	https://deploy-preview-13957--ethereumorg.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
Lighthouse	7 paths audited Performance: 48 (🟢 up 2 from production) Accessibility: 93 (no change from production) Best Practices: 89 (🔴 down 9 from production) SEO: 92 (no change from production) PWA: - View the detailed breakdown and full score reports

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[saurabhburade]

Hi @pettinarip, I need a suggestion about the PeopleLearning image. It's visually unused and if we use it where & how to place it.
For reference

Without image ==> Already in prod

With Image

[pettinarip]

Hi @pettinarip, I need a suggestion about the PeopleLearning image. It's visually unused and if we use it where & how to place it. For reference

You caught a bug!

Looking at this, the problem is that the className is being overridden. We need to destructure it from the props and pass it to the cn function to make it work properly.

function ContributorsQuizBanner({
  className,
  ...props
}: React.HTMLAttributes<HTMLDivElement>) {
  return (
    <aside
      className={cn(
        "flex flex-col rounded md:flex-row",
        "bg-gradient-to-r from-accent-a/10 to-accent-c/10 dark:from-accent-a/20 dark:to-accent-c-hover/20",
        className
      )}
      {...props}

With that you should see the image and continue with the migration (and fix a bug xD).

[pettinarip]

Great! @saurabhburade lgtm