generated from dwd/boilarplate-remix-tailwind-antd
icon issue
Suvodip
parent
ecbf8263f5
commit
ccd6cd801f
|
|
@ -0,0 +1,360 @@
|
|||
import React from 'react';
|
||||
import { LaptopOutlined, SettingOutlined, QuestionCircleOutlined, LogoutOutlined, UserOutlined, DownOutlined, FileOutlined} from '@ant-design/icons';
|
||||
import Icon from '@ant-design/icons';
|
||||
import { createFromIconfontCN } from '@ant-design/icons';
|
||||
|
||||
import {Layout, Menu, theme, Button, Modal, MenuProps} from 'antd';
|
||||
import { Dropdown, Space } from 'antd';
|
||||
import '../../public/assets/ss.css'
|
||||
|
||||
const administrationIcon = (props) => (
|
||||
<Icon component={() => <img src="/assets/administration-icon.svg" {...props} />} />
|
||||
);
|
||||
const examinationIcon = () => (
|
||||
<Icon component={() => <img src="/assets/examination-icon.svg" />} />
|
||||
);
|
||||
const myCoursesIcon = () => (
|
||||
<Icon component={() => <img src="/assets/my-courses-icon.svg" />} />
|
||||
);
|
||||
const communityIcon = () => (
|
||||
<Icon component={() => <img src="/assets/community-icon.svg" />} />
|
||||
);
|
||||
const notificationIcon = () => (
|
||||
<Icon component={() => <img src="/assets/notification-icon.svg" />} />
|
||||
);
|
||||
|
||||
const { Header, Content, Sider } = Layout;
|
||||
|
||||
const items1: MenuProps['items'] = ['1', '2', '3'].map((key) => ({
|
||||
key,
|
||||
label: `nav ${key}`,
|
||||
}));
|
||||
|
||||
type MenuItem = Required<MenuProps>['items'][number];
|
||||
|
||||
// function getItem(
|
||||
// label: React.ReactNode,
|
||||
// key: React.Key,
|
||||
// icon?: React.ReactNode,
|
||||
// children?: MenuItem[],
|
||||
// ): MenuItem {
|
||||
// return {
|
||||
// key,
|
||||
// icon,
|
||||
// children,
|
||||
// label,
|
||||
// } as MenuItem;
|
||||
// }
|
||||
|
||||
|
||||
const items2: MenuProps['items'] = [
|
||||
{
|
||||
key: 'sub1',
|
||||
icon: <administrationIcon />,
|
||||
label: 'Administration',
|
||||
children: [
|
||||
{
|
||||
key: '1',
|
||||
label: (<a href='#'>Class Schedules</a>),
|
||||
},
|
||||
{
|
||||
key: '2',
|
||||
label: (<a href='#'>Classmate Directory</a>),
|
||||
},
|
||||
{
|
||||
key: '3',
|
||||
label: (<a href='#'>Qualifications</a>),
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
key: 'sub2',
|
||||
icon: <myCoursesIcon />,
|
||||
label: 'My Courses',
|
||||
children: [
|
||||
{
|
||||
key: '4',
|
||||
label: (<a href='#'>Graduate Program</a>),
|
||||
},
|
||||
{
|
||||
key: '5',
|
||||
label: (<a href='#'>Post-Graduate Program</a>),
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
key: 'sub3',
|
||||
icon: <examinationIcon />,
|
||||
label: 'Examinations',
|
||||
children: [
|
||||
{
|
||||
key: '7',
|
||||
label: (<a href='#'>Exam Scheduled</a>),
|
||||
},
|
||||
{
|
||||
key: '8',
|
||||
label: (<a href='#'>Upcoming Exam</a>),
|
||||
},
|
||||
{
|
||||
key: '9',
|
||||
label: (<a href='#'>Passed Exam</a>),
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
key: 'sub4',
|
||||
icon: <communityIcon />,
|
||||
label: 'Community',
|
||||
children: [
|
||||
{
|
||||
key: '7',
|
||||
label: (<a href='#'>Exam Scheduled</a>),
|
||||
},
|
||||
{
|
||||
key: '8',
|
||||
label: (<a href='#'>Upcoming Exam</a>),
|
||||
},
|
||||
{
|
||||
key: '9',
|
||||
label: (<a href='#'>Passed Exam</a>),
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
key: 'sub5',
|
||||
icon: <notificationIcon />,
|
||||
label: 'Notifications',
|
||||
children: [
|
||||
{
|
||||
key: '7',
|
||||
label: (<a href='#'>Exam Scheduled</a>),
|
||||
},
|
||||
{
|
||||
key: '8',
|
||||
label: (<a href='#'>Upcoming Exam</a>),
|
||||
},
|
||||
{
|
||||
key: '9',
|
||||
label: (<a href='#'>Passed Exam</a>),
|
||||
},
|
||||
],
|
||||
},
|
||||
// getItem('Files', '9', <FileOutlined />),
|
||||
{
|
||||
key: 'grp',
|
||||
label: '',
|
||||
type: 'group',
|
||||
style: { marginTop: '100px' },
|
||||
children: [
|
||||
{ key: '13', style: {paddingTop: '10px', paddingBottom: '10px', border: 'none'}, icon: React.createElement(SettingOutlined), label: (<h2>Settings</h2>) },
|
||||
{ key: '14', style: {paddingTop: '10px', paddingBottom: '10px', border: 'none'}, icon: React.createElement(QuestionCircleOutlined), label: (<h2>Help & Support</h2>) },
|
||||
{ key: '15', style: {paddingTop: '10px', paddingBottom: '10px', border: 'none'}, icon: React.createElement(LogoutOutlined), label: (<h2>Logout</h2>) },
|
||||
],
|
||||
},
|
||||
];
|
||||
const items: MenuProps['items'] = [
|
||||
{
|
||||
label: <a href="https://www.antgroup.com">1st menu item</a>,
|
||||
key: '0',
|
||||
},
|
||||
{
|
||||
type: 'divider',
|
||||
},
|
||||
{
|
||||
label: <a href="https://www.aliyun.com">2nd menu item</a>,
|
||||
key: '1',
|
||||
},
|
||||
{
|
||||
type: 'divider',
|
||||
},
|
||||
{
|
||||
label: '3rd menu item',
|
||||
key: '3',
|
||||
},
|
||||
];
|
||||
|
||||
const App: React.FC = () => {
|
||||
const [open, setOpen] = React.useState<boolean>(false);
|
||||
const [loading, setLoading] = React.useState<boolean>(true);
|
||||
|
||||
const showLoading = () => {
|
||||
setOpen(true);
|
||||
setLoading(true);
|
||||
|
||||
// Simple loading mock. You should add cleanup logic in real world.
|
||||
setTimeout(() => {
|
||||
setLoading(false);
|
||||
}, 100);
|
||||
};
|
||||
const { token: { colorBgContainer}, } = theme.useToken();
|
||||
|
||||
return (
|
||||
|
||||
<Layout>
|
||||
<>
|
||||
{/* <Button type="primary" onClick={showLoading}>Open Modal</Button> */}
|
||||
<Modal style={{top: '20px', right: '0px'}} title={<p>Loading Modal</p>} footer={ <Button type="primary" onClick={showLoading}> Reload </Button>} loading={loading} open={open} onCancel={() => setOpen(false)} >
|
||||
<p>Some contents...</p>
|
||||
<p>Some contents...</p>
|
||||
<p>Some contents...</p>
|
||||
</Modal>
|
||||
</>
|
||||
{/* <Header style={{ display: 'flex', alignItems: 'center' }}>
|
||||
<div className="demo-logo" />
|
||||
<Menu theme="dark" mode="horizontal" defaultSelectedKeys={['2']} items={items1} style={{ flex: 1, minWidth: 0 }} />
|
||||
</Header> */}
|
||||
<Layout >
|
||||
<Sider width={290} style={{overflow: 'hidden', height: '110vh', position: 'fixed', left: 0, top: 0, bottom: 0, background: colorBgContainer, borderRight: '1px solid #CFCFCF', borderBottom: '2px solid #000'}}>
|
||||
<div style={{display: 'flex', flexDirection: 'column', justifyContent: 'center', placeItems: 'center'}}>
|
||||
<h1>IIMTT Logo</h1>
|
||||
<a href="#" style={{display: 'flex', flexDirection: 'row', justifyContent: 'space-between', placeItems: 'center', border: '1px solid #CFCFCF', borderRadius: '10px', marginRight: 20, marginLeft: 20, width: '90%', background: '#FFF'}}>
|
||||
<div style={{display: 'flex', flexDirection: 'row', justifyContent: 'center', placeItems: 'center', height: '80px'}}>
|
||||
<img src="/assets/man.png" alt="" />
|
||||
<div style={{}}>
|
||||
<span style={{fontSize: '16px'}}>My Profile</span><br />
|
||||
<span style={{fontSize: '22px'}}>Rayan Holiday</span>
|
||||
</div>
|
||||
</div>
|
||||
<p>
|
||||
<svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M12.9984 12.9597L8.39844 8.35972L9.79844 6.95972L15.7984 12.9597L9.79844 18.9597L8.39844 17.5597L12.9984 12.9597Z" fill="black"/>
|
||||
</svg>
|
||||
</p>
|
||||
</a>
|
||||
</div>
|
||||
<Menu className='custom-menu' mode="inline" style={{ height: '100%', borderRight: 0, background: '#FCFCFC', paddingTop: 50, color: '#000'}} items={items2} />
|
||||
</Sider>
|
||||
{/* defaultSelectedKeys={['1']} defaultOpenKeys={['sub1']} */}
|
||||
<Layout style={{marginLeft: 290,}}>
|
||||
<Content style={{ background: colorBgContainer, fontSize: 20, margin: '24px 16px 0', overflow: 'initial',}}>
|
||||
<div style={{display: 'flex', flexDirection: 'row', justifyContent: 'space-between', borderBottom: '1px solid #CFCFCF', placeItems: 'center'}}>
|
||||
<p style={{paddingLeft: 20}}>Student Dashboard</p>
|
||||
<div>
|
||||
<Button onClick={showLoading} style={{ border: 'none', paddingRight: 20}}>
|
||||
<div className='' style={{border: '1px solid #FCFCFC', borderRadius: '50%', width: 47, height: 47}}>
|
||||
<svg width="40" height="40" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M5.06445 20.2658V18.2111H7.1191V11.0198C7.1191 9.59872 7.54715 8.33597 8.40325 7.2316C9.25935 6.12723 10.3723 5.40382 11.742 5.06138V4.34225C11.742 3.9142 11.8919 3.55036 12.1915 3.25072C12.4911 2.95109 12.855 2.80127 13.283 2.80127C13.7111 2.80127 14.0749 2.95109 14.3746 3.25072C14.6742 3.55036 14.824 3.9142 14.824 4.34225V5.06138C16.1938 5.40382 17.3067 6.12723 18.1628 7.2316C19.0189 8.33597 19.447 9.59872 19.447 11.0198V18.2111H21.5016V20.2658H5.06445ZM13.283 23.3477C12.718 23.3477 12.2343 23.1465 11.8319 22.7442C11.4296 22.3418 11.2284 21.8581 11.2284 21.2931H15.3377C15.3377 21.8581 15.1365 22.3418 14.7341 22.7442C14.3318 23.1465 13.8481 23.3477 13.283 23.3477ZM9.17374 18.2111H17.3923V11.0198C17.3923 9.88979 16.99 8.9224 16.1852 8.11766C15.3805 7.31293 14.4131 6.91056 13.283 6.91056C12.153 6.91056 11.1856 7.31293 10.3808 8.11766C9.57611 8.9224 9.17374 9.88979 9.17374 11.0198V18.2111Z" fill="black"/>
|
||||
<circle cx="19.4462" cy="19.2384" r="4.23771" fill="black" stroke="#fff" stroke-width="2.31148"/>
|
||||
</svg>
|
||||
</div>
|
||||
</Button>
|
||||
<Dropdown menu={{ items }} trigger={['click']}>
|
||||
<a onClick={(e) => e.preventDefault()}>
|
||||
<Space>
|
||||
<div style={{display: 'flex', flexDirection: 'row', justifyContent: 'center', placeItems: 'center', border: '1px solid #CFCFCF', borderRadius: '30px', height: '50px' }}>
|
||||
<img src="/assets/man.png" alt="" />
|
||||
<div style={{padding: 5}}>
|
||||
<p style={{fontSize: '14px'}}>My Profile <br /> Rayan Holiday</p>
|
||||
{/* <p></p> */}
|
||||
</div>
|
||||
<DownOutlined style={{ fontSize: '12px' }} />
|
||||
</div>
|
||||
|
||||
</Space>
|
||||
</a>
|
||||
</Dropdown>
|
||||
</div>
|
||||
</div>
|
||||
<div style={{display: 'flex', flexDirection: 'row', justifyContent: 'space-between', paddingTop: 20, maxWidth: '90%', marginLeft: 'auto', marginRight: 'auto'}}>
|
||||
<div style={{display: 'flex', flexDirection: 'column', width: '100%', marginLeft: 10, marginRight: 10}}>
|
||||
<div style={{display: 'flex', justifyContent: 'center', placeItems: 'center', height: '250px', backgroundColor: '#FCFCFC', width: '100%', borderRadius: '20px'}}>
|
||||
<h2>Flex Content - 1</h2>
|
||||
</div>
|
||||
<div>
|
||||
<p>Life History of Dr. Maria Montessori</p>
|
||||
<p><span>Chapter 1</span> * <span>Graduate Program</span></p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style={{display: 'flex', flexDirection: 'column', width: '100%', marginLeft: 10, marginRight: 10}}>
|
||||
<div style={{display: 'flex', justifyContent: 'center', placeItems: 'center', height: '250px', backgroundColor: '#FCFCFC', width: '100%', borderRadius: '20px'}}>
|
||||
<h2>Flex Content - 2</h2>
|
||||
</div>
|
||||
<div>
|
||||
<p>Life History of Dr. Maria Montessori</p>
|
||||
<p><span>Chapter 2</span> * <span>Graduate Program</span></p>
|
||||
</div>
|
||||
</div>
|
||||
<div style={{display: 'flex', flexDirection: 'column', width: '100%', marginLeft: 10, marginRight: 10}}>
|
||||
<div style={{display: 'flex', justifyContent: 'center', placeItems: 'center', height: '250px', backgroundColor: '#FCFCFC', width: '100%', borderRadius: '20px'}}>
|
||||
<h2>Flex Content - 3</h2>
|
||||
</div>
|
||||
<div>
|
||||
<p>Life History of Dr. Maria Montessori</p>
|
||||
<p><span>Chapter 3</span> * <span>Graduate Program</span></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style={{display: 'flex', flexDirection: 'row', maxWidth: '90%', marginLeft: 'auto', marginRight: 'auto'}}>
|
||||
<div style={{ width: '60%',}}>
|
||||
<div style={{display: 'flex', flexDirection: 'row'}}>
|
||||
<div style={{display: 'flex', flexDirection: 'column', margin: 10, backgroundColor: '#FCFCFC', width: '100%', borderRadius: '10px'}}>
|
||||
<div style={{display: 'flex', flexDirection: 'row', justifyContent: 'space-between', placeItems: 'center', paddingLeft: 10, paddingRight: 10, borderBottom: '1px solid #CFCFCF'}}>
|
||||
<h3>Attendance</h3>
|
||||
<p>
|
||||
<svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M12.9984 12.9597L8.39844 8.35972L9.79844 6.95972L15.7984 12.9597L9.79844 18.9597L8.39844 17.5597L12.9984 12.9597Z" fill="black"/>
|
||||
</svg>
|
||||
</p>
|
||||
</div>
|
||||
<div style={{display: 'flex', flexDirection: 'column', margin: 10, backgroundColor: '#FCFCFC'}}>
|
||||
<p style={{borderBottom: '1px solid #CFCFCF'}}>Attendance - 1</p>
|
||||
<p style={{borderBottom: '1px solid #CFCFCF'}}>Attendance - 2</p>
|
||||
<p style={{borderBottom: '1px solid #CFCFCF'}}>Attendance - 3</p>
|
||||
<p style={{borderBottom: '1px solid #CFCFCF'}}>Attendance - 4</p>
|
||||
<p style={{borderBottom: '1px solid #CFCFCF'}}>Attendance - 5</p>
|
||||
</div>
|
||||
</div>
|
||||
<div style={{display: 'flex', flexDirection: 'column', margin: 10, backgroundColor: '#FCFCFC', width: '100%', borderRadius: '10px'}}>
|
||||
<div style={{display: 'flex', flexDirection: 'row', justifyContent: 'space-between', placeItems: 'center', paddingLeft: 10, paddingRight: 10, borderBottom: '1px solid #CFCFCF'}}>
|
||||
<h3>Upcoming Classes</h3>
|
||||
<p>
|
||||
<svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M12.9984 12.9597L8.39844 8.35972L9.79844 6.95972L15.7984 12.9597L9.79844 18.9597L8.39844 17.5597L12.9984 12.9597Z" fill="black"/>
|
||||
</svg>
|
||||
</p>
|
||||
</div>
|
||||
<div style={{display: 'flex', flexDirection: 'column', margin: 10, backgroundColor: '#FCFCFC'}}>
|
||||
<p style={{borderBottom: '1px solid #CFCFCF'}}>Upcoming Class - 1</p>
|
||||
<p style={{borderBottom: '1px solid #CFCFCF'}}>Upcoming Class - 2</p>
|
||||
<p style={{borderBottom: '1px solid #CFCFCF'}}>Upcoming Class - 3</p>
|
||||
<p style={{borderBottom: '1px solid #CFCFCF'}}>Upcoming Class - 4</p>
|
||||
<p style={{borderBottom: '1px solid #CFCFCF'}}>Upcoming Class - 5</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style={{display: 'flex', flexDirection: 'column', margin: 10, backgroundColor: '#FCFCFC', borderRadius: '10px'}}>
|
||||
<h3 style={{borderBottom: '1px solid #CFCFCF'}}>Accomplishments/Qualifications</h3>
|
||||
<div style={{display: 'flex', flexDirection: 'row', justifyContent: 'space-between', padding:10}}>
|
||||
<div style={{width: '103px', height: '104px', backgroundColor: '#CFCFCF', justifyContent: 'center', placeItems: 'center', borderRadius: '10px'}}></div>
|
||||
<div style={{width: '103px', height: '104px', backgroundColor: '#CFCFCF', justifyContent: 'center', placeItems: 'center', borderRadius: '10px'}}></div>
|
||||
<div style={{width: '103px', height: '104px', backgroundColor: '#CFCFCF', justifyContent: 'center', placeItems: 'center', borderRadius: '10px'}}></div>
|
||||
<div style={{width: '103px', height: '104px', backgroundColor: '#CFCFCF', justifyContent: 'center', placeItems: 'center', borderRadius: '10px'}}></div>
|
||||
<div style={{width: '103px', height: '104px', backgroundColor: '#CFCFCF', justifyContent: 'center', placeItems: 'center', borderRadius: '10px'}}></div>
|
||||
<div style={{width: '103px', height: '104px', backgroundColor: '#CFCFCF', justifyContent: 'center', placeItems: 'center', borderRadius: '10px'}}></div>
|
||||
<div style={{width: '103px', height: '104px', backgroundColor: '#CFCFCF', justifyContent: 'center', placeItems: 'center', borderRadius: '10px'}}></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style={{display: 'flex', flexDirection: 'column', backgroundColor: '#FCFCFC', width: '40%', margin: 10,borderRadius: '10px'}}>
|
||||
<h3 style={{borderBottom: '1px solid #CFCFCF'}}>Upcoming Tests</h3>
|
||||
<div style={{display: 'flex', flexDirection: 'column', margin: 10, backgroundColor: '#FCFCFC'}}>
|
||||
<p style={{borderBottom: '1px solid #CFCFCF'}}>Upcoming Test - 1</p>
|
||||
<p style={{borderBottom: '1px solid #CFCFCF'}}>Upcoming Test - 2</p>
|
||||
<p style={{borderBottom: '1px solid #CFCFCF'}}>Upcoming Test - 3</p>
|
||||
<p style={{borderBottom: '1px solid #CFCFCF'}}>Upcoming Test - 4</p>
|
||||
<p style={{borderBottom: '1px solid #CFCFCF'}}>Upcoming Test - 5</p>
|
||||
<p style={{borderBottom: '1px solid #CFCFCF'}}>Upcoming Test - 7</p>
|
||||
<p style={{borderBottom: '1px solid #CFCFCF'}}>Upcoming Test - 8</p>
|
||||
<p style={{borderBottom: '1px solid #CFCFCF'}}>Upcoming Test - 9</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Content>
|
||||
</Layout>
|
||||
</Layout>
|
||||
</Layout>
|
||||
);
|
||||
};
|
||||
|
||||
export default App;
|
||||
|
|
@ -1,55 +1,3 @@
|
|||
import type { MetaFunction } from "@remix-run/node";
|
||||
import TestComponent from '../component/TestComponent'
|
||||
|
||||
export const meta: MetaFunction = () => {
|
||||
return [
|
||||
{ title: "New Remix App" },
|
||||
{ name: "description", content: "Welcome to Remix!" },
|
||||
];
|
||||
};
|
||||
|
||||
export default function Index() {
|
||||
return (
|
||||
<div className="font-sans p-4">
|
||||
<h1 className="text-3xl">Welcome to Remix</h1>
|
||||
<a
|
||||
className="text-blue-700 underline visited:text-purple-900"
|
||||
href="/about"
|
||||
rel="noreferrer"
|
||||
>
|
||||
About
|
||||
</a>
|
||||
<ul className="list-disc mt-4 pl-6 space-y-2">
|
||||
<li>
|
||||
<a
|
||||
className="text-blue-700 underline visited:text-purple-900"
|
||||
target="_blank"
|
||||
href="https://remix.run/start/quickstart"
|
||||
rel="noreferrer"
|
||||
>
|
||||
5m Quick Start
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
className="text-blue-700 underline visited:text-purple-900"
|
||||
target="_blank"
|
||||
href="https://remix.run/start/tutorial"
|
||||
rel="noreferrer"
|
||||
>
|
||||
30m Tutorial
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
className="text-blue-700 underline visited:text-purple-900"
|
||||
target="_blank"
|
||||
href="https://remix.run/docs"
|
||||
rel="noreferrer"
|
||||
>
|
||||
Remix Docs
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
<TestComponent />
|
||||
|
|
@ -1,48 +1,10 @@
|
|||
import type { MetaFunction } from "@remix-run/node";
|
||||
|
||||
export const meta: MetaFunction = () => {
|
||||
return [
|
||||
{ title: "New Remix App" },
|
||||
{ name: "description", content: "Welcome to Remix!" },
|
||||
];
|
||||
};
|
||||
import TestComponent from '../component/TestComponent'; // Fix typo here
|
||||
|
||||
export default function Index() {
|
||||
return (
|
||||
<div className="font-sans p-4">
|
||||
<h1 className="text-3xl">Welcome to Remix</h1>
|
||||
<ul className="list-disc mt-4 pl-6 space-y-2">
|
||||
<li>
|
||||
<a
|
||||
className="text-blue-700 underline visited:text-purple-900"
|
||||
target="_blank"
|
||||
href="https://remix.run/start/quickstart"
|
||||
rel="noreferrer"
|
||||
>
|
||||
5m Quick Start
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
className="text-blue-700 underline visited:text-purple-900"
|
||||
target="_blank"
|
||||
href="https://remix.run/start/tutorial"
|
||||
rel="noreferrer"
|
||||
>
|
||||
30m Tutorial
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
className="text-blue-700 underline visited:text-purple-900"
|
||||
target="_blank"
|
||||
href="https://remix.run/docs"
|
||||
rel="noreferrer"
|
||||
>
|
||||
Remix Docs
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<div>
|
||||
<TestComponent /> {/* Ensure the component name matches the import */}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
|
|
@ -11,9 +11,11 @@
|
|||
"typecheck": "tsc"
|
||||
},
|
||||
"dependencies": {
|
||||
"@ant-design/icons": "^5.4.0",
|
||||
"@remix-run/node": "^2.10.3",
|
||||
"@remix-run/react": "^2.10.3",
|
||||
"@remix-run/serve": "^2.10.3",
|
||||
"antd": "^5.19.3",
|
||||
"isbot": "^4.1.0",
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0"
|
||||
|
|
@ -40,4 +42,4 @@
|
|||
"engines": {
|
||||
"node": ">=20.0.0"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,3 @@
|
|||
<svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M12.3984 13.9597C11.4151 13.9597 10.5859 13.6222 9.91094 12.9472C9.23594 12.2722 8.89844 11.4431 8.89844 10.4597C8.89844 9.47638 9.23594 8.64722 9.91094 7.97222C10.5859 7.29722 11.4151 6.95972 12.3984 6.95972C13.3818 6.95972 14.2109 7.29722 14.8859 7.97222C15.5609 8.64722 15.8984 9.47638 15.8984 10.4597C15.8984 11.4431 15.5609 12.2722 14.8859 12.9472C14.2109 13.6222 13.3818 13.9597 12.3984 13.9597ZM12.3984 11.9597C12.8318 11.9597 13.1901 11.8181 13.4734 11.5347C13.7568 11.2514 13.8984 10.8931 13.8984 10.4597C13.8984 10.0264 13.7568 9.66805 13.4734 9.38472C13.1901 9.10138 12.8318 8.95972 12.3984 8.95972C11.9651 8.95972 11.6068 9.10138 11.3234 9.38472C11.0401 9.66805 10.8984 10.0264 10.8984 10.4597C10.8984 10.8931 11.0401 11.2514 11.3234 11.5347C11.6068 11.8181 11.9651 11.9597 12.3984 11.9597ZM12.3984 22.9597C10.0818 22.3764 8.16927 21.0472 6.66094 18.9722C5.1526 16.8972 4.39844 14.5931 4.39844 12.0597V5.95972L12.3984 2.95972L20.3984 5.95972V12.0597C20.3984 14.5931 19.6443 16.8972 18.1359 18.9722C16.6276 21.0472 14.7151 22.3764 12.3984 22.9597ZM12.3984 5.08472L6.39844 7.33472V12.0597C6.39844 12.9597 6.52344 13.8347 6.77344 14.6847C7.02344 15.5347 7.3651 16.3347 7.79844 17.0847C8.49844 16.7347 9.23177 16.4597 9.99844 16.2597C10.7651 16.0597 11.5651 15.9597 12.3984 15.9597C13.2318 15.9597 14.0318 16.0597 14.7984 16.2597C15.5651 16.4597 16.2984 16.7347 16.9984 17.0847C17.4318 16.3347 17.7734 15.5347 18.0234 14.6847C18.2734 13.8347 18.3984 12.9597 18.3984 12.0597V7.33472L12.3984 5.08472ZM12.3984 17.9597C11.7984 17.9597 11.2151 18.0264 10.6484 18.1597C10.0818 18.2931 9.5401 18.4764 9.02344 18.7097C9.50677 19.2097 10.0318 19.6431 10.5984 20.0097C11.1651 20.3764 11.7651 20.6597 12.3984 20.8597C13.0318 20.6597 13.6318 20.3764 14.1984 20.0097C14.7651 19.6431 15.2901 19.2097 15.7734 18.7097C15.2568 18.4764 14.7151 18.2931 14.1484 18.1597C13.5818 18.0264 12.9984 17.9597 12.3984 17.9597Z" fill="#ff0000"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.0 KiB |
|
|
@ -0,0 +1,3 @@
|
|||
<svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M7.39844 18.9597C7.1151 18.9597 6.8776 18.8639 6.68594 18.6722C6.49427 18.4806 6.39844 18.2431 6.39844 17.9597V15.9597H19.3984V6.95972H21.3984C21.6818 6.95972 21.9193 7.05555 22.1109 7.24722C22.3026 7.43888 22.3984 7.67638 22.3984 7.95972V22.9597L18.3984 18.9597H7.39844ZM2.39844 17.9597V3.95972C2.39844 3.67638 2.49427 3.43888 2.68594 3.24722C2.8776 3.05555 3.1151 2.95972 3.39844 2.95972H16.3984C16.6818 2.95972 16.9193 3.05555 17.1109 3.24722C17.3026 3.43888 17.3984 3.67638 17.3984 3.95972V12.9597C17.3984 13.2431 17.3026 13.4806 17.1109 13.6722C16.9193 13.8639 16.6818 13.9597 16.3984 13.9597H6.39844L2.39844 17.9597ZM15.3984 11.9597V4.95972H4.39844V11.9597H15.3984Z" fill="#FF0000"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 813 B |
|
|
@ -0,0 +1,3 @@
|
|||
<svg width="19" height="17" viewBox="0 0 19 17" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M0.398438 10.9597V8.95972H7.39844V10.9597H0.398438ZM0.398438 6.95972V4.95972H11.3984V6.95972H0.398438ZM0.398438 2.95972V0.959717H11.3984V2.95972H0.398438ZM9.39844 16.9597V13.8847L14.9234 8.38472C15.0734 8.23472 15.2401 8.12638 15.4234 8.05972C15.6068 7.99305 15.7901 7.95972 15.9734 7.95972C16.1734 7.95972 16.3651 7.99722 16.5484 8.07222C16.7318 8.14722 16.8984 8.25972 17.0484 8.40972L17.9734 9.33472C18.1068 9.48472 18.2109 9.65138 18.2859 9.83472C18.3609 10.0181 18.3984 10.2014 18.3984 10.3847C18.3984 10.5681 18.3651 10.7556 18.2984 10.9472C18.2318 11.1389 18.1234 11.3097 17.9734 11.4597L12.4734 16.9597H9.39844ZM10.8984 15.4597H11.8484L14.8734 12.4097L14.4234 11.9347L13.9484 11.4847L10.8984 14.5097V15.4597ZM14.4234 11.9347L13.9484 11.4847L14.8734 12.4097L14.4234 11.9347Z" fill="var(--icon-color)"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 935 B |
Binary file not shown.
|
After Width: | Height: | Size: 4.5 KiB |
|
|
@ -0,0 +1,3 @@
|
|||
<svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M10.3984 14.9597H14.3984V12.9597H10.3984V14.9597ZM10.3984 11.9597H18.3984V9.95972H10.3984V11.9597ZM10.3984 8.95972H18.3984V6.95972H10.3984V8.95972ZM8.39844 18.9597C7.84844 18.9597 7.3776 18.7639 6.98594 18.3722C6.59427 17.9806 6.39844 17.5097 6.39844 16.9597V4.95972C6.39844 4.40972 6.59427 3.93888 6.98594 3.54722C7.3776 3.15555 7.84844 2.95972 8.39844 2.95972H20.3984C20.9484 2.95972 21.4193 3.15555 21.8109 3.54722C22.2026 3.93888 22.3984 4.40972 22.3984 4.95972V16.9597C22.3984 17.5097 22.2026 17.9806 21.8109 18.3722C21.4193 18.7639 20.9484 18.9597 20.3984 18.9597H8.39844ZM8.39844 16.9597H20.3984V4.95972H8.39844V16.9597ZM4.39844 22.9597C3.84844 22.9597 3.3776 22.7639 2.98594 22.3722C2.59427 21.9806 2.39844 21.5097 2.39844 20.9597V6.95972H4.39844V20.9597H18.3984V22.9597H4.39844Z" fill="var(--icon-color)"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 939 B |
Binary file not shown.
|
After Width: | Height: | Size: 477 B |
|
|
@ -0,0 +1,3 @@
|
|||
<svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M4.39844 19.9597V17.9597H6.39844V10.9597C6.39844 9.57638 6.8151 8.34722 7.64844 7.27222C8.48177 6.19722 9.5651 5.49305 10.8984 5.15972V4.45972C10.8984 4.04305 11.0443 3.68888 11.3359 3.39722C11.6276 3.10555 11.9818 2.95972 12.3984 2.95972C12.8151 2.95972 13.1693 3.10555 13.4609 3.39722C13.7526 3.68888 13.8984 4.04305 13.8984 4.45972V5.15972C15.2318 5.49305 16.3151 6.19722 17.1484 7.27222C17.9818 8.34722 18.3984 9.57638 18.3984 10.9597V17.9597H20.3984V19.9597H4.39844ZM12.3984 22.9597C11.8484 22.9597 11.3776 22.7639 10.9859 22.3722C10.5943 21.9806 10.3984 21.5097 10.3984 20.9597H14.3984C14.3984 21.5097 14.2026 21.9806 13.8109 22.3722C13.4193 22.7639 12.9484 22.9597 12.3984 22.9597ZM8.39844 17.9597H16.3984V10.9597C16.3984 9.85972 16.0068 8.91805 15.2234 8.13472C14.4401 7.35138 13.4984 6.95972 12.3984 6.95972C11.2984 6.95972 10.3568 7.35138 9.57344 8.13472C8.7901 8.91805 8.39844 9.85972 8.39844 10.9597V17.9597Z" fill="var(--icon-color)"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.0 KiB |
|
|
@ -0,0 +1,5 @@
|
|||
|
||||
<svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M5.06445 20.2658V18.2111H7.1191V11.0198C7.1191 9.59872 7.54715 8.33597 8.40325 7.2316C9.25935 6.12723 10.3723 5.40382 11.742 5.06138V4.34225C11.742 3.9142 11.8919 3.55036 12.1915 3.25072C12.4911 2.95109 12.855 2.80127 13.283 2.80127C13.7111 2.80127 14.0749 2.95109 14.3746 3.25072C14.6742 3.55036 14.824 3.9142 14.824 4.34225V5.06138C16.1938 5.40382 17.3067 6.12723 18.1628 7.2316C19.0189 8.33597 19.447 9.59872 19.447 11.0198V18.2111H21.5016V20.2658H5.06445ZM13.283 23.3477C12.718 23.3477 12.2343 23.1465 11.8319 22.7442C11.4296 22.3418 11.2284 21.8581 11.2284 21.2931H15.3377C15.3377 21.8581 15.1365 22.3418 14.7341 22.7442C14.3318 23.1465 13.8481 23.3477 13.283 23.3477ZM9.17374 18.2111H17.3923V11.0198C17.3923 9.88979 16.99 8.9224 16.1852 8.11766C15.3805 7.31293 14.4131 6.91056 13.283 6.91056C12.153 6.91056 11.1856 7.31293 10.3808 8.11766C9.57611 8.9224 9.17374 9.88979 9.17374 11.0198V18.2111Z" fill="black"/>
|
||||
<circle cx="19.4462" cy="19.2384" r="4.23771" fill="black" stroke="#ff0000" stroke-width="2.31148"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.1 KiB |
|
|
@ -0,0 +1,4 @@
|
|||
|
||||
<svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M9.64766 22.9597L9.24766 19.7597C9.03099 19.6764 8.82682 19.5764 8.63516 19.4597C8.44349 19.3431 8.25599 19.2181 8.07266 19.0847L5.09766 20.3347L2.34766 15.5847L4.92266 13.6347C4.90599 13.5181 4.89766 13.4056 4.89766 13.2972V12.6222C4.89766 12.5139 4.90599 12.4014 4.92266 12.2847L2.34766 10.3347L5.09766 5.58472L8.07266 6.83472C8.25599 6.70138 8.44766 6.57638 8.64766 6.45972C8.84766 6.34305 9.04766 6.24305 9.24766 6.15972L9.64766 2.95972H15.1477L15.5477 6.15972C15.7643 6.24305 15.9685 6.34305 16.1602 6.45972C16.3518 6.57638 16.5393 6.70138 16.7227 6.83472L19.6977 5.58472L22.4477 10.3347L19.8727 12.2847C19.8893 12.4014 19.8977 12.5139 19.8977 12.6222V13.2972C19.8977 13.4056 19.881 13.5181 19.8477 13.6347L22.4227 15.5847L19.6727 20.3347L16.7227 19.0847C16.5393 19.2181 16.3477 19.3431 16.1477 19.4597C15.9477 19.5764 15.7477 19.6764 15.5477 19.7597L15.1477 22.9597H9.64766ZM11.3977 20.9597H13.3727L13.7227 18.3097C14.2393 18.1764 14.7185 17.9806 15.1602 17.7222C15.6018 17.4639 16.006 17.1514 16.3727 16.7847L18.8477 17.8097L19.8227 16.1097L17.6727 14.4847C17.756 14.2514 17.8143 14.0056 17.8477 13.7472C17.881 13.4889 17.8977 13.2264 17.8977 12.9597C17.8977 12.6931 17.881 12.4306 17.8477 12.1722C17.8143 11.9139 17.756 11.668 17.6727 11.4347L19.8227 9.80972L18.8477 8.10972L16.3727 9.15972C16.006 8.77638 15.6018 8.45555 15.1602 8.19722C14.7185 7.93888 14.2393 7.74305 13.7227 7.60972L13.3977 4.95972H11.4227L11.0727 7.60972C10.556 7.74305 10.0768 7.93888 9.63516 8.19722C9.19349 8.45555 8.78932 8.76805 8.42266 9.13472L5.94766 8.10972L4.97266 9.80972L7.12266 11.4097C7.03932 11.6597 6.98099 11.9097 6.94766 12.1597C6.91432 12.4097 6.89766 12.6764 6.89766 12.9597C6.89766 13.2264 6.91432 13.4847 6.94766 13.7347C6.98099 13.9847 7.03932 14.2347 7.12266 14.4847L4.97266 16.1097L5.94766 17.8097L8.42266 16.7597C8.78932 17.1431 9.19349 17.4639 9.63516 17.7222C10.0768 17.9806 10.556 18.1764 11.0727 18.3097L11.3977 20.9597ZM12.4477 16.4597C13.4143 16.4597 14.2393 16.1181 14.9227 15.4347C15.606 14.7514 15.9477 13.9264 15.9477 12.9597C15.9477 11.9931 15.606 11.168 14.9227 10.4847C14.2393 9.80138 13.4143 9.45972 12.4477 9.45972C11.4643 9.45972 10.6352 9.80138 9.96016 10.4847C9.28516 11.168 8.94766 11.9931 8.94766 12.9597C8.94766 13.9264 9.28516 14.7514 9.96016 15.4347C10.6352 16.1181 11.4643 16.4597 12.4477 16.4597Z" fill="#000"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.4 KiB |
|
|
@ -0,0 +1,55 @@
|
|||
|
||||
.ant-menu-item-selected {
|
||||
/* background-color: #ED9545 !important; */
|
||||
border-left: 1px solid #CFCFCF ;
|
||||
}
|
||||
|
||||
|
||||
/* App.css */
|
||||
.custom-menu .ant-menu-item {
|
||||
border-bottom: 1px solid #CFCFCF; /* Default border color */
|
||||
border-radius: 0; /* Remove border-radius */
|
||||
}
|
||||
|
||||
.custom-menu .ant-menu-item-selected {
|
||||
border-bottom: 1px solid #CFCFCF; /* Selected border color */
|
||||
}
|
||||
|
||||
/* Specific styling for parent menu items (non-selected) */
|
||||
.custom-menu .ant-menu-submenu-title {
|
||||
border-bottom: 1px solid #CFCFCF; /* Default border color for parent items */
|
||||
border-radius: 0; /* Remove border-radius for parent items */
|
||||
font-size: 20px;
|
||||
color: #000;
|
||||
font-weight: 700;
|
||||
padding-top: 40px;
|
||||
padding-bottom: 40px;
|
||||
--icon-color: #000; /* Default icon color */
|
||||
}
|
||||
|
||||
/* Specific styling for selected parent menu items */
|
||||
.custom-menu .ant-menu-submenu-selected .ant-menu-submenu-title,
|
||||
.custom-menu .ant-menu-submenu-title.ant-menu-submenu-title-selected,
|
||||
.custom-menu .ant-menu-submenu-title .ant-menu-submenu-open {
|
||||
color: #ED9545; /* Selected text color for parent items */
|
||||
border-bottom: 1px solid #CFCFCF; /* Selected border color for parent items */
|
||||
--icon-color: #ED9545; /* Selected icon color */
|
||||
}
|
||||
|
||||
.custom-menu .ant-menu-submenu-title:hover {
|
||||
color: #6E6E6E; /* Hover text color for parent items */
|
||||
border-bottom: 1px solid #CFCFCF; /* Hover border color for parent items */
|
||||
}
|
||||
|
||||
/* Ensure parent item remains #ED9545 when any child is selected */
|
||||
.custom-menu .ant-menu-submenu-open > .ant-menu-submenu-title {
|
||||
color: #ED9545; /* Ensure parent item text color */
|
||||
border-bottom: 1px solid #CFCFCF; /* Ensure parent item border color */
|
||||
--icon-color: #ED9545; /* Ensure parent item icon color */
|
||||
}
|
||||
|
||||
/* Ensure parent item text color reverts to #000 when submenu is collapsed */
|
||||
.custom-menu .ant-menu-submenu-closed > .ant-menu-submenu-title {
|
||||
color: #000; /* Ensure parent item text color */
|
||||
--icon-color: #000; /* Ensure parent item icon color */
|
||||
}
|
||||
Loading…
Reference in New Issue