fix: updated styling

apps/sample-nextjs/src/components/Button/index.module.css

@@ -0,0 +1,23 @@
+
+
+.button {
+    background-color: #f1f1f1;
+	color: black;
+	padding: 0.5em;
+	font-size: 16px;
+	border: none;
+	cursor: pointer;
+	margin-right: 1em;
+	/* height: 100%; */
+	/* display: flex; */
+	/* align-items: center; */
+    transition: all 0.3s;
+}
+
+.button:disabled {
+    opacity: 0.5;
+}
+
+.button:hover {
+    box-shadow: 1px 3px 8px 0 rgba(0, 0, 0, 0.2);
+}

apps/sample-nextjs/src/components/Button/index.tsx

@@ -0,0 +1,7 @@
+import { ButtonHTMLAttributes } from 'react';
+import styles from './index.module.css';
+
+export const Button = (props: ButtonHTMLAttributes<HTMLButtonElement>) => {
+	console.log(styles);
+	return <button className={styles.button} type="button" {...props} />;
+};

apps/sample-nextjs/src/components/OptionGrid/index.tsx

@@ -2,6 +2,7 @@
 
 import { useAtom } from 'jotai';
 import { useComparisons } from '../../hooks/use-comparisons';
+import { Button } from '../Button';
 import { RunnableComparisonCard } from '../RunnableComparisonCard';
 import styles from './index.module.css';
 export const OptionGrid = () => {
@@ -10,7 +11,7 @@ export const OptionGrid = () => {
 	const [optionsAtoms] = useAtom(optionsAtomsAtom);
 	return (
 		<div>
-			<button onClick={handleRunAll}>Run All</button>
+			<Button onClick={handleRunAll}>Run All</Button>
 			<div className={styles.grid}>
 				{optionsAtoms.map((option, index) => (
 					<RunnableComparisonCard atom={option} key={index} />

apps/sample-nextjs/src/components/RunnableComparisonCard/index.tsx

@@ -2,6 +2,7 @@ import { PrimitiveAtom, useAtom, useAtomValue } from 'jotai';
 import { ComparisonOptionAtom, inputAtom, microtaskQueueAtom } from '../../state/atoms';
 import { formatNumber } from '../../utils/format-number';
 import { timeFunction } from '../../utils/time-func';
+import { Button } from '../Button';
 import { ComparisonCard } from '../ComparisonCard';
 
 type RunnableComparisonCardProps = {
@@ -53,16 +54,16 @@ export const RunnableComparisonCard = ({ atom }: RunnableComparisonCardProps) =>
 	};
 
 	return (
-		<ComparisonCard title={title} description={description} danger={mainThread}>
-			<button
+		<ComparisonCard danger={mainThread} description={description} title={title}>
+			<Button
 				disabled={running}
 				onClick={async () => {
 					await handleRun();
 				}}
 			>
 				Run
 				{/* Run {mainThread ? 'Main Thread' : 'Web Worker'} */}
-			</button>
+			</Button>
 			<div>
 				<p>Duration: {formatNumber(duration)}ms</p>
 				<p>Result: {formatNumber(result)}</p>