md.asif5/osaka
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'main' of https://7o9o-lb-526275444.ap-south-1.elb.amazonaws.com/md.asif5/osaka

Browse Source
This commit is contained in:
Md Asif 2024-10-01 12:16:06 +05:30
commit 6f1ec668cc
13 changed files with 78 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
index.html
View File

@ -2,9 +2,9 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8" /> <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" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + React</title> <title>IPKS | Development</title>
</head> </head>
<body> <body>
<div id="root"></div> <div id="root"></div>

10
package-lock.json generated
View File

@ -8,6 +8,7 @@
"name": "osaka", "name": "osaka",
"version": "0.0.0", "version": "0.0.0",
"dependencies": { "dependencies": {
"clsx": "^2.1.1",
"i18next": "^23.15.1", "i18next": "^23.15.1",
"i18next-browser-languagedetector": "^8.0.0", "i18next-browser-languagedetector": "^8.0.0",
"i18next-http-backend": "^2.6.1", "i18next-http-backend": "^2.6.1",
@ -1907,6 +1908,15 @@
"node": ">= 6" "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": { "node_modules/color-convert": {
"version": "1.9.3", "version": "1.9.3",
"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz", "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",

1
package.json
View File

@ -10,6 +10,7 @@
"preview": "vite preview" "preview": "vite preview"
}, },
"dependencies": { "dependencies": {
"clsx": "^2.1.1",
"i18next": "^23.15.1", "i18next": "^23.15.1",
"i18next-browser-languagedetector": "^8.0.0", "i18next-browser-languagedetector": "^8.0.0",
"i18next-http-backend": "^2.6.1", "i18next-http-backend": "^2.6.1",

21
public/ipks_logo.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 6.5 KiB

2
src/App.jsx
View File

@ -5,7 +5,7 @@ import Footer from "./components/Footer"
function App() { function App() {
return <div className="flex flex-col min-h-screen"> return <div className="flex flex-col min-h-screen">
<Header /> <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 /> <Outlet />
</main> </main>
<Footer /> <Footer />

5
src/components/Footer.jsx
View File

@ -1,7 +1,8 @@
function Footer() { function Footer() {
return ( return (
<footer> <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>© 2021</p> <p>Copyright © 2023, Tata Consultancy Services. All rights reserved</p>
<a className="cursor-wait">Privacy Policy</a>
</footer> </footer>
); );
} }

10
src/components/FormBox.jsx
View File

@ -1,9 +1,10 @@
import { PropTypes } from 'prop-types'; import { PropTypes } from 'prop-types';
import clsx from 'clsx';
function FormBox({title, children}) { function FormBox({title, children, alt = false}) {
return ( 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'> <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='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> <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} {children}
</div> </div>
); );
@ -11,7 +12,8 @@ function FormBox({title, children}) {
FormBox.propTypes = { FormBox.propTypes = {
children: PropTypes.node.isRequired, children: PropTypes.node.isRequired,
title: PropTypes.string.isRequired title: PropTypes.string.isRequired,
alt: PropTypes.bool,
}; };
export default FormBox; export default FormBox;

2
src/components/Header.jsx
View File

@ -42,7 +42,7 @@ function Header() {
]; ];
return ( 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 /> <AppTitle />
<BannerInfo info={userInfo} /> <BannerInfo info={userInfo} />
<Separator /> <Separator />

2
src/components/LanguageSelector.jsx
View File

@ -9,7 +9,7 @@ const LanguageSelector = () => {
return ( return (
<div> <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="en">English</option>
<option value="bn">বাংলা</option> <option value="bn">বাংলা</option>
<option value="hi">हिन्दी</option> <option value="hi">हिन्दी</option>

6
src/components/MenuBar.jsx
View File

@ -5,9 +5,9 @@ import { useTranslation } from "react-i18next";
const SubMenu = ({ items }) => { const SubMenu = ({ items }) => {
const {t} = useTranslation(); const {t} = useTranslation();
return ( return (
<div className=" <div className="invisible opacity-0
hidden absolute top-full left-0 border-t-3 border-primary dark:border-primary-dark bg-secondary 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 group-hover:block z-10" 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) => ( {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"> <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">

2
src/components/Separator.jsx
View File

@ -1,7 +1,7 @@
function Separator() { function Separator() {
return ( return (
<div className="h-[2px]"> <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> </div>
) )
} }

27
src/pages/Home.jsx
View File

@ -1,25 +1,33 @@
import FormBox from "../components/FormBox"; import FormBox from "../components/FormBox";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import { getUserInfoFromSession } from "../util/util";
function Home() { function Home() {
const { t } = useTranslation(); const { t } = useTranslation();
const holidayList = [{ date: '23 May, 2024', name: 'Buddha Purnima' }, { date: '15 June, 2024', name: 'Raja Sankranti' }]; 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 homePageNotifications = ['hpn_complete_before_31', 'hpn_npa', 'hpn_helpdesk_contact', 'hpn_rupay_kcc_time', 'hpn_rupay_kcc_atm'];
const userInformation = getUserInfoFromSession();
return ( 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 gap-7 flex-col basis-1/3">
<div className="flex-grow"> <div className="flex-grow">
<FormBox title={t('information')}> <FormBox title={t('holidayList')} alt={true}>
<h1>Welcome to the Home Page</h1> <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> </FormBox>
</div> </div>
<div className="flex-grow"> <div className="flex-grow">
<FormBox title={t('holidayList')}> <FormBox title={t('information')}>
<ul> <ul className="list-inside list-disc px-4">
{holidayList.map((holiday, index) => ( {
<li key={index}>{holiday.date} - {holiday.name}</li> 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> </ul>
</FormBox> </FormBox>
</div> </div>
@ -29,13 +37,12 @@ function Home() {
<FormBox title={t('notifications')}> <FormBox title={t('notifications')}>
<ul className="list-inside list-disc px-4"> <ul className="list-inside list-disc px-4">
{homePageNotifications.map((notification, index) => ( {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> </ul>
</FormBox> </FormBox>
</div> </div>
</div> </div>
</div> </div>
); );
} }

17
tailwind.config.js
View File

@ -12,18 +12,23 @@ export default {
transparent: 'transparent', transparent: 'transparent',
primary: { primary: {
DEFAULT: '#008C46', DEFAULT: '#008C46',
dark: '#6affb4' // dark: '#6affb4'
dark: '#E6F4E1'
}, },
secondary: { secondary: {
DEFAULT: '#B1E1B3', DEFAULT: '#B1E1B3',
dark: '#20542f', // dark: '#20542f',
// dark: '#3d9f59', dark: '#7DBD80',
variant: {DEFAULT: '#80AE82', dark: '#5F8E5F'} variant: {DEFAULT: '#80AE82', dark: '#5B875D'}
},
tertiary: {
DEFAULT: '#f2f2df',
dark: '#3d3d29',
}, },
surface: { surface: {
DEFAULT: '#F6F6F6', DEFAULT: '#F6F6F6',
dark: '#2d3133', dark: '#2d332d',
variant: {DEFAULT: '#F4FFF4', dark: '#3e4345'} variant: {DEFAULT: '#F4FFF4', dark: '#2b372c'}
}, },
}, },