'init'

app/views/CreateGroup/CreateGroup.tsx

@@ -0,0 +1,59 @@
+import { Breadcrumbs } from "@/app/components/Breadcrumbs/Breadcrumbs";
+import { InternalScreen } from "@/app/components/InternalScreen/InternalScreen";
+import { SettingsInput } from "@/app/components/SettingsInput/SettingsInput";
+import { Flex, Text } from "@mantine/core";
+import { IconChevronRight } from "@tabler/icons-react";
+import { useState } from "react";
+import animationData from './users.json';
+import Lottie from "lottie-react";
+import { AnimatedButton } from "@/app/components/AnimatedButton/AnimatedButton";
+import { useGroups } from "@/app/providers/DialogProvider/useGroups";
+
+export function CreateGroup() {
+    const [title, setTitle] = useState<string>("");
+    const [description, setDescription] = useState<string>("");
+    const {createGroup, loading} = useGroups();
+
+    return (
+        <>
+            <Breadcrumbs text="Create group"></Breadcrumbs>
+            <InternalScreen>
+                <Flex align={'center'} direction={'column'} justify={'center'} gap={8} mb={'md'}>
+                    <Lottie
+                        style={{ width: 80, height: 80 }}
+                        animationData={animationData}
+                        loop={true}
+                    ></Lottie>
+                    <Text fz={20} fw={600}>
+                        Create group chat
+                    </Text>
+                </Flex>
+                <SettingsInput.Default
+                    hit="Group title"
+                    placeholder="ex. Family Chat"
+                    value={title}
+                    onChange={(e) => setTitle(e.target.value)}
+                ></SettingsInput.Default>
+                <Text fz={10} mt={3} c={'gray'} pl={'xs'} pr={'xs'}>
+                    Group title, e.g., "Family Chat", helps members identify the group easily. <strong>Title cannot be changed after creation.</strong>
+                </Text>
+                <SettingsInput.Default
+                    hit="Description"
+                    mt={'sm'}
+                    value={description}
+                    placeholder="ex. A group for family members"
+                    onChange={(e) => setDescription(e.target.value)}
+                ></SettingsInput.Default>
+                <Text fz={10} mt={3} c={'gray'} pl={'xs'} pr={'xs'}>
+                    Group description, e.g., "A group for family members", helps members understand the purpose of the group. Not required.
+                </Text>
+                <AnimatedButton rightSection={
+                    <IconChevronRight size={14}></IconChevronRight>
+                } mt={'lg'} fullWidth animated={[
+                    '#0078ff',
+                    '#2ea6ff'
+                ]} onClick={() => createGroup(title, description)} loading={loading}>Create</AnimatedButton>
+            </InternalScreen>
+        </>
+    );
+}