Sign-in buttons with brand marks

// apps/docs/examples/ui/brand-icons.tsximport {  FacebookIcon,  GithubIcon,  GoogleIcon,  LinkedinIcon,  MicrosoftIcon,} from '@workspace/active-ui/components/icons';import {Button} from '@workspace/active-ui/components/primitives/button';
const PROVIDERS = [  {name: 'Google', Icon: GoogleIcon},  {name: 'Microsoft', Icon: MicrosoftIcon},  {name: 'GitHub', Icon: GithubIcon},  {name: 'LinkedIn', Icon: LinkedinIcon},  {name: 'Facebook', Icon: FacebookIcon},];
/** * Sign-in buttons with the providers' marks. The mark is decoration; the * button's text names it. The buttons do nothing. */export default function BrandIconsExample() {  return (    <div className="grid w-full max-w-xs gap-2">      {PROVIDERS.map(({name, Icon}) => (        <Button key={name} variant="outline">          <Icon className="size-4" />          Sign in with {name}        </Button>      ))}    </div>  );}