ESLINT is holy crap

app/components/buttons.tsx

@@ -0,0 +1,71 @@
+'use client';
+
+import React, { useCallback, useState } from 'react';
+import { Button } from '../../src/primitive-components/material-you-components';
+
+export default function Buttons() {
+    const [state, setState] = useState(1);
+
+    const callback = useCallback(
+        () => setState(prevState => prevState + 1),
+        [state],
+    );
+
+    return (
+        <div className={'m3 m3-wrapper'}>
+            <h1> Buttons </h1>
+            <div style={{ display: 'flex', flexDirection: 'row', gap: '2em' }}>
+                <div>
+                    <h2> Default buttons </h2>
+                    <div
+                        style={{
+                            display: 'flex',
+                            flexDirection: 'column',
+                            width: '150px',
+                            gap: '0.5em',
+                        }}
+                    >
+                        <Button
+                            centralRipple
+                            onClick={callback}
+                            variant={'filled'}
+                        >
+                            Label + {state}
+                        </Button>
+                        <Button variant={'outlined'}>Label</Button>
+                        <Button variant={'tonal'}>Label</Button>
+                        <Button variant={'elevated'}>Label</Button>
+                        <Button variant={'text'}>Label</Button>
+                    </div>
+                </div>
+                <div>
+                    <h2> Buttons with icon </h2>
+                    <div
+                        style={{
+                            display: 'flex',
+                            flexDirection: 'column',
+                            width: '150px',
+                            gap: '0.5em',
+                        }}
+                    >
+                        <Button icon={'add'} variant={'filled'}>
+                            Label
+                        </Button>
+                        <Button icon={'add'} variant={'outlined'}>
+                            Label
+                        </Button>
+                        <Button icon={'add'} variant={'tonal'}>
+                            Label
+                        </Button>
+                        <Button icon={'add'} variant={'elevated'}>
+                            Label
+                        </Button>
+                        <Button icon={'add'} variant={'text'}>
+                            Label
+                        </Button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+}