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

Refactor language selector and separator components

Browse Source
This commit is contained in:
Md Asif 2024-09-30 20:23:47 +05:30
parent 2f7850dcd8
commit 8022e3a662
3 changed files with 17 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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' 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>

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 rounded-md"></div>
</div> </div>
) )
} }

22
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="py-7 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')}>
<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-1 text-surface-dark dark:text-surface text-lg/loose">{holiday.date} - {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-1 text-surface-dark dark:text-surface text-lg/loose">{t(key)}: {t(userInformation[key])}</li>
))
}
</ul> </ul>
</FormBox> </FormBox>
</div> </div>