import { RtGrid } from '@dpa/react-grid';
import styles from './index.module.css';
import { TestGridButton } from './test-grid-button';
import { useState } from 'react';

export function GridPage() {
  const [key, setKey] = useState('1');

  return (
    <div className={styles['page']}>
      <TestGridButton color="red" onClick={() => setKey(`${Math.random()}`)} />

      <RtGrid direction="horizontal">
        <TestGridButton size="lg" radius="secondary" key={key}>
          <TestGridButton color="red" />
        </TestGridButton>
        <TestGridButton size="lg" radius="secondary" />
        <TestGridButton size="lg" radius="secondary" />
        <TestGridButton size="lg" radius="secondary" />
      </RtGrid>
    </div>
  );
}