) {
+ return (
+ console.log("accepted files", files)}
+ onReject={(files) => console.log("rejected files", files)}
+ maxSize={5 * 1024 ** 2}
+ accept={IMAGE_MIME_TYPE}
+ {...props}
+ >
+
+
+
+
+
+
+
+
+
+
+ Drag images here or click to select files
+
+
+ Attach as many files as you like, each file should not exceed 5mb
+
+
+
+
+ );
+}
diff --git a/examples/mantine/src/components/MyModal.tsx b/examples/mantine/src/components/MyModal.tsx
new file mode 100644
index 0000000..228c714
--- /dev/null
+++ b/examples/mantine/src/components/MyModal.tsx
@@ -0,0 +1,22 @@
+"use client";
+
+import { Button, Text } from "@mantine/core";
+import { modals } from "@mantine/modals";
+
+export default function MyModal() {
+ const openModal = () =>
+ modals.openConfirmModal({
+ title: "Please confirm your action",
+ children: (
+
+ This action is so important that you are required to confirm it with a
+ modal. Please click one of these buttons to proceed.
+
+ ),
+ labels: { confirm: "Confirm", cancel: "Cancel" },
+ onCancel: () => console.log("Cancel"),
+ onConfirm: () => console.log("Confirmed"),
+ });
+
+ return Open confirm modal ;
+}
diff --git a/examples/mantine/src/components/MyNavigationProgress.tsx b/examples/mantine/src/components/MyNavigationProgress.tsx
new file mode 100644
index 0000000..0a64058
--- /dev/null
+++ b/examples/mantine/src/components/MyNavigationProgress.tsx
@@ -0,0 +1,20 @@
+"use client";
+import { Button, Group } from "@mantine/core";
+import { NavigationProgress, nprogress } from "@mantine/nprogress";
+
+export default function MyNavigationProgress() {
+ return (
+ <>
+
+ nprogress.start()}>Start
+ nprogress.stop()}>Stop
+ nprogress.increment()}>Increment
+ nprogress.decrement()}>Decrement
+ nprogress.set(50)}>Set 50%
+ nprogress.reset()}>Reset
+ nprogress.complete()}>Complete
+
+
+ );
+}
diff --git a/examples/mantine/src/components/MyNotification.tsx b/examples/mantine/src/components/MyNotification.tsx
new file mode 100644
index 0000000..74f885d
--- /dev/null
+++ b/examples/mantine/src/components/MyNotification.tsx
@@ -0,0 +1,19 @@
+"use client";
+
+import { Button } from "@mantine/core";
+import { notifications } from "@mantine/notifications";
+
+export default function MyNotification() {
+ return (
+
+ notifications.show({
+ title: "Default notification",
+ message: "Do not forget to star Mantine on GitHub! 🌟",
+ })
+ }
+ >
+ Show notification
+
+ );
+}
diff --git a/examples/mantine/src/components/MyRichTextEditor.tsx b/examples/mantine/src/components/MyRichTextEditor.tsx
new file mode 100644
index 0000000..6f68dc5
--- /dev/null
+++ b/examples/mantine/src/components/MyRichTextEditor.tsx
@@ -0,0 +1,80 @@
+"use client";
+
+import { Link, RichTextEditor } from "@mantine/tiptap";
+import Highlight from "@tiptap/extension-highlight";
+import SubScript from "@tiptap/extension-subscript";
+import Superscript from "@tiptap/extension-superscript";
+import TextAlign from "@tiptap/extension-text-align";
+import Underline from "@tiptap/extension-underline";
+import { useEditor } from "@tiptap/react";
+import StarterKit from "@tiptap/starter-kit";
+
+const content =
+ 'Welcome to Mantine rich text editor RichTextEditor component focuses on usability and is designed to be as simple as possible to bring a familiar editing experience to regular users. RichTextEditor is based on Tiptap.dev and supports all of its features:
General text formatting: bold , italic , underline , strike-through Headings (h1-h6) Sub and super scripts (<sup /> and <sub /> tags) Ordered and bullet lists Text align And all other extensions
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/examples/mantine/src/components/MySpotlight.tsx b/examples/mantine/src/components/MySpotlight.tsx
new file mode 100644
index 0000000..f1a5c4b
--- /dev/null
+++ b/examples/mantine/src/components/MySpotlight.tsx
@@ -0,0 +1,62 @@
+"use client";
+
+import { Button, rem } from "@mantine/core";
+import { Spotlight, spotlight, SpotlightActionData } from "@mantine/spotlight";
+import {
+ IconDashboard,
+ IconFileText,
+ IconHome,
+ IconSearch,
+} from "@tabler/icons-react";
+
+const actions: SpotlightActionData[] = [
+ {
+ id: "home",
+ label: "Home",
+ description: "Get to home page",
+ onClick: () => console.log("Home"),
+ leftSection: (
+ Open spotlight
+
+
+
+
+ );
+}
diff --git a/examples/mantine/src/components/forms/MyFormSimple.tsx b/examples/mantine/src/components/forms/MyFormSimple.tsx
new file mode 100644
index 0000000..99cd6a5
--- /dev/null
+++ b/examples/mantine/src/components/forms/MyFormSimple.tsx
@@ -0,0 +1,40 @@
+"use client";
+import { Button, Checkbox, Group, TextInput } from "@mantine/core";
+import { useForm } from "@mantine/form";
+
+export default function MyFormSimple() {
+ const form = useForm({
+ mode: "uncontrolled",
+ initialValues: {
+ email: "",
+ termsOfService: false,
+ },
+
+ validate: {
+ email: (value) => (/^\S+@\S+$/.test(value) ? null : "Invalid email"),
+ },
+ });
+
+ return (
+
+ );
+}
diff --git a/examples/mantine/src/pages/about.tsx b/examples/mantine/src/pages/about.tsx
new file mode 100644
index 0000000..8107968
--- /dev/null
+++ b/examples/mantine/src/pages/about.tsx
@@ -0,0 +1,26 @@
+import { Link } from "@lazarv/react-server/navigation";
+
+const getData = async () => {
+ const data = {
+ title: "About",
+ headline: "About @lazarv/react-server",
+ body: "The easiest way to build a React app with server-side rendering.",
+ };
+
+ return data;
+};
+
+export default async function AboutPage() {
+ const data = await getData();
+
+ return (
+
+
{data.title}
+
{data.headline}
+
{data.body}
+
+ Return home
+
+
+
{data.title}
+ {data.headline}
+
+
{data.title}
+ {data.headline}
+
+
{data.title}
+ {data.headline}
+
+
{data.title}
+ {data.headline}
+
+
{data.title}
+ {data.headline}
+
+
{data.title}
+
{data.headline}
+
{data.body}
+
+
+
+
+ About page
+
+
DEMO BUTTTON 2
+
+
+
+
+
+ Layout
+ {children}
+
+
+
+
+ );
+}
diff --git a/examples/mantine/src/pages/modalsmanager.tsx b/examples/mantine/src/pages/modalsmanager.tsx
new file mode 100644
index 0000000..56a6b19
--- /dev/null
+++ b/examples/mantine/src/pages/modalsmanager.tsx
@@ -0,0 +1,33 @@
+import { Link } from "@lazarv/react-server/navigation";
+
+import MyModal from "../components/MyModal";
+
+export default async function ModalsManagerPage() {
+ const data = await getData();
+
+ return (
+
+
{data.title}
+ {data.headline}
+
+
{data.title}
+ {data.headline}
+
+
{data.title}
+ {data.headline}
+
+
{data.title}
+ {data.headline}
+
+
{data.title}
+ {data.headline}
+