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

sorted class name with headwind extension

Browse Source
This commit is contained in:
Md Asif 2024-10-05 00:07:06 +05:30
parent 267d463843
commit 9364a365ec
12 changed files with 81 additions and 81 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/App.jsx
View File

@ -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">
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">
<main className="flex flex-grow p-12 transition-color-mode bg-surface dark:bg-surface-dark">
<Outlet />
</main>
<Footer />
</div>
)
}
export default App

4
src/components/AppTitle.jsx
View File

@ -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 />

3
src/components/DarkModeToggle.jsx
View File

@ -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" />}

2
src/components/Footer.jsx
View File

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

4
src/components/FormBox.jsx
View File

@ -4,7 +4,9 @@ import clsx from 'clsx';
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>
);

2
src/components/Header.jsx
View File

@ -42,7 +42,7 @@ function Header() {
];
return (
<div className="transition-color-mode px-12 bg-secondary dark:bg-secondary-dark text-primary dark:text-primary-dark">
<div className="px-12 transition-color-mode bg-secondary dark:bg-secondary-dark text-primary dark:text-primary-dark">
<AppTitle />
<BannerInfo info={userInfo} />
<Separator />

2
src/components/LanguageSelector.jsx
View File

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

13
src/components/MenuBar.jsx
View File

@ -2,15 +2,12 @@ import { Link } from "react-router-dom";
import PropTypes from "prop-types";
import { useTranslation } from "react-i18next";
const SubMenu = ({ items }) => {
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>
))}
@ -24,9 +21,9 @@ const SubMenu = ({ items }) => {
function MenuBar({ menuItems }) {
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>

2
src/components/Separator.jsx
View File

@ -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>
)
}

14
src/pages/Home.jsx
View File

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

2
src/pages/Placeholder.jsx
View File

@ -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 >
);