'init'

app/components/RequestsButton/RequestsButton.module.css

@@ -0,0 +1,3 @@
+.btn {
+    cursor: pointer;
+}

app/components/RequestsButton/RequestsButton.tsx

@@ -0,0 +1,40 @@
+import { Box, Flex, Text } from "@mantine/core";
+import { IconChevronLeft, IconChevronRight } from "@tabler/icons-react";
+import classes from './RequestsButton.module.css'
+
+interface RequestsButtonProps {
+    count: number;
+    onClick?: () => void;
+    mode: 'all' | 'requests';
+}
+
+export function RequestsButton(props : RequestsButtonProps) {
+    return (
+        <>
+            {props.mode == 'all' && <>
+                <Box pl={'sm'} pb={'xs'} pr={'xs'} onClick={props.onClick} className={classes.btn}>
+                    <Flex align={'center'} justify={'space-between'} onClick={() => {}}>
+                        <Text fz={12} c={'blue'} fw={'bold'} ta={'center'}>
+                            Requests +{props.count}
+                        </Text>
+                        <Flex align={'center'} gap={'sm'}>
+                            <IconChevronRight size={14} stroke={1.5} />
+                        </Flex>
+                    </Flex>
+                </Box>
+            </>}
+            {props.mode == 'requests' && <>
+                <Box pl={'sm'} pb={'xs'} pr={'xs'} onClick={props.onClick} className={classes.btn}>
+                    <Flex align={'center'} justify={'space-between'} onClick={() => {}}>
+                        <Text fz={12} c={'red'} fw={'bold'} ta={'center'}>
+                            Back to all chats
+                        </Text>
+                        <Flex align={'center'} gap={'sm'}>
+                            <IconChevronLeft size={14} stroke={1.5} />
+                        </Flex>
+                    </Flex>
+                </Box>            
+            </>}
+        </>
+    )
+}