add logos

src/components/Button.tsx

@@ -17,6 +17,8 @@ const variantStyles = {
     blue: 'bg-blue-600 text-white hover:text-slate-100 hover:bg-blue-500 active:bg-blue-800 active:text-blue-100 focus-visible:outline-blue-600',
     white:
       'bg-white text-black hover:bg-gray-100 hover:text-black active:bg-gray-200 active:text-gray-800 focus-visible:outline-white',
+    radial:
+      'text-white hover:opacity-90 active:opacity-80 focus-visible:outline-blue-600',
   },
   outline: {
     slate:
@@ -47,6 +49,8 @@ export function Button({ className, ...props }: ButtonProps) {
   props.variant ??= 'solid'
   props.color ??= 'slate'
 
+  const isRadial = props.variant === 'solid' && props.color === 'radial'
+  
   className = clsx(
     baseStyles[props.variant],
     props.variant === 'outline'
@@ -57,9 +61,13 @@ export function Button({ className, ...props }: ButtonProps) {
     className,
   )
 
+  const style = isRadial ? {
+    background: 'radial-gradient(circle, #1b1a86 0%, #000000 100%)'
+  } : undefined
+
   return typeof props.href === 'undefined' ? (
-    <button className={className} {...props} />
+    <button className={className} style={style} {...props} />
   ) : (
-    <Link className={className} {...props} />
+    <Link className={className} style={style} {...props} />
   )
 }