# ExampleComponent
Package: @thinker-core/mantine-core
Import: import { ExampleComponent } from '@thinker-core/mantine-core';

## Usage

```tsx
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>
    </>
  );
}
```


## Variants

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

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


## With label

```tsx
import { ExampleComponent, Box, Anchor } from '@thinker-core/mantine-core';
import { MagnifyingGlassIcon as IconSearch } from '@phosphor-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>
        }
      />
    </>
  );
}
```


## Sizes

```tsx
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} />
    </>
  );
}
```


## Vertical orientation

```tsx
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>
  );
}
```



#### Props

**ExampleComponent props**

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| color | MantineColor | - | Key of `theme.colors` or any valid CSS color value, by default value depends on color scheme |
| label | React.ReactNode | - | ExampleComponent label, visible only when `orientation` is `horizontal` |
| labelPosition | "center" \| "left" \| "right" | - | Controls label position, `'center'` by default |
| orientation | "horizontal" \| "vertical" | - | Controls orientation, `'horizontal'` by default |
| size | MantineSize \| number | - | Controls width/height (depends on orientation), `'xs'` by default |
| ts | StyleProp<"h1" \| "h2" \| "h3" \| "h4" \| "h5" \| "h6" \| "d2" \| "d1" \| "d3" \| "d4" \| "d5" \| "d6" \| "d7" \| "d8" \| "d9" \| "d10" \| "h7" \| "h8" \| "h9" \| "h10" \| "t2" \| "t1" \| "t3" \| "t4" \| "t5" \| "t6" \| ... 63 more ... \| "lu10"> | - | TextStyle, custom text styles that will override fz, lh, fw, td |