feat : Screen fund transfer
This commit is contained in:
@@ -1,170 +0,0 @@
|
|||||||
"use client";
|
|
||||||
|
|
||||||
import React from 'react';
|
|
||||||
import { Card, Button, Grid, Title, Text, Container, Box, Image } from '@mantine/core';
|
|
||||||
import NextImage from "next/image";
|
|
||||||
import logo from "@/app/image/logo.jpg";
|
|
||||||
|
|
||||||
import { IconBan, IconRefresh, IconExchange, IconCreditCard, IconBuildingBank, IconMobiledata, IconWallet, IconTransferIn } from '@tabler/icons-react';
|
|
||||||
import { IconLogout } from "@tabler/icons-react";
|
|
||||||
import { useRouter } from "next/navigation";
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
const options = [
|
|
||||||
{
|
|
||||||
title: 'Transfer within the bank',
|
|
||||||
subtitle: '₹1 to ₹25 Lacs per day',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: 'IMPS P2A - Instant Transfer',
|
|
||||||
subtitle: '365 days, 24x7',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: 'Transfer to other bank (NEFT)',
|
|
||||||
subtitle: 'Also for Credit Cards',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: 'Transfer to other bank (RTGS)',
|
|
||||||
subtitle: '₹2 Lacs to ₹25 Lacs per day',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: 'IMPS P2P - Instant Transfer',
|
|
||||||
subtitle: '(IMPS: Mobile No.)',
|
|
||||||
},
|
|
||||||
|
|
||||||
];
|
|
||||||
|
|
||||||
|
|
||||||
interface TransactionOptionProps {
|
|
||||||
title: string;
|
|
||||||
description: string;
|
|
||||||
icon: React.ReactNode;
|
|
||||||
}
|
|
||||||
|
|
||||||
const TransactionOption: React.FC<TransactionOptionProps> = ({ title, description, icon }) => (
|
|
||||||
<Card shadow="sm" padding="lg" radius="md" withBorder>
|
|
||||||
<Grid align="center" justify="center" gutter="sm">
|
|
||||||
<Grid.Col span={12} style={{ textAlign: 'center' }}>
|
|
||||||
{icon}
|
|
||||||
</Grid.Col>
|
|
||||||
<Grid.Col span={12} style={{ textAlign: 'center' }}>
|
|
||||||
<Title order={4}>{title}</Title>
|
|
||||||
<Text size="sm" mt="xs">{description}</Text>
|
|
||||||
<Button fullWidth mt="md" variant="light">Go</Button>
|
|
||||||
</Grid.Col>
|
|
||||||
</Grid>
|
|
||||||
</Card>
|
|
||||||
);
|
|
||||||
|
|
||||||
const FundsTransferPage: React.FC = () => {
|
|
||||||
|
|
||||||
const router = useRouter();
|
|
||||||
|
|
||||||
async function handleLogout(e: React.FormEvent) {
|
|
||||||
e.preventDefault();
|
|
||||||
localStorage.removeItem("access_token");
|
|
||||||
router.push("/login")
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div style={{ backgroundColor: "#c1e0f0", width: "100%", height: "100%", paddingTop: "5%" }}>
|
|
||||||
<Box style={{
|
|
||||||
position: 'fixed', width: '100%', height: '12%', top: 0, left: 0, zIndex: 100,
|
|
||||||
display: "flex",
|
|
||||||
justifyContent: "flex-start",
|
|
||||||
background: "linear-gradient(15deg,rgba(2, 163, 85, 1) 55%, rgba(101, 101, 184, 1) 100%)"
|
|
||||||
}}>
|
|
||||||
<Image
|
|
||||||
// radius="md"
|
|
||||||
fit="cover"
|
|
||||||
src={logo}
|
|
||||||
component={NextImage}
|
|
||||||
alt="ebanking"
|
|
||||||
style={{ width: "100%", height: "100%" }}
|
|
||||||
/>
|
|
||||||
<Button style={{
|
|
||||||
position: 'absolute',
|
|
||||||
top: '50%',
|
|
||||||
left: '90%',
|
|
||||||
color: 'white',
|
|
||||||
textShadow: '1px 1px 2px black',
|
|
||||||
fontSize: "20px"
|
|
||||||
}}
|
|
||||||
leftSection={<IconLogout color='white' />} variant="subtle" onClick={handleLogout}>Logout</Button>
|
|
||||||
</Box>
|
|
||||||
<div style={{ marginTop: '10px' }}>
|
|
||||||
<Box mt="lg" p="xl">
|
|
||||||
{/* @ts-ignore */}
|
|
||||||
<Title order={2} align="center" mb="md">Select Transaction Type</Title>
|
|
||||||
<Grid gutter="lg">
|
|
||||||
<Grid.Col span={{ base: 12, sm: 6, md: 4 }}>
|
|
||||||
<TransactionOption
|
|
||||||
title="Transfer within the bank"
|
|
||||||
description="(Re. 1 to Rs. 25 Lacs per day)"
|
|
||||||
//icon={<IconBan size={40} stroke={1.5} />}
|
|
||||||
icon={<IconTransferIn size={40} stroke={1.5} />}
|
|
||||||
/>
|
|
||||||
</Grid.Col>
|
|
||||||
|
|
||||||
<Grid.Col span={{ base: 12, sm: 6, md: 4 }}>
|
|
||||||
<TransactionOption
|
|
||||||
title="IMPS P2A - Instant Transfer"
|
|
||||||
description="(365 days, 24X7) (Re. 1 to Rs. 25 Lacs)"
|
|
||||||
icon={<IconExchange size={40} stroke={1.5} />}
|
|
||||||
/>
|
|
||||||
</Grid.Col>
|
|
||||||
|
|
||||||
<Grid.Col span={{ base: 12, sm: 6, md: 4 }}>
|
|
||||||
<TransactionOption
|
|
||||||
title="Transfer to other bank (NEFT)"
|
|
||||||
description="(Also for Credit Cards Payment)"
|
|
||||||
icon={<IconCreditCard size={40} stroke={1.5} />}
|
|
||||||
/>
|
|
||||||
</Grid.Col>
|
|
||||||
|
|
||||||
<Grid.Col span={{ base: 12, sm: 6, md: 4 }}>
|
|
||||||
<TransactionOption
|
|
||||||
title="Transfer to other bank (RTGS)"
|
|
||||||
description="(Rs. 2 Lacs to Rs. 25 Lacs per day)"
|
|
||||||
icon={<IconBuildingBank size={40} stroke={1.5} />}
|
|
||||||
/>
|
|
||||||
</Grid.Col>
|
|
||||||
|
|
||||||
<Grid.Col span={{ base: 12, sm: 6, md: 4 }}>
|
|
||||||
<TransactionOption
|
|
||||||
title="IMPS P2P - Instant Transfer"
|
|
||||||
description="(365 days, 24X7) (IMPS: Mobile No.)"
|
|
||||||
icon={<IconMobiledata size={40} stroke={1.5} />}
|
|
||||||
/>
|
|
||||||
</Grid.Col>
|
|
||||||
|
|
||||||
|
|
||||||
</Grid>
|
|
||||||
</Box>
|
|
||||||
|
|
||||||
<Box
|
|
||||||
component="footer"
|
|
||||||
style={{
|
|
||||||
width: "100%",
|
|
||||||
textAlign: "center",
|
|
||||||
padding: "10px 0",
|
|
||||||
bottom: 0,
|
|
||||||
left: 0,
|
|
||||||
zIndex: 1000,
|
|
||||||
fontSize: "14px",
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<Text>
|
|
||||||
© 2025 KCC Bank. All rights reserved. {" "}
|
|
||||||
|
|
||||||
</Text>
|
|
||||||
</Box>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default FundsTransferPage;
|
|
||||||
56
src/app/LayoutWithSidebar.tsx
Normal file
56
src/app/LayoutWithSidebar.tsx
Normal file
@@ -0,0 +1,56 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
import React from 'react';
|
||||||
|
import {
|
||||||
|
AppShell,
|
||||||
|
Navbar,
|
||||||
|
Title,
|
||||||
|
Stack,
|
||||||
|
Text,
|
||||||
|
Box,
|
||||||
|
Button,
|
||||||
|
} from '@mantine/core';
|
||||||
|
|
||||||
|
interface LayoutProps {
|
||||||
|
children: React.ReactNode;
|
||||||
|
}
|
||||||
|
|
||||||
|
const Sidebar = () => (
|
||||||
|
<Navbar width={{ base: 220 }} p="xs" style={{ backgroundColor: '#f4f6fa' }}>
|
||||||
|
<Box>
|
||||||
|
<Title order={5} color="blue" mb="md">
|
||||||
|
Funds Transfer
|
||||||
|
</Title>
|
||||||
|
<Stack spacing="xs">
|
||||||
|
<Button variant="filled" fullWidth color="blue" radius="xs">
|
||||||
|
Transact
|
||||||
|
</Button>
|
||||||
|
<Button variant="light" fullWidth color="blue" radius="xs">
|
||||||
|
Enquire
|
||||||
|
</Button>
|
||||||
|
<Button variant="light" fullWidth color="blue" radius="xs">
|
||||||
|
Request
|
||||||
|
</Button>
|
||||||
|
</Stack>
|
||||||
|
</Box>
|
||||||
|
</Navbar>
|
||||||
|
);
|
||||||
|
|
||||||
|
const LayoutWithSidebar: React.FC<LayoutProps> = ({ children }) => {
|
||||||
|
return (
|
||||||
|
<AppShell
|
||||||
|
padding="md"
|
||||||
|
navbar={<Sidebar />}
|
||||||
|
styles={{
|
||||||
|
main: {
|
||||||
|
backgroundColor: '#ffffff',
|
||||||
|
minHeight: '100vh',
|
||||||
|
},
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{children}
|
||||||
|
</AppShell>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default LayoutWithSidebar;
|
||||||
71
src/app/home/FundsTransfer/layout.tsx
Normal file
71
src/app/home/FundsTransfer/layout.tsx
Normal file
@@ -0,0 +1,71 @@
|
|||||||
|
"use client";
|
||||||
|
import { Button, Group } from '@mantine/core';
|
||||||
|
import { IconHome } from '@tabler/icons-react';
|
||||||
|
import Link from 'next/link';
|
||||||
|
import React from 'react';
|
||||||
|
|
||||||
|
export default function Layout({ children }: { children: React.ReactNode }) {
|
||||||
|
return (
|
||||||
|
<div style={{ display: "flex" }}>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
// width: "250px",
|
||||||
|
backgroundColor: '#c5e4f9',
|
||||||
|
padding: "20px",
|
||||||
|
display: "flex",
|
||||||
|
flexDirection: "column",
|
||||||
|
justifyContent: "flex-start",
|
||||||
|
gap: "20px",
|
||||||
|
borderRight:"1px solid #ccc",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<h2 style={{ fontSize: "20px", marginBottom: "10px" }}>Menu</h2>
|
||||||
|
|
||||||
|
<Link href="/" passHref>
|
||||||
|
<Button
|
||||||
|
component="a"
|
||||||
|
leftSection={<IconHome size={16} />}
|
||||||
|
variant="light"
|
||||||
|
color="blue"
|
||||||
|
fullWidth
|
||||||
|
>
|
||||||
|
Quick Pay
|
||||||
|
</Button>
|
||||||
|
</Link>
|
||||||
|
|
||||||
|
<Link href="/" passHref>
|
||||||
|
<Button
|
||||||
|
component="a"
|
||||||
|
leftSection={<IconHome size={16} />}
|
||||||
|
variant="light"
|
||||||
|
color="blue"
|
||||||
|
fullWidth
|
||||||
|
>
|
||||||
|
Send to Beneficiary
|
||||||
|
</Button>
|
||||||
|
</Link>
|
||||||
|
|
||||||
|
<Link href="/" passHref>
|
||||||
|
<Button
|
||||||
|
component="a"
|
||||||
|
leftSection={<IconHome size={16} />}
|
||||||
|
variant="light"
|
||||||
|
color="blue"
|
||||||
|
fullWidth
|
||||||
|
>
|
||||||
|
Transfer within the bank
|
||||||
|
</Button>
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Main content */}
|
||||||
|
<div style={{
|
||||||
|
// width: '80%',
|
||||||
|
// padding: '20px',
|
||||||
|
// border:'1px solid red'
|
||||||
|
}}>
|
||||||
|
{children}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
110
src/app/home/FundsTransfer/page.tsx
Normal file
110
src/app/home/FundsTransfer/page.tsx
Normal file
@@ -0,0 +1,110 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import {
|
||||||
|
Box,
|
||||||
|
Button,
|
||||||
|
Flex,
|
||||||
|
Group,
|
||||||
|
Radio,
|
||||||
|
Select,
|
||||||
|
Text,
|
||||||
|
TextInput,
|
||||||
|
Title,
|
||||||
|
} from "@mantine/core";
|
||||||
|
import { useState } from "react";
|
||||||
|
|
||||||
|
export default function FundTransferForm() {
|
||||||
|
const [paymentMethod, setPaymentMethod] = useState("imps");
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Box
|
||||||
|
maw={1000}
|
||||||
|
p="lg"
|
||||||
|
w="1000px"
|
||||||
|
style={{
|
||||||
|
// borderRadius: 9,
|
||||||
|
// boxShadow: '0 0 12px rgba(0, 0, 0, 0.05)',
|
||||||
|
// backgroundColor: '#c5e4f9',
|
||||||
|
width:'150%',
|
||||||
|
marginRight: 100
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Flex
|
||||||
|
direction="column"
|
||||||
|
gap={12}
|
||||||
|
style={{ maxWidth: 1000, margin: "0 auto", padding: "1rem 0" }}
|
||||||
|
>
|
||||||
|
<Title order={4} mb={4}>
|
||||||
|
Enter Transaction Details
|
||||||
|
</Title>
|
||||||
|
|
||||||
|
{/* Transfer From */}
|
||||||
|
<div>
|
||||||
|
<Text size="sm" fw={500}>
|
||||||
|
Transfer from
|
||||||
|
</Text>
|
||||||
|
<Select
|
||||||
|
placeholder="Select account"
|
||||||
|
data={["Savings - 1234"]}
|
||||||
|
size="sm"
|
||||||
|
mt={4}
|
||||||
|
/>
|
||||||
|
{/* <Text size="xs" c="red" mt={2}>
|
||||||
|
* Total available amount is ₹ *****
|
||||||
|
</Text> */}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Amount + Remarks */}
|
||||||
|
<Group grow gap="sm">
|
||||||
|
<TextInput label="Amount" placeholder="Enter amount" size="sm" />
|
||||||
|
<TextInput
|
||||||
|
label="Remarks (optional)"
|
||||||
|
placeholder="Remarks"
|
||||||
|
size="sm"
|
||||||
|
/>
|
||||||
|
</Group>
|
||||||
|
|
||||||
|
{/* Payment Method */}
|
||||||
|
<div>
|
||||||
|
<Text size="sm" fw={500} mb={4}>
|
||||||
|
Payment Method
|
||||||
|
</Text>
|
||||||
|
<Radio.Group
|
||||||
|
value={paymentMethod}
|
||||||
|
onChange={setPaymentMethod}
|
||||||
|
name="payment-method"
|
||||||
|
>
|
||||||
|
<Flex direction="column" gap={4}>
|
||||||
|
<Radio
|
||||||
|
value="imps"
|
||||||
|
label="IMPS (Instant Transfer up to 2 Lakh, Available 24x7 365 Days)"
|
||||||
|
/>
|
||||||
|
<Radio
|
||||||
|
value="neft"
|
||||||
|
label="NEFT (Regular Transfer, Available 24x7 365 Days)"
|
||||||
|
/>
|
||||||
|
<Radio
|
||||||
|
value="rtgs"
|
||||||
|
label="RTGS (Transfer above 2 lakh, 7AM - 6PM on RBI Working Days)"
|
||||||
|
/>
|
||||||
|
</Flex>
|
||||||
|
</Radio.Group>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* IFSC + Bank Name */}
|
||||||
|
<Group grow gap="sm">
|
||||||
|
<TextInput label="Payee Bank IFSC" placeholder="Enter IFSC code" size="sm" />
|
||||||
|
<TextInput label="Payee Bank Name" placeholder="Enter bank name" size="sm" />
|
||||||
|
</Group>
|
||||||
|
|
||||||
|
{/* Buttons */}
|
||||||
|
<Group justify="flex-end" mt="sm">
|
||||||
|
<Button variant="default" size="sm">
|
||||||
|
Cancel
|
||||||
|
</Button>
|
||||||
|
<Button size="sm">PROCEED TO PAY</Button>
|
||||||
|
</Group>
|
||||||
|
</Flex>
|
||||||
|
</Box>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -1,6 +1,6 @@
|
|||||||
"use client";
|
"use client";
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import { Box, Button, Flex, Group, Image, Text } from '@mantine/core';
|
import { Box, Button, Divider, Flex, Group, Image, Text } from '@mantine/core';
|
||||||
import { IconBook, IconCurrencyRupee, IconHome, IconLogout, IconPhoneFilled, IconSettings } from '@tabler/icons-react';
|
import { IconBook, IconCurrencyRupee, IconHome, IconLogout, IconPhoneFilled, IconSettings } from '@tabler/icons-react';
|
||||||
import Link from 'next/link';
|
import Link from 'next/link';
|
||||||
import { useRouter } from "next/navigation";
|
import { useRouter } from "next/navigation";
|
||||||
@@ -20,7 +20,7 @@ export default function RootLayout({ children }: { children: React.ReactNode })
|
|||||||
<html lang="en">
|
<html lang="en">
|
||||||
<body>
|
<body>
|
||||||
<Providers>
|
<Providers>
|
||||||
<div style={{ backgroundColor: "#e6ffff", width: "100%", height: '100vh' }}>
|
<div style={{ backgroundColor: "#e6ffff", width: "100%", height: '100%' }}>
|
||||||
{/* Image -Logo */}
|
{/* Image -Logo */}
|
||||||
<Box style={{
|
<Box style={{
|
||||||
position: 'relative', width: '100%', height: '11%',
|
position: 'relative', width: '100%', height: '11%',
|
||||||
@@ -63,7 +63,7 @@ export default function RootLayout({ children }: { children: React.ReactNode })
|
|||||||
<Link href="/accounts">
|
<Link href="/accounts">
|
||||||
<Button leftSection={<IconBook />} variant="subtle">Accounts</Button>
|
<Button leftSection={<IconBook />} variant="subtle">Accounts</Button>
|
||||||
</Link>
|
</Link>
|
||||||
<Link href="/send-money">
|
<Link href="/FundsTransfer">
|
||||||
<Button leftSection={<IconCurrencyRupee />} variant="subtle">Send Money</Button>
|
<Button leftSection={<IconCurrencyRupee />} variant="subtle">Send Money</Button>
|
||||||
</Link>
|
</Link>
|
||||||
<Link href="/settings">
|
<Link href="/settings">
|
||||||
@@ -74,7 +74,9 @@ export default function RootLayout({ children }: { children: React.ReactNode })
|
|||||||
|
|
||||||
</Group>
|
</Group>
|
||||||
</div>
|
</div>
|
||||||
|
<Divider size="xs" color ='blue' />
|
||||||
<div>{children}</div>
|
<div>{children}</div>
|
||||||
|
<Divider size="xs" color ='blue' />
|
||||||
{/* Footer */}
|
{/* Footer */}
|
||||||
<Flex justify="center" align="center">
|
<Flex justify="center" align="center">
|
||||||
<Text c="dimmed" size="xs">© 2025 Kangra Central Co- Operative Bank</Text>
|
<Text c="dimmed" size="xs">© 2025 Kangra Central Co- Operative Bank</Text>
|
||||||
|
|||||||
71
src/app/layout/page.tsx
Normal file
71
src/app/layout/page.tsx
Normal file
@@ -0,0 +1,71 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import {
|
||||||
|
AppShell,
|
||||||
|
Box,
|
||||||
|
Button,
|
||||||
|
Flex,
|
||||||
|
Group,
|
||||||
|
Image,
|
||||||
|
Stack,
|
||||||
|
Text,
|
||||||
|
} from '@mantine/core';
|
||||||
|
|
||||||
|
export default function DashboardLayout() {
|
||||||
|
return (
|
||||||
|
<AppShell
|
||||||
|
header={{ height: 80 }}
|
||||||
|
footer={{ height: 60 }}
|
||||||
|
padding="md"
|
||||||
|
styles={{
|
||||||
|
main: {
|
||||||
|
paddingTop: 80,
|
||||||
|
paddingBottom: 60,
|
||||||
|
},
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{/* Header */}
|
||||||
|
<AppShell.Header withBorder={false}>
|
||||||
|
<Flex align="center" h="100%" px="md" justify="space-between">
|
||||||
|
<Image src="/logo.png" alt="Logo" height={40} />
|
||||||
|
<Text fw={600}>Fund Transfer Portal</Text>
|
||||||
|
</Flex>
|
||||||
|
</AppShell.Header>
|
||||||
|
|
||||||
|
{/* Sidebar + Content */}
|
||||||
|
<AppShell.Main>
|
||||||
|
<Flex h="100%" gap="md">
|
||||||
|
{/* Sidebar */}
|
||||||
|
<Box w={220} p="md" bg="gray.1" style={{ borderRadius: 8 }}>
|
||||||
|
<Stack spacing="md">
|
||||||
|
<Button fullWidth variant="light" color="blue">
|
||||||
|
Quick Pay
|
||||||
|
</Button>
|
||||||
|
<Button fullWidth variant="light" color="blue">
|
||||||
|
Send to Beneficiary
|
||||||
|
</Button>
|
||||||
|
<Button fullWidth variant="light" color="blue">
|
||||||
|
Transfer
|
||||||
|
</Button>
|
||||||
|
</Stack>
|
||||||
|
</Box>
|
||||||
|
|
||||||
|
{/* Main content */}
|
||||||
|
<Box flex={1} p="md" bg="gray.0" style={{ borderRadius: 8 }}>
|
||||||
|
{/* You can import your FundTransferForm component here */}
|
||||||
|
<Text>Welcome to the Transfer Page</Text>
|
||||||
|
</Box>
|
||||||
|
</Flex>
|
||||||
|
</AppShell.Main>
|
||||||
|
|
||||||
|
{/* Footer */}
|
||||||
|
<AppShell.Footer withBorder={false}>
|
||||||
|
<Flex align="center" justify="center" h="100%">
|
||||||
|
<Text size="sm" c="dimmed">
|
||||||
|
© 2025 Your Company
|
||||||
|
</Text>
|
||||||
|
</Flex>
|
||||||
|
</AppShell.Footer>
|
||||||
|
</AppShell>
|
||||||
|
);
|
||||||
|
}
|
||||||
22
src/app/test/layout.tsx
Normal file
22
src/app/test/layout.tsx
Normal file
@@ -0,0 +1,22 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import { Box, Grid } from "@mantine/core"
|
||||||
|
|
||||||
|
export default function Layout({
|
||||||
|
children,
|
||||||
|
}: {
|
||||||
|
children: React.ReactNode
|
||||||
|
}) {
|
||||||
|
return <Grid bg="gray">
|
||||||
|
<Grid.Col span={3}>
|
||||||
|
<Box bg="blue">
|
||||||
|
<p>Test Layout</p>
|
||||||
|
</Box>
|
||||||
|
</Grid.Col>
|
||||||
|
<Grid.Col span={9}>
|
||||||
|
<Box bg="yellow">
|
||||||
|
{children}
|
||||||
|
</Box>
|
||||||
|
</Grid.Col>
|
||||||
|
</Grid>
|
||||||
|
}
|
||||||
3
src/app/test/test1/page.tsx
Normal file
3
src/app/test/test1/page.tsx
Normal file
@@ -0,0 +1,3 @@
|
|||||||
|
export default function Page() {
|
||||||
|
return <p>Test Page 1</p>
|
||||||
|
}
|
||||||
3
src/app/test/test2/page.tsx
Normal file
3
src/app/test/test2/page.tsx
Normal file
@@ -0,0 +1,3 @@
|
|||||||
|
export default function Page() {
|
||||||
|
return <p>Test Page 2</p>
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user