59 lines
2.7 KiB
TypeScript
59 lines
2.7 KiB
TypeScript
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>
|
|
</>
|
|
);
|
|
} |