ExampleComponent

import { Text, ExampleComponent } from '@thinker-core/mantine-core';

function Demo() {
  return (
    <>
      <Text>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam, officiis! Fugit minus ea,
        perferendis eum consectetur quae vitae. Aliquid, quam reprehenderit? Maiores sed pariatur
        aliquid commodi atque sunt officiis natus?
      </Text>

      <ExampleComponent my="md" />

      <Text>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam, officiis! Fugit minus ea,
        perferendis eum consectetur quae vitae. Aliquid, quam reprehenderit? Maiores sed pariatur
        aliquid commodi atque sunt officiis natus?
      </Text>

      <ExampleComponent my="md" />

      <Text>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam, officiis! Fugit minus ea,
        perferendis eum consectetur quae vitae. Aliquid, quam reprehenderit? Maiores sed pariatur
        aliquid commodi atque sunt officiis natus?
      </Text>
    </>
  );
}

import { ExampleComponent } from '@thinker-core/mantine-core';

function Demo() {
  return (
    <>
      <ExampleComponent my="sm" />
      <ExampleComponent my="sm" variant="dashed" />
      <ExampleComponent my="sm" variant="dotted" />
    </>
  );
}

import { ExampleComponent, Box, Anchor } from '@thinker-core/mantine-core';
import { IconSearch } from '@tabler/icons-react';

function Demo() {
  return (
    <>
      <ExampleComponent my="xs" label="Label on the left" labelPosition="left" />
      <ExampleComponent my="xs" label="Label in the center" labelPosition="center" />
      <ExampleComponent my="xs" label="Label on the right" labelPosition="right" />
      <ExampleComponent
        my="xs"
        variant="dashed"
        labelPosition="center"
        label={
          <>
            <IconSearch size={12} />
            <Box ml={5}>Search results</Box>
          </>
        }
      />
      <ExampleComponent
        my="xs"
        label={
          <Anchor href="https://mantine.dev" target="_blank" inherit>
            Link label
          </Anchor>
        }
      />
    </>
  );
}

import { ExampleComponent } from '@thinker-core/mantine-core';

function Demo() {
  return (
    <>
      <ExampleComponent size="xs" />
      <ExampleComponent size="sm" />
      <ExampleComponent size="md" />
      <ExampleComponent size="lg" />
      <ExampleComponent size="xl" />
      <ExampleComponent size={10} />
    </>
  );
}

import { ExampleComponent, Group, Text } from '@thinker-core/mantine-core';

function Demo() {
  return (
    <Group>
      <Text>Label</Text>
      <ExampleComponent orientation="vertical" />
      <Text>Label</Text>
      <ExampleComponent size="sm" orientation="vertical" />
      <Text>Label</Text>
      <ExampleComponent size="md" orientation="vertical" />
      <Text>Label</Text>
      <ExampleComponent size="lg" orientation="vertical" />
      <Text>Label</Text>
      <ExampleComponent size="xl" orientation="vertical" />
      <Text>Label</Text>
    </Group>
  );
}