Merge branch 'main' of https://7o9o-lb-526275444.ap-south-1.elb.amazonaws.com/md.asif5/osaka
This commit is contained in:
commit
6f1ec668cc
@ -2,9 +2,9 @@
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
||||
<link rel="icon" type="image/svg+xml" href="/ipks_logo.svg" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Vite + React</title>
|
||||
<title>IPKS | Development</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
|
||||
10
package-lock.json
generated
10
package-lock.json
generated
@ -8,6 +8,7 @@
|
||||
"name": "osaka",
|
||||
"version": "0.0.0",
|
||||
"dependencies": {
|
||||
"clsx": "^2.1.1",
|
||||
"i18next": "^23.15.1",
|
||||
"i18next-browser-languagedetector": "^8.0.0",
|
||||
"i18next-http-backend": "^2.6.1",
|
||||
@ -1907,6 +1908,15 @@
|
||||
"node": ">= 6"
|
||||
}
|
||||
},
|
||||
"node_modules/clsx": {
|
||||
"version": "2.1.1",
|
||||
"resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
|
||||
"integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==",
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">=6"
|
||||
}
|
||||
},
|
||||
"node_modules/color-convert": {
|
||||
"version": "1.9.3",
|
||||
"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
|
||||
|
||||
@ -10,6 +10,7 @@
|
||||
"preview": "vite preview"
|
||||
},
|
||||
"dependencies": {
|
||||
"clsx": "^2.1.1",
|
||||
"i18next": "^23.15.1",
|
||||
"i18next-browser-languagedetector": "^8.0.0",
|
||||
"i18next-http-backend": "^2.6.1",
|
||||
|
||||
21
public/ipks_logo.svg
Normal file
21
public/ipks_logo.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 6.5 KiB |
@ -5,7 +5,7 @@ import Footer from "./components/Footer"
|
||||
function App() {
|
||||
return <div className="flex flex-col min-h-screen">
|
||||
<Header />
|
||||
<main className="flex transition-color-mode px-7 flex-grow bg-surface dark:bg-surface-dark">
|
||||
<main className="flex transition-color-mode p-12 flex-grow bg-surface dark:bg-surface-dark">
|
||||
<Outlet />
|
||||
</main>
|
||||
<Footer />
|
||||
|
||||
@ -1,7 +1,8 @@
|
||||
function Footer() {
|
||||
return (
|
||||
<footer>
|
||||
<p>© 2021</p>
|
||||
<footer className="flex justify-between p-2 px-7 font-body bg-tertiary text-sm text-primary dark:bg-tertiary-dark dark:text-primary-dark">
|
||||
<p>Copyright © 2023, Tata Consultancy Services. All rights reserved</p>
|
||||
<a className="cursor-wait">Privacy Policy</a>
|
||||
</footer>
|
||||
);
|
||||
}
|
||||
|
||||
@ -1,9 +1,10 @@
|
||||
import { PropTypes } from 'prop-types';
|
||||
import clsx from 'clsx';
|
||||
|
||||
function FormBox({title, children}) {
|
||||
function FormBox({title, children, alt = false}) {
|
||||
return (
|
||||
<div className='transition-color-mode font-body bg-surface-variant border-secondary dark:bg-surface-variant-dark dark:border-primary-dark border-2 p-4 rounded-3xl relative h-full'>
|
||||
<label className='font-body absolute left-11 -top-4 bg-secondary dark:bg-secondary-dark text-primary dark:text-primary-dark font-medium py-1 px-4 rounded-full'>{title}</label>
|
||||
<div className={clsx(alt ? 'bg-secondary-variant dark:bg-secondary-variant-dark border-secondary-variant dark:border-secondary-variant-dark' : 'bg-surface-variant dark:bg-surface-variant-dark', 'transition-color-mode font-body border-secondary dark:border-secondary-dark border-2 p-4 rounded-3xl relative h-full')}>
|
||||
<label className={clsx( alt && 'bg-surface dark:bg-surface-dark border-3 border-secondary-variant dark:border-secondary-variant-dark', 'font-body absolute left-11 -top-4 bg-secondary dark:bg-secondary-dark text-primary dark:text-primary-dark font-medium py-1 px-4 rounded-full')}>{title}</label>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
@ -11,7 +12,8 @@ function FormBox({title, children}) {
|
||||
|
||||
FormBox.propTypes = {
|
||||
children: PropTypes.node.isRequired,
|
||||
title: PropTypes.string.isRequired
|
||||
title: PropTypes.string.isRequired,
|
||||
alt: PropTypes.bool,
|
||||
};
|
||||
|
||||
export default FormBox;
|
||||
@ -42,7 +42,7 @@ function Header() {
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="transition-color-mode px-7 bg-secondary dark:bg-secondary-dark text-primary dark:text-primary-dark">
|
||||
<div className="transition-color-mode px-12 bg-secondary dark:bg-secondary-dark text-primary dark:text-primary-dark">
|
||||
<AppTitle />
|
||||
<BannerInfo info={userInfo} />
|
||||
<Separator />
|
||||
|
||||
@ -9,7 +9,7 @@ const LanguageSelector = () => {
|
||||
|
||||
return (
|
||||
<div>
|
||||
<select className='rounded-md bg-secondary dark:bg-secondary-dark focus:outline-none' id="language-select" onChange={changeLanguage} value={i18n.language}>
|
||||
<select className='font-body rounded-md bg-secondary dark:bg-secondary-dark focus:outline-none' id="language-select" onChange={changeLanguage} value={i18n.language}>
|
||||
<option value="en">English</option>
|
||||
<option value="bn">বাংলা</option>
|
||||
<option value="hi">हिन्दी</option>
|
||||
|
||||
@ -5,9 +5,9 @@ import { useTranslation } from "react-i18next";
|
||||
const SubMenu = ({ items }) => {
|
||||
const {t} = useTranslation();
|
||||
return (
|
||||
<div className="
|
||||
hidden absolute top-full left-0 border-t-3 border-primary dark:border-primary-dark bg-secondary
|
||||
dark:bg-secondary-dark rounded-2xl shadow-sm shadow-surface-variant-dark dark:shadow-primary group-hover:block z-10"
|
||||
<div className="invisible opacity-0
|
||||
absolute top-full left-0 border-t-3 border-primary dark:border-primary-dark bg-secondary -translate-y-6
|
||||
dark:bg-secondary-dark rounded-2xl shadow-sm shadow-surface-variant-dark dark:shadow-primary z-50 group-hover:visible group-hover:translate-y-0 group-hover:opacity-100 transition-all duration-200"
|
||||
>
|
||||
{items.map((subItem, index) => (
|
||||
<div key={index} className="px-6 py-2 text-nowrap hover:bg-white dark:hover:bg-secondary-variant-dark cursor-pointer first:rounded-t-2xl second-last:rounded-b-2xl first:pt-4 last:pb-4">
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
function Separator() {
|
||||
return (
|
||||
<div className="h-[2px]">
|
||||
<div className="h-full w-full bg-white rounded-md"></div>
|
||||
<div className="h-full w-full bg-white dark:bg-primary-dark rounded-md"></div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
@ -1,25 +1,33 @@
|
||||
import FormBox from "../components/FormBox";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { getUserInfoFromSession } from "../util/util";
|
||||
|
||||
function Home() {
|
||||
const { t } = useTranslation();
|
||||
const holidayList = [{ date: '23 May, 2024', name: 'Buddha Purnima' }, { date: '15 June, 2024', name: 'Raja Sankranti' }];
|
||||
const homePageNotifications = ['hpn_complete_before_31', 'hpn_npa', 'hpn_helpdesk_contact', 'hpn_rupay_kcc_time', 'hpn_rupay_kcc_atm'];
|
||||
const userInformation = getUserInfoFromSession();
|
||||
|
||||
return (
|
||||
<div className="py-7 flex flex-grow gap-7">
|
||||
<div className="flex flex-grow gap-7">
|
||||
<div className="flex gap-7 flex-col basis-1/3">
|
||||
<div className="flex-grow">
|
||||
<FormBox title={t('information')}>
|
||||
<h1>Welcome to the Home Page</h1>
|
||||
<FormBox title={t('holidayList')} alt={true}>
|
||||
<ul className="list-inside list-disc px-4">
|
||||
{holidayList.map((holiday, index) => (
|
||||
<li key={index} className="font-body py-2 text-surface dark:text-surface-dark text-lg/loose">{t(holiday.date)} - {t(holiday.name)}</li>
|
||||
))}
|
||||
</ul>
|
||||
</FormBox>
|
||||
</div>
|
||||
<div className="flex-grow">
|
||||
<FormBox title={t('holidayList')}>
|
||||
<ul>
|
||||
{holidayList.map((holiday, index) => (
|
||||
<li key={index}>{holiday.date} - {holiday.name}</li>
|
||||
))}
|
||||
<FormBox title={t('information')}>
|
||||
<ul className="list-inside list-disc px-4">
|
||||
{
|
||||
Object.keys(userInformation).map((key, index) => (
|
||||
<li key={index} className="font-body py-2 text-surface-dark dark:text-surface text-lg/loose">{t(key)}: {t(userInformation[key])}</li>
|
||||
))
|
||||
}
|
||||
</ul>
|
||||
</FormBox>
|
||||
</div>
|
||||
@ -29,13 +37,12 @@ function Home() {
|
||||
<FormBox title={t('notifications')}>
|
||||
<ul className="list-inside list-disc px-4">
|
||||
{homePageNotifications.map((notification, index) => (
|
||||
<li className="font-body py-1 text-surface-dark dark:text-surface text-lg/loose" key={index}>{t(notification)}</li>
|
||||
<li key={index} className="font-body py-2 text-surface-dark dark:text-surface text-lg/relaxed">{t(notification)}</li>
|
||||
))}
|
||||
</ul>
|
||||
</FormBox>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@ -12,18 +12,23 @@ export default {
|
||||
transparent: 'transparent',
|
||||
primary: {
|
||||
DEFAULT: '#008C46',
|
||||
dark: '#6affb4'
|
||||
// dark: '#6affb4'
|
||||
dark: '#E6F4E1'
|
||||
},
|
||||
secondary: {
|
||||
DEFAULT: '#B1E1B3',
|
||||
dark: '#20542f',
|
||||
// dark: '#3d9f59',
|
||||
variant: {DEFAULT: '#80AE82', dark: '#5F8E5F'}
|
||||
// dark: '#20542f',
|
||||
dark: '#7DBD80',
|
||||
variant: {DEFAULT: '#80AE82', dark: '#5B875D'}
|
||||
},
|
||||
tertiary: {
|
||||
DEFAULT: '#f2f2df',
|
||||
dark: '#3d3d29',
|
||||
},
|
||||
surface: {
|
||||
DEFAULT: '#F6F6F6',
|
||||
dark: '#2d3133',
|
||||
variant: {DEFAULT: '#F4FFF4', dark: '#3e4345'}
|
||||
dark: '#2d332d',
|
||||
variant: {DEFAULT: '#F4FFF4', dark: '#2b372c'}
|
||||
},
|
||||
|
||||
},
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user