React.createElement();
12 | }\`;
13 |
14 | function Demo() {
15 | return {codeForPreviousDemo};
16 | }
17 | `;
18 |
19 | const codeForPreviousDemo = `
20 | import { Code } from '@mantine/core';
21 |
22 | function Demo() {
23 | return React.createElement();
24 | }`;
25 |
26 | function Demo() {
27 | return {codeForPreviousDemo};
28 | }
29 |
30 | export const codeDemo: MantineDemo = {
31 | type: 'code',
32 | code,
33 | component: Demo,
34 | };
35 |
--------------------------------------------------------------------------------
/src/components/custom/components-demo/buttons/close-button-demo.tsx:
--------------------------------------------------------------------------------
1 | import { CloseButton } from '@mantine/core';
2 | import { MantineDemo } from '../../../mantine/demo';
3 |
4 | const code = `
5 | import { CloseButton } from '@mantine/core';
6 |
7 | function Demo() {
8 | return
19 |
21 | setColorScheme(computedColorScheme === "light" ? "dark" : "light")
22 | }
23 | variant="default"
24 | size="lg"
25 | aria-label="Toggle color scheme"
26 | >
27 |
30 |
31 | );
32 | };
33 |
34 | export default ColorSchemeSwitch;
35 |
--------------------------------------------------------------------------------
/src/components/custom/components-demo/buttons/button-demo.tsx:
--------------------------------------------------------------------------------
1 | import { Button } from '@mantine/core';
2 | import { interactiveVariantsControl } from '../../../../utils/variants-data';
3 | import { MantineDemo } from '../../../mantine/demo';
4 |
5 | const code = `
6 | import { Button } from '@mantine/core';
7 |
8 | function Demo() {
9 | return {children}
25 | {children}
35 |
7 |
12 | );
13 | }
14 |
15 | const code = (props: any) => `
16 | import { Skeleton } from '@mantine/core';
17 |
18 | function Demo() {
19 | return (
20 | <>
21 |
25 |
33 | {children}
34 |
35 |
36 |
53 | );
54 | }
55 |
--------------------------------------------------------------------------------
/src/components/custom/components-demo/inputs/switch-demo.tsx:
--------------------------------------------------------------------------------
1 | import { Switch } from '@mantine/core';
2 | import { MantineDemo } from '../../../mantine/demo';
3 |
4 | const code = `
5 | import { Switch } from '@mantine/core';
6 |
7 |
8 | function Demo() {
9 | return (
10 |
37 | {title && (
38 |
52 |
39 |
40 | {title}
41 |
42 | {description && (
43 |
44 | {description}
45 |
46 | )}
47 |
48 | )}
49 |
50 | {controls}
51 | 23 | Life is like an npm install – you never know what you are going to get. 24 |25 | ); 26 | } 27 | 28 | export const blockquoteDemo: MantineDemo = { 29 | type: 'configurator', 30 | component: Wrapper, 31 | code, 32 | centered: true, 33 | maxWidth: 380, 34 | controls: [ 35 | { type: 'color', prop: 'color', initialValue: '', libraryValue: '' }, 36 | { type: 'size', prop: 'radius', initialValue: 'sm', libraryValue: 'sm' }, 37 | { 38 | type: 'number', 39 | prop: 'iconSize', 40 | initialValue: 48, 41 | min: 30, 42 | max: 60, 43 | step: 1, 44 | libraryValue: 48, 45 | }, 46 | ], 47 | }; 48 | -------------------------------------------------------------------------------- /src/app/about/page.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | 3 | import { AboutPage } from "@/components/custom/about/about"; 4 | import PageLayout from "@/components/layouts/page-layout"; 5 | import { Box, Button, Group, Space, Stack } from "@mantine/core"; 6 | 7 | export default function Page() { 8 | return ( 9 |
18 | {visible &&
37 | {visible &&
8 |
9 |
11 |
12 | );
13 | }
14 |
15 | const code = `
16 | import { ThemeIcon } from '@mantine/core';
17 | import { IconPhoto } from '@tabler/icons-react';
18 |
19 | function Demo() {
20 | return (
21 |
20 |
43 | -
7 |
7 |
19 | We Butter the Bread with Butter was founded in 2007 by Marcel Neumann, who was originally
20 | guitarist for Martin Kesici's band, and Tobias Schultka. The band was originally meant as
21 | a joke, but progressed into being a more serious musical duo. The name for the band has no
22 | particular meaning, although its origins were suggested from when the two original members
23 | were driving in a car operated by Marcel Neumann and an accident almost occurred. Neumann
24 | found Schultka "so funny that he briefly lost control of the vehicle." Many of their
25 | songs from this point were covers of German folk tales and nursery rhymes.
26 |
27 |
28 | );
29 |
30 | function Wrapper(props: Partial
13 | Strictly Necessary
14 |
15 | These cookies are essential in order to use the website and use its features.
16 |
17 |
18 |
22 | Functional Cookies
23 |
24 | These cookies allow the website to provide personalized functionality.
25 |
26 |
27 |
31 | Performance Cookies
32 |
33 | These cookies help to improve the performance of the website.
34 |
35 |
36 |
22 |
56 | );
57 | }
58 |
--------------------------------------------------------------------------------
/src/components/custom/theme-example-cards/report-issue.tsx:
--------------------------------------------------------------------------------
1 | import { Button, Card, Group, Select, Stack, Text, TextInput, Textarea, Title } from "@mantine/core";
2 | import * as React from "react";
3 |
4 | export function CardsReportIssue() {
5 | const id = React.useId();
6 |
7 | return (
8 |
36 | {state === "preview" ? (
37 |
43 |
44 |
45 |
47 |
48 |
49 | ) : (
50 |
51 |
53 | )}
54 |
55 |