initial commit

2025-08-05 12:35:40 +07:00
commit fffa2ead5c
1069 changed files with 118056 additions and 0 deletions
@@ -0,0 +1,123 @@
+'use client'
+
+// MUI Imports
+import Card from '@mui/material/Card'
+import CardHeader from '@mui/material/CardHeader'
+import CardContent from '@mui/material/CardContent'
+import Typography from '@mui/material/Typography'
+import Checkbox from '@mui/material/Checkbox'
+import MenuItem from '@mui/material/MenuItem'
+import Grid from '@mui/material/Grid2'
+import Button from '@mui/material/Button'
+
+// Component Imports
+import Link from '@components/Link'
+import Form from '@components/Form'
+import CustomTextField from '@core/components/mui/TextField'
+
+// Style Imports
+import tableStyles from '@core/styles/table.module.css'
+
+type TableDataType = {
+  type: string
+  app: boolean
+  email: boolean
+  browser: boolean
+}
+
+// Vars
+const tableData: TableDataType[] = [
+  {
+    app: true,
+    email: true,
+    browser: true,
+    type: 'New for you'
+  },
+  {
+    app: true,
+    email: true,
+    browser: true,
+    type: 'Account activity'
+  },
+  {
+    app: false,
+    email: true,
+    browser: true,
+    type: 'A new browser used to sign in'
+  },
+  {
+    app: false,
+    email: true,
+    browser: false,
+    type: 'A new device is linked'
+  }
+]
+
+const Notifications = () => {
+  return (
+    <Card>
+      <CardHeader
+        title='Recent Devices'
+        subheader={
+          <>
+            We need permission from your browser to show notifications.
+            <Link className='text-primary'> Request Permission</Link>
+          </>
+        }
+      />
+      <Form>
+        <div className='overflow-x-auto'>
+          <table className={tableStyles.table}>
+            <thead>
+              <tr>
+                <th>Type</th>
+                <th>Email</th>
+                <th>Browser</th>
+                <th>App</th>
+              </tr>
+            </thead>
+            <tbody className='border-be'>
+              {tableData.map((data, index) => (
+                <tr key={index}>
+                  <td>
+                    <Typography color='text.primary'>{data.type}</Typography>
+                  </td>
+                  <td>
+                    <Checkbox defaultChecked={data.email} />
+                  </td>
+                  <td>
+                    <Checkbox defaultChecked={data.browser} />
+                  </td>
+                  <td>
+                    <Checkbox defaultChecked={data.app} />
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+        <CardContent>
+          <Typography className='mbe-6 font-medium'>When should we send you notifications?</Typography>
+          <Grid container spacing={6}>
+            <Grid size={{ xs: 12, sm: 6, md: 4 }}>
+              <CustomTextField select fullWidth defaultValue='online'>
+                <MenuItem value='online'>Only when I&#39;m online</MenuItem>
+                <MenuItem value='anytime'>Anytime</MenuItem>
+              </CustomTextField>
+            </Grid>
+            <Grid size={{ xs: 12 }} className='flex gap-4 flex-wrap'>
+              <Button variant='contained' type='submit'>
+                Save Changes
+              </Button>
+              <Button variant='tonal' color='secondary' type='reset'>
+                Discard
+              </Button>
+            </Grid>
+          </Grid>
+        </CardContent>
+      </Form>
+    </Card>
+  )
+}
+
+export default Notifications