Gerador NIF na APP

geradoresfe/src/components/GeradorNIF.tsx

@@ -0,0 +1,75 @@
+import * as React from 'react';
+import Box from '@mui/material/Box';
+import Button from '@mui/material/Button';
+import Container from '@mui/material/Container';
+import Stack from '@mui/material/Stack';
+import Typography from '@mui/material/Typography';
+
+import Card from '@mui/material/Card';
+import CardContent from '@mui/material/CardContent';
+import CardActions from '@mui/material/CardActions/CardActions';
+import GeradorService from '../Api/GeradorApi';
+import { useEffect, useState } from 'react';
+
+
+
+export default function GeradorNIF() {
+    const [nif, setNIF] = useState<any[]>([]);
+
+    const fetchNif = async () => {
+        const nif = await GeradorService.GenerateNIF(null);
+        setNIF(nif);
+    }
+
+    useEffect(() => {
+        fetchNif();
+    }, []);
+
+
+
+    return (
+        <Box
+            id="GeradorNIF"
+            sx={(theme) => ({
+                width: '100%',
+                backgroundImage:
+                    theme.palette.mode === 'light'
+                        ? 'radial-gradient(ellipse 80% 50% at 50% -20%, hsl(210, 100%, 90%), transparent)'
+                        : 'radial-gradient(ellipse 80% 50% at 50% -20%, hsl(210, 100%, 16%), transparent)',
+                backgroundRepeat: 'no-repeat',
+            })}
+        >
+            <Container
+                sx={{
+                    display: 'flex',
+                    flexDirection: 'column',
+                    alignItems: 'center',
+                    pt: { xs: 14, sm: 20 },
+                    pb: { xs: 8, sm: 12 },
+                }}
+            >
+                <Stack
+                    spacing={2}
+                    alignItems="center"
+                    useFlexGap
+                    sx={{ width: { xs: '100%', sm: '70%' } }}
+                >
+                    <Card sx={{ minWidth: 275 }}>
+                        <CardContent>
+                            <Typography sx={{ fontSize: 14 }} color="text.secondary" gutterBottom>
+                                NIFC
+                            </Typography>
+                            <Typography sx={{ mb: 1.5 }} color="text.secondary">
+                                {nif}
+                            </Typography>
+                        </CardContent>
+                        <CardActions>
+                            <Button size="small" onClick={fetchNif}>Gerar</Button>
+                        </CardActions>
+                    </Card>
+                    );
+                </Stack>
+            </Container>
+        </Box>
+    );
+}