Feat/identifiers page (#36)

* implement identifier list

* add inter font-family

package.json

@@ -18,6 +18,7 @@
   "dependencies": {
     "@emotion/react": "^11.11.4",
     "@emotion/styled": "^11.11.5",
+    "@fontsource/inter": "^5.0.19",
     "@fontsource/roboto": "^5.0.13",
     "@mui/icons-material": "^5.16.0",
     "@mui/material": "^5.16.0",

src/index.css

@@ -1,3 +1,50 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+@font-face {
+  font-family: Inter;
+  font-weight: normal;
+  font-style: normal;
+  font-display: swap;
+  src: url('../lib/fonts/inter/Inter-VariableFont_slnt\,wght.ttf')
+    format('truetype');
+}
+
+@font-face {
+  font-family: Inter;
+  font-weight: bold;
+  font-style: bold;
+  font-display: swap;
+  src: url('../lib/fonts/inter/Inter-Bold.ttf') format('truetype');
+}
+
+@font-face {
+  font-family: Inter;
+  font-weight: medium;
+  font-style: medium;
+  font-display: swap;
+  src: url('../lib/fonts/inter/Inter-Medium.ttf') format('truetype');
+}
+
+@font-face {
+  font-family: Inter;
+  font-weight: light;
+  font-style: light;
+  font-display: swap;
+  src: url('../lib/fonts/inter/Inter-Light.ttf') format('truetype');
+}
+
+@font-face {
+  font-family: Roboto;
+  font-weight: normal;
+  font-style: normal;
+  font-display: swap;
+  src: url('../lib/fonts/roboto/roboto-v29-latin-regular.woff')
+    format('truetype');
+}
+
+*,
+body {
+  font-family: Inter;
+}

src/main.tsx

@@ -7,11 +7,6 @@ import { ThemeProvider } from '@mui/material/styles';
 import CssBaseline from '@mui/material/CssBaseline';
 import theme from "./libs/theme";
 
-import '@fontsource/roboto/300.css';
-import '@fontsource/roboto/400.css';
-import '@fontsource/roboto/500.css';
-import '@fontsource/roboto/700.css';
-
 const queryClient = new QueryClient({
   defaultOptions: {
     queries: {

src/pages/Identifiers/Identifiers.tsx

@@ -1,8 +1,77 @@
+import { List, ListItem, ListItemText, ListItemSecondaryAction, Button, Typography, Divider, Paper, Box, Avatar } from '@mui/material';
+import VerifiedIcon from '@mui/icons-material/Verified';
+import { FaDiscord, FaTelegram, FaGoogle } from 'react-icons/fa';
+
+const identifiers = [
+  { name: 'Discord', icon: FaDiscord, verified: true, color: 'text-blue-500' },
+  { name: 'Telegram', icon: FaTelegram, verified: false, color: 'text-blue-400' },
+  { name: 'Google', icon: FaGoogle, verified: false, color: 'text-red-500' },
+];
+
+const handleRevoke = (identifier: string) => {
+  console.log(`Revoke attestation for ${identifier}`);
+};
+
+const handleConnect = (identifier: string) => {
+  console.log(`Connect identifier for ${identifier}`);
+};
 
 export function Identifiers() {
   return (
     <div>
-      dsajk
+      <Typography variant="h6" gutterBottom>
+        Identifiers
+      </Typography>
+      <List>
+        <ListItem>
+          <ListItemText primary="Identifier" />
+          <ListItemSecondaryAction>
+            <Typography variant="body2" style={{ marginRight: 40 }}>
+              Actions
+            </Typography>
+          </ListItemSecondaryAction>
+        </ListItem>
+        <Divider />
+        {identifiers.map((identifier, index) => (
+          <Box key={index} mb={2}>
+            <Paper elevation={1} className='rounded-xl py-2'>
+              <ListItem>
+                <Avatar>
+                  <identifier.icon size={28} className={`${identifier.verified ? 'text-black' : 'text-white'}`} />
+                </Avatar>
+                <ListItemText
+                  primary={
+                    <div className="flex items-center">
+                      {identifier.verified && <VerifiedIcon className={"text-blue-400 mr-2"} />}
+                      {identifier.name}
+                    </div>
+                  }
+                  style={{ marginLeft: 16 }}
+                />
+                <ListItemSecondaryAction>
+                  {identifier.verified ? (
+                    <Button
+                      variant="outlined"
+                      color="error"
+                      onClick={() => handleRevoke(identifier.name)}
+                    >
+                      Revoke
+                    </Button>
+                  ) : (
+                    <Button
+                      variant="contained"
+                      color="primary"
+                      onClick={() => handleConnect(identifier.name)}
+                    >
+                      Connect
+                    </Button>
+                  )}
+                </ListItemSecondaryAction>
+              </ListItem>
+            </Paper>
+          </Box>
+        ))}
+      </List>
     </div>
   );
 }