fixed prop warnings

components/Button.module.css

@@ -8,6 +8,7 @@
   outline: none;
   transition-duration: 0.3s;
   font-weight: normal;
+  text-align: center;
 }
 
 .button:hover,

components/Button.tsx

@@ -12,17 +12,29 @@ interface LinkProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
 type Props = (ButtonProps | LinkProps) & { size?: "small" | "normal" };
 
 export function Button(props: Props) {
-  const size = props.size ? props.size : "normal";
-  return props.isLink ? (
-    <a
-      {...props}
-      target="_blank"
-      className={`${styles.link} ${styles[size]} ${props.className ?? ""}`}
-    />
-  ) : (
-    <button
-      {...props}
-      className={`${styles.button} ${styles[size]} ${props.className ?? ""}`}
-    />
-  );
+  const btnSize = props.size ? props.size : "normal";
+  if (props.isLink) {
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    const { size, isLink, ...otherProps } = props;
+    return (
+      <a
+        {...otherProps}
+        target="_blank"
+        className={`${styles.link} ${styles[btnSize]} ${
+          otherProps.className ?? ""
+        }`}
+      />
+    );
+  } else {
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    const { size, isLink, ...otherProps } = props;
+    return (
+      <button
+        {...otherProps}
+        className={`${styles.button} ${styles[btnSize]} ${
+          otherProps.className ?? ""
+        }`}
+      />
+    );
+  }
 }

components/EventCard.module.css

@@ -20,6 +20,11 @@
   margin-top: calc(76rem / 16);
 }
 
+.registerButton {
+  display: block;
+  font-weight: bold;
+}
+
 .content > h1 {
   font-size: calc(24rem / 16);
   font-weight: 700;

components/EventCard.tsx

@@ -31,7 +31,12 @@ export function EventCard({
         {poster && <Image alt={name} src={poster} />}
         {!poster && <div className={styles.spacer}></div>}
         {registerLink && (
-          <Button isLink={true} href={registerLink}>
+          <Button
+            isLink={true}
+            href={registerLink}
+            size="small"
+            className={styles.registerButton}
+          >
             Register
           </Button>
         )}

components/playground.tsx

@@ -68,10 +68,24 @@ export function NewsCardDemo() {
 export function ButtonDemo() {
   return (
     <>
-      <Button isLink={true} href="/">
-        Link
-      </Button>
-      <Button isLink={false}>Button</Button>
+      <h3>Standard buttons</h3>
+      <p>
+        <Button isLink={true} href="/">
+          Link
+        </Button>
+      </p>
+      <p>
+        <Button>Button</Button>
+      </p>
+      <h3>Small buttons</h3>
+      <p>
+        <Button isLink={true} href="/" size="small">
+          Small Link
+        </Button>
+      </p>
+      <p>
+        <Button size="small">Small Button</Button>
+      </p>
     </>
   );
 }