@velocitycareerlabs/vc-renderer-sample 1.25.0-dev-build.158b56827

package/src/components/Sidebar/index.tsx

@@ -0,0 +1,61 @@
+import {
+  Box,
+  Typography,
+  List,
+  ListItem,
+  ListItemIcon,
+  ListItemText,
+} from '@mui/material';
+import CheckCircleIcon from '@mui/icons-material/CheckCircle';
+
+const items = [
+  'Issuer verified',
+  'Data secured',
+  'Issued to Olivia Hafez',
+  'Data secured',
+  'In validity period',
+];
+
+export const Sidebar = () => {
+  return (
+    <Box sx={styles.sidebarContainer}>
+      <List>
+        {items.map((text, index) => (
+          <ListItem key={`${index + text}`} disableGutters>
+            <ListItemIcon sx={styles.listItemIconContainer}>
+              <CheckCircleIcon sx={styles.listItemIcon} />
+            </ListItemIcon>
+            <ListItemText
+              primary={
+                <Typography variant="body1" sx={styles.listItemText}>
+                  {text}
+                </Typography>
+              }
+            />
+          </ListItem>
+        ))}
+      </List>
+    </Box>
+  );
+};
+
+const styles = {
+  sidebarContainer: {
+    backgroundColor: '#F5F7FA',
+    borderRadius: '8px',
+    padding: '16px',
+    margin: '56px 40px 0 0',
+    width: '189px',
+    boxShadow: '0px 4px 10px rgba(0, 0, 0, 0.1)',
+  },
+  listItemText: {
+    color: '#333',
+    fontSize: '16px',
+  },
+  listItemIconContainer: {
+    minWidth: '35px',
+  },
+  listItemIcon: {
+    color: '#4CAF50',
+  },
+};

package/src/components/SummaryFooter/index.tsx

@@ -0,0 +1,23 @@
+import { Box, Button } from '@mui/material';
+import { Share } from 'assets';
+
+export const SummaryFooter = () => {
+  return (
+    <Box>
+      <Button variant="text" color="info" sx={styles.shareButton}>
+        <Share width={13} height={14} />
+        Share
+      </Button>
+    </Box>
+  );
+};
+
+const styles = {
+  shareButton: {
+    textTransform: 'none',
+    fontSize: '14px',
+    minWidth: '50px',
+    justifyContent: 'space-between',
+    padding: '0',
+  },
+};

package/src/components/VcDetailsFooter/index.tsx

@@ -0,0 +1,15 @@
+import { Box, IconButton } from '@mui/material';
+import { Trash, RoundShare } from '../../assets';
+
+export const VcDetailsFooter = () => {
+  return (
+    <Box justifyContent="flex-end" pr={4} sx={{ display: 'flex' }}>
+      <IconButton color="info">
+        <Trash width={52} height={52} />
+      </IconButton>
+      <IconButton color="info">
+        <RoundShare width={52} height={52} />
+      </IconButton>
+    </Box>
+  );
+};

package/src/index.css

@@ -0,0 +1,13 @@
+body {
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+code {
+  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+    monospace;
+}

package/src/index.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import './index.css';
+import App from './App';
+
+const root = ReactDOM.createRoot(
+  document.getElementById('root') as HTMLElement
+);
+root.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);