Update button.tsx

Author: DemiAutomatic

components/button.tsx

@@ -1,22 +1,22 @@
-import React, { ReactNode } from 'react';
+import React from 'react';
 import { IconBrandGithub, IconTag, IconFileText, IconDownload, IconBrandNpm } from '@tabler/icons-react';
 
 interface Props {
-  icon?: JSX.Element;
-  children?: ReactNode;
+  icon?: React.ReactNode;
+  children?: React.ReactNode;
   side?: 'left' | 'right';
   link?: string;
   label?: string;
 }
 
-const Button = ({ side = 'left', children, icon, link }: Props) => {
+const Button: React.FC = ({ side = 'left', children, icon, link }: Props) => {
   return (
     <div className="h-fit w-fit">
       <a href={link}>
         <div className="flex w-26 items-center justify-center gap-1.5 rounded-sm border border-black p-1.5 text-black hover:bg-black hover:text-white dark:border-white dark:text-white dark:hover:bg-white dark:hover:text-black mt-2">
-          {side === 'left' && icon}
+          {side === 'left' && <div>{icon}</div>}
           {children}
-          {side === 'right' && icon}
+          {side === 'right' && <div>{icon}</div>}
         </div>
       </a>
     </div>
@@ -25,42 +25,42 @@ const Button = ({ side = 'left', children, icon, link }: Props) => {
 
 export default Button;
 
-export function GhButton({ side, link, label }: Props) {
+export function GhButton(props: Props) {
   return (
-    <Button icon={<IconBrandGithub />} side={side} link={link}>
-      {label || "Github"}
+    <Button icon={<IconBrandGithub />} side={props.side} link={props.link}>
+      {props.label || "Github"}
     </Button>
   );
 }
 
-export function DocButton({ side, link, label }: Props) {
+export function DocButton(props: Props) {
   return (
-    <Button icon={<IconFileText />} side={side} link={link}>
-      {label || "Documentation"}
+    <Button icon={<IconFileText />} side={props.side} link={props.link}>
+      {props.label || "Documentation"}
     </Button>
   );
 }
 
-export function DownloadButton({ side, link, label }: Props) {
+export function DownloadButton(props: Props) {
   return (
-    <Button icon={<IconDownload />} side={side} link={link}>
-      {label || "Download"}
+    <Button icon={<IconDownload />} side={props.side} link={props.link}>
+      {props.label || "Download"}
     </Button>
   );
 }
 
-export function ReleaseButton({ side, link, label }: Props) {
+export function ReleaseButton(props: Props) {
   return (
-    <Button icon={<IconTag />} side={side} link={link}>
-      {label || "Releases"}
+    <Button icon={<IconTag />} side={props.side} link={props.link}>
+      {props.label || "Releases"}
     </Button>
   );
 }
 
-export function NpmButton({ side, link, label }: Props) {
+export function NpmButton(props: Props) {
   return (
-    <Button icon={<IconBrandNpm />} side={side} link={link}>
-      {label || "Package"}
+    <Button icon={<IconBrandNpm />} side={props.side} link={props.link}>
+      {props.label || "Package"}
     </Button>
   );
-}
+}