sorted class name with headwind extension
This commit is contained in:
parent
267d463843
commit
9364a365ec
18
src/App.jsx
18
src/App.jsx
@ -3,13 +3,15 @@ import Header from "./components/Header"
|
||||
import Footer from "./components/Footer"
|
||||
|
||||
function App() {
|
||||
return <div className="flex flex-col min-h-screen">
|
||||
<Header />
|
||||
<main className="flex transition-color-mode p-12 flex-grow bg-surface dark:bg-surface-dark">
|
||||
<Outlet />
|
||||
</main>
|
||||
<Footer />
|
||||
</div>
|
||||
}
|
||||
return (
|
||||
<div className="flex flex-col min-h-screen">
|
||||
<Header />
|
||||
<main className="flex flex-grow p-12 transition-color-mode bg-surface dark:bg-surface-dark">
|
||||
<Outlet />
|
||||
</main>
|
||||
<Footer />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default App
|
||||
|
||||
@ -8,9 +8,9 @@ function AppTitle() {
|
||||
const { t } = useTranslation();
|
||||
return (
|
||||
<div className='flex items-center justify-between pt-3 pb-5'>
|
||||
<div className='flex gap-5 items-center'>
|
||||
<div className='flex items-center gap-5'>
|
||||
<img src={IpksLogo} alt="IPKS Logo" className="h-16" />
|
||||
<h1 className="text-title font-display font-bold">{t('appName')}</h1>
|
||||
<h1 className="font-bold text-title font-display">{t('appName')}</h1>
|
||||
</div>
|
||||
<div className='flex items-center gap-2'>
|
||||
<DarkModeToggle />
|
||||
|
||||
@ -22,9 +22,8 @@ const DarkModeToggle = () => {
|
||||
|
||||
return (
|
||||
<button
|
||||
className="p-2 text-gray-800 transition-colors duration-200 bg-gray-200 rounded-full"
|
||||
onClick={toggleDarkMode}
|
||||
className="p-2 rounded-full bg-gray-200 text-gray-800 transition-colors duration-200"
|
||||
data-theme={darkMode ? 'dark' : 'light'}
|
||||
aria-label={darkMode ? 'Switch to light mode' : 'Switch to dark mode'}
|
||||
>
|
||||
{darkMode ? <Sun className="w-5 h-5" /> : <Moon className="w-5 h-5" />}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
function Footer() {
|
||||
return (
|
||||
<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">
|
||||
<footer className="flex justify-between p-2 text-sm px-7 font-body bg-tertiary 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,10 +1,12 @@
|
||||
import { PropTypes } from 'prop-types';
|
||||
import clsx from 'clsx';
|
||||
|
||||
function FormBox({title, children, alt = false}) {
|
||||
function FormBox({ title, children, alt = false }) {
|
||||
return (
|
||||
<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>
|
||||
<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>
|
||||
);
|
||||
|
||||
@ -5,50 +5,50 @@ import MenuBar from "./MenuBar";
|
||||
import Separator from "./Separator";
|
||||
|
||||
function Header() {
|
||||
const userInfo = getUserInfoFromSession();
|
||||
const menuItems = [
|
||||
{ name: "home", submenu: [], path: "/" },
|
||||
{
|
||||
name: "moduleList",
|
||||
submenu: [
|
||||
{name: "kcc", path: "kcc"},
|
||||
{name: "trading", path: "trading"},
|
||||
{name: "asset", path: "asset"},
|
||||
{name: "selfHelpGroup", path: "shg"},
|
||||
{name: "deposit", path: "deposit"},
|
||||
{name: "loan", path: "loan"},
|
||||
{name: "share", path: "share"},
|
||||
],
|
||||
},
|
||||
{ name: "enquiry", submenu: [{name: "lockerEnquiry", path: "locker-enquiry"}, {name: "accountEnquiry", path: "account-enquiry"}] },
|
||||
{
|
||||
name: "lockerOperation",
|
||||
submenu: [
|
||||
{name: "accountCreation", path: "account-creation"},
|
||||
{name: "cabinetMaintenance", path: "cabinet-maintenance"},
|
||||
{name: "lockerMaintenance", path: "locker-maintenance"},
|
||||
{name: "rentPenaltyCollection", path: "rent-collection"},
|
||||
{name: "chargeManagement", path: "charge-management"},
|
||||
{name: "checkInOutManagement", path: "check-in-out"},
|
||||
{name: "accountSurrender", path: "account-surrender"}
|
||||
],
|
||||
},
|
||||
{ name: "worklist", submenu: [{name:"myIntimation", path: "my-intimation"}] },
|
||||
{
|
||||
name: "userManagement",
|
||||
submenu: [{name: "resetLogin", path: "reset-login"}, {name: "changePassword", path: "change-password"}],
|
||||
},
|
||||
{ name: "logout", submenu: [] },
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="transition-color-mode px-12 bg-secondary dark:bg-secondary-dark text-primary dark:text-primary-dark">
|
||||
<AppTitle />
|
||||
<BannerInfo info={userInfo} />
|
||||
<Separator />
|
||||
<MenuBar menuItems={menuItems} />
|
||||
</div>
|
||||
)
|
||||
const userInfo = getUserInfoFromSession();
|
||||
const menuItems = [
|
||||
{ name: "home", submenu: [], path: "/" },
|
||||
{
|
||||
name: "moduleList",
|
||||
submenu: [
|
||||
{ name: "kcc", path: "kcc" },
|
||||
{ name: "trading", path: "trading" },
|
||||
{ name: "asset", path: "asset" },
|
||||
{ name: "selfHelpGroup", path: "shg" },
|
||||
{ name: "deposit", path: "deposit" },
|
||||
{ name: "loan", path: "loan" },
|
||||
{ name: "share", path: "share" },
|
||||
],
|
||||
},
|
||||
{ name: "enquiry", submenu: [{ name: "lockerEnquiry", path: "locker-enquiry" }, { name: "accountEnquiry", path: "account-enquiry" }] },
|
||||
{
|
||||
name: "lockerOperation",
|
||||
submenu: [
|
||||
{ name: "accountCreation", path: "account-creation" },
|
||||
{ name: "cabinetMaintenance", path: "cabinet-maintenance" },
|
||||
{ name: "lockerMaintenance", path: "locker-maintenance" },
|
||||
{ name: "rentPenaltyCollection", path: "rent-collection" },
|
||||
{ name: "chargeManagement", path: "charge-management" },
|
||||
{ name: "checkInOutManagement", path: "check-in-out" },
|
||||
{ name: "accountSurrender", path: "account-surrender" }
|
||||
],
|
||||
},
|
||||
{ name: "worklist", submenu: [{ name: "myIntimation", path: "my-intimation" }] },
|
||||
{
|
||||
name: "userManagement",
|
||||
submenu: [{ name: "resetLogin", path: "reset-login" }, { name: "changePassword", path: "change-password" }],
|
||||
},
|
||||
{ name: "logout", submenu: [] },
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="px-12 transition-color-mode bg-secondary dark:bg-secondary-dark text-primary dark:text-primary-dark">
|
||||
<AppTitle />
|
||||
<BannerInfo info={userInfo} />
|
||||
<Separator />
|
||||
<MenuBar menuItems={menuItems} />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default Header;
|
||||
|
||||
@ -9,7 +9,7 @@ const LanguageSelector = () => {
|
||||
|
||||
return (
|
||||
<div>
|
||||
<select className='font-body rounded-md bg-secondary dark:bg-secondary-dark focus:outline-none' id="language-select" onChange={changeLanguage} value={i18n.language}>
|
||||
<select className='rounded-md font-body 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>
|
||||
|
||||
@ -2,19 +2,16 @@ import { Link } from "react-router-dom";
|
||||
import PropTypes from "prop-types";
|
||||
import { useTranslation } from "react-i18next";
|
||||
|
||||
const SubMenu = ({ items }) => {
|
||||
const {t} = useTranslation();
|
||||
function SubMenu({ items }) {
|
||||
const { t } = useTranslation();
|
||||
return (
|
||||
<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"
|
||||
>
|
||||
<div className="absolute left-0 z-50 invisible transition-all duration-200 -translate-y-6 shadow-sm opacity-0 top-full border-t-3 border-primary dark:border-primary-dark bg-secondary dark:bg-secondary-dark rounded-2xl shadow-surface-variant-dark dark:shadow-primary group-hover:visible group-hover:translate-y-0 group-hover:opacity-100">
|
||||
{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 cursor-pointer text-nowrap hover:bg-white dark:hover:bg-secondary-variant-dark first:rounded-t-2xl second-last:rounded-b-2xl first:pt-4 last:pb-4">
|
||||
<Link to={subItem.path}>{t(subItem.name)}</Link>
|
||||
</div>
|
||||
))}
|
||||
<svg className="absolute top-0 left-6 mt-[-13px] fill-primary dark:fill-primary-dark" width="16" height="13" viewBox="0 0 16 13" xmlns="http://www.w3.org/2000/svg">
|
||||
<svg className="absolute top-0 left-6 mt-[-13px] fill-primary dark:fill-primary-dark" width="16" height="13" viewBox="0 0 16 13" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M6.26795 1C7.03775 -0.333332 8.96225 -0.333334 9.73205 0.999999L14.9282 10C15.698 11.3333 14.7358 13 13.1962 13H2.80385C1.26425 13 0.301996 11.3333 1.0718 10L6.26795 1Z" />
|
||||
</svg>
|
||||
</div>
|
||||
@ -22,11 +19,11 @@ const SubMenu = ({ items }) => {
|
||||
};
|
||||
|
||||
function MenuBar({ menuItems }) {
|
||||
const {t} = useTranslation();
|
||||
const { t } = useTranslation();
|
||||
return (
|
||||
<div className="flex justify-between text-base pt-5 pb-2 font-body">
|
||||
<div className="flex justify-between pt-5 pb-2 text-base font-body">
|
||||
{menuItems.map((item, index) =>
|
||||
<div key={index} className="group relative pb-3 cursor-pointer">
|
||||
<div key={index} className="relative pb-3 cursor-pointer group">
|
||||
{t(item.name)}
|
||||
{item.submenu.length > 0 && <SubMenu items={item.submenu} />}
|
||||
</div>
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
function Separator() {
|
||||
return (
|
||||
<div className="h-[2px]">
|
||||
<div className="h-full w-full bg-white dark:bg-primary-dark rounded-md"></div>
|
||||
<div className="w-full h-full bg-white rounded-md dark:bg-primary-dark"></div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
@ -9,7 +9,7 @@ i18n
|
||||
.use(initReactI18next)
|
||||
.init({
|
||||
fallbackLng: 'en',
|
||||
interpolation: { escapeValue: false},
|
||||
interpolation: { escapeValue: false },
|
||||
debug: true,
|
||||
backend: {
|
||||
loadPath: '/locales/{{lng}}/{{ns}}.json',
|
||||
|
||||
@ -10,22 +10,22 @@ function Home() {
|
||||
|
||||
return (
|
||||
<div className="flex flex-grow gap-7">
|
||||
<div className="flex gap-7 flex-col basis-1/3">
|
||||
<div className="flex flex-col gap-7 basis-1/3">
|
||||
<div className="flex-grow">
|
||||
<FormBox title={t('holidayList')} alt={true}>
|
||||
<ul className="list-inside list-disc px-4">
|
||||
<ul className="px-4 list-disc list-inside">
|
||||
{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>
|
||||
<li key={index} className="py-2 font-body 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('information')}>
|
||||
<ul className="list-inside list-disc px-4">
|
||||
<ul className="px-4 list-disc list-inside">
|
||||
{
|
||||
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>
|
||||
<li key={index} className="py-2 font-body text-surface-dark dark:text-surface text-lg/loose">{t(key)}: {t(userInformation[key])}</li>
|
||||
))
|
||||
}
|
||||
</ul>
|
||||
@ -35,9 +35,9 @@ function Home() {
|
||||
<div className="basis-2/3">
|
||||
<div className="h-full">
|
||||
<FormBox title={t('notifications')}>
|
||||
<ul className="list-inside list-disc px-4">
|
||||
<ul className="px-4 list-disc list-inside">
|
||||
{homePageNotifications.map((notification, index) => (
|
||||
<li key={index} className="font-body py-2 text-surface-dark dark:text-surface text-lg/relaxed">{t(notification)}</li>
|
||||
<li key={index} className="py-2 font-body text-surface-dark dark:text-surface text-lg/relaxed">{t(notification)}</li>
|
||||
))}
|
||||
</ul>
|
||||
</FormBox>
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
function Placeholder() {
|
||||
return (
|
||||
<div className="h-max text-center text-2xl font-body text-primary dark:text-primary-dark">
|
||||
<div className="text-2xl text-center h-max font-body text-primary dark:text-primary-dark">
|
||||
<h1>Placeholder</h1>
|
||||
</div >
|
||||
);
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user