s
This commit is contained in:
Mitchell Magro
parent
2fee3669b6
commit
e14f63684f
@ -1,36 +1,2 @@
|
||||
This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
|
||||
|
||||
## Getting Started
|
||||
|
||||
First, run the development server:
|
||||
|
||||
```bash
|
||||
npm run dev
|
||||
# or
|
||||
yarn dev
|
||||
# or
|
||||
pnpm dev
|
||||
# or
|
||||
bun dev
|
||||
```
|
||||
|
||||
Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
|
||||
|
||||
You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
|
||||
|
||||
This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
|
||||
|
||||
## Learn More
|
||||
|
||||
To learn more about Next.js, take a look at the following resources:
|
||||
|
||||
- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
|
||||
- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
|
||||
|
||||
You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
|
||||
|
||||
## Deploy on Vercel
|
||||
|
||||
The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
|
||||
|
||||
Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.
|
||||
# paymentIQ
|
||||
Payment IQ Back Office
|
||||
|
||||
80
payment-iq/app/components/Sidebar.tsx
Normal file
80
payment-iq/app/components/Sidebar.tsx
Normal file
@ -0,0 +1,80 @@
|
||||
// components/SidebarLayout.tsx
|
||||
import React from 'react';
|
||||
import { styled } from '@mui/system';
|
||||
import { Box, Typography, Button } from '@mui/material';
|
||||
|
||||
// Sidebar Container (styled using MUI System)
|
||||
export const Sidebar = styled('div')(({ theme }) => ({
|
||||
width: '240px',
|
||||
backgroundColor: theme.palette.primary.main,
|
||||
color: theme.palette.common.white,
|
||||
padding: theme.spacing(2),
|
||||
height: '100vh',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
justifyContent: 'space-between',
|
||||
}));
|
||||
|
||||
// Main Content Area
|
||||
export const MainContent = styled('div')(({ theme }) => ({
|
||||
marginLeft: '240px',
|
||||
padding: theme.spacing(3),
|
||||
backgroundColor: theme.palette.background.paper,
|
||||
minHeight: '100vh',
|
||||
}));
|
||||
|
||||
// Sidebar Navigation Items
|
||||
export const SidebarItem = styled('div')(({ theme }) => ({
|
||||
padding: theme.spacing(1.5),
|
||||
cursor: 'pointer',
|
||||
'&:hover': {
|
||||
backgroundColor: theme.palette.primary.dark,
|
||||
},
|
||||
}));
|
||||
|
||||
// Page Wrapper that holds Sidebar and Content
|
||||
export const LayoutWrapper = styled('div')({
|
||||
display: 'flex',
|
||||
flexDirection: 'row',
|
||||
height: '100vh',
|
||||
});
|
||||
|
||||
// Sidebar Header
|
||||
export const SidebarHeader = styled('div')(({ theme }) => ({
|
||||
marginBottom: theme.spacing(2),
|
||||
fontSize: '20px',
|
||||
fontWeight: 600,
|
||||
}));
|
||||
|
||||
const SidebarLayout = () => {
|
||||
return (
|
||||
<LayoutWrapper>
|
||||
<Sidebar>
|
||||
<SidebarHeader>Dashboard</SidebarHeader>
|
||||
<SidebarItem>
|
||||
<Typography variant="body1">Home</Typography>
|
||||
</SidebarItem>
|
||||
<SidebarItem>
|
||||
<Typography variant="body1">Settings</Typography>
|
||||
</SidebarItem>
|
||||
<SidebarItem>
|
||||
<Typography variant="body1">Profile</Typography>
|
||||
</SidebarItem>
|
||||
<Button variant="contained" color="secondary" fullWidth>
|
||||
Logout
|
||||
</Button>
|
||||
</Sidebar>
|
||||
|
||||
<MainContent>
|
||||
<Typography variant="h4" gutterBottom>
|
||||
Welcome to the Dashboard!
|
||||
</Typography>
|
||||
<Typography variant="body1">
|
||||
This is your main content area.
|
||||
</Typography>
|
||||
</MainContent>
|
||||
</LayoutWrapper>
|
||||
);
|
||||
}
|
||||
|
||||
export default SidebarLayout;
|
||||
@ -1,95 +1,6 @@
|
||||
import Image from "next/image";
|
||||
import styles from "./page.module.css";
|
||||
import SidebarLayout from '@/app/components/Sidebar';
|
||||
|
||||
export default function Home() {
|
||||
return (
|
||||
<div className={styles.page}>
|
||||
<main className={styles.main}>
|
||||
<Image
|
||||
className={styles.logo}
|
||||
src="/next.svg"
|
||||
alt="Next.js logo"
|
||||
width={180}
|
||||
height={38}
|
||||
priority
|
||||
/>
|
||||
<ol>
|
||||
<li>
|
||||
Get started by editing <code>app/page.tsx</code>.
|
||||
</li>
|
||||
<li>Save and see your changes instantly.</li>
|
||||
</ol>
|
||||
|
||||
<div className={styles.ctas}>
|
||||
<a
|
||||
className={styles.primary}
|
||||
href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<Image
|
||||
className={styles.logo}
|
||||
src="/vercel.svg"
|
||||
alt="Vercel logomark"
|
||||
width={20}
|
||||
height={20}
|
||||
/>
|
||||
Deploy now
|
||||
</a>
|
||||
<a
|
||||
href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className={styles.secondary}
|
||||
>
|
||||
Read our docs
|
||||
</a>
|
||||
</div>
|
||||
</main>
|
||||
<footer className={styles.footer}>
|
||||
<a
|
||||
href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<Image
|
||||
aria-hidden
|
||||
src="/file.svg"
|
||||
alt="File icon"
|
||||
width={16}
|
||||
height={16}
|
||||
/>
|
||||
Learn
|
||||
</a>
|
||||
<a
|
||||
href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<Image
|
||||
aria-hidden
|
||||
src="/window.svg"
|
||||
alt="Window icon"
|
||||
width={16}
|
||||
height={16}
|
||||
/>
|
||||
Examples
|
||||
</a>
|
||||
<a
|
||||
href="https://nextjs.org?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<Image
|
||||
aria-hidden
|
||||
src="/globe.svg"
|
||||
alt="Globe icon"
|
||||
width={16}
|
||||
height={16}
|
||||
/>
|
||||
Go to nextjs.org →
|
||||
</a>
|
||||
</footer>
|
||||
</div>
|
||||
);
|
||||
return <SidebarLayout />;
|
||||
}
|
||||
|
||||
75
payment-iq/config/theme.ts
Normal file
75
payment-iq/config/theme.ts
Normal file
@ -0,0 +1,75 @@
|
||||
import { createTheme } from '@mui/material/styles';
|
||||
|
||||
// Define your color palette
|
||||
const lightPalette = {
|
||||
primary: {
|
||||
main: '#1976d2', // Blue color
|
||||
},
|
||||
secondary: {
|
||||
main: '#d32f2f', // Red color
|
||||
},
|
||||
background: {
|
||||
default: '#fafafa',
|
||||
paper: '#ffffff',
|
||||
},
|
||||
text: {
|
||||
primary: '#000000',
|
||||
secondary: '#555555',
|
||||
},
|
||||
};
|
||||
|
||||
const darkPalette = {
|
||||
primary: {
|
||||
main: '#90caf9', // Light blue
|
||||
},
|
||||
secondary: {
|
||||
main: '#f48fb1', // Light pink
|
||||
},
|
||||
background: {
|
||||
default: '#121212',
|
||||
paper: '#1d1d1d',
|
||||
},
|
||||
text: {
|
||||
primary: '#ffffff',
|
||||
secondary: '#bbbbbb',
|
||||
},
|
||||
};
|
||||
|
||||
// Typography customization
|
||||
const typography = {
|
||||
fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif',
|
||||
h1: {
|
||||
fontSize: '3rem',
|
||||
fontWeight: 700,
|
||||
},
|
||||
h2: {
|
||||
fontSize: '2.5rem',
|
||||
fontWeight: 700,
|
||||
},
|
||||
body1: {
|
||||
fontSize: '1rem',
|
||||
fontWeight: 400,
|
||||
},
|
||||
};
|
||||
|
||||
// Create the theme based on the light or dark mode preference
|
||||
const theme = createTheme({
|
||||
palette: {
|
||||
mode: 'light', // Change this to 'dark' for dark mode
|
||||
...(process.env.NODE_ENV === 'development' // Switch for dev mode
|
||||
? lightPalette
|
||||
: darkPalette),
|
||||
},
|
||||
typography,
|
||||
breakpoints: {
|
||||
values: {
|
||||
xs: 0,
|
||||
sm: 600,
|
||||
md: 960,
|
||||
lg: 1280,
|
||||
xl: 1920,
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
export default theme;
|
||||
@ -11,7 +11,10 @@
|
||||
"dependencies": {
|
||||
"react": "^19.0.0",
|
||||
"react-dom": "^19.0.0",
|
||||
"next": "15.3.3"
|
||||
"next": "15.3.3",
|
||||
"@emotion/react": "^11.14.0",
|
||||
"@emotion/styled": "^11.14.0",
|
||||
"@mui/material": "^7.1.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"typescript": "^5",
|
||||
|
||||
3163
payment-iq/yarn.lock
Normal file
3163
payment-iq/yarn.lock
Normal file
File diff suppressed because it is too large
Load Diff
Loading…
x
Reference in New Issue
Block a user