iod/page-assist
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Add RTL support for sidepanel settings header

Browse Source
This commit is contained in:
n4ze3m 2024-12-29 13:28:15 +05:30
parent db3a80c081
commit efb49d8e34
1 changed files with 11 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/components/Sidepanel/Settings/header.tsx
View File

@ -1,14 +1,22 @@
import { ChevronLeft } from "lucide-react" import { ChevronLeft, ChevronRight } from "lucide-react"
import { useTranslation } from "react-i18next" import { useTranslation } from "react-i18next"
import { Link } from "react-router-dom" import { Link } from "react-router-dom"
import logoImage from "~/assets/icon.png" import logoImage from "~/assets/icon.png"
export const SidepanelSettingsHeader = () => { export const SidepanelSettingsHeader = () => {
const { t } = useTranslation("common") const { t , i18n} = useTranslation("common")
const isRTL = i18n?.dir() === "rtl"
return ( return (
<div className="flex px-3 justify-start gap-3 bg-white dark:bg-[#171717] border-b border-gray-300 dark:border-gray-700 py-4 items-center"> <div className="flex px-3 justify-start gap-3 bg-white dark:bg-[#171717] border-b border-gray-300 dark:border-gray-700 py-4 items-center">
<Link to="/"> <Link to="/">
<ChevronLeft className="h-5 w-5 text-gray-500 dark:text-gray-400" /> {
isRTL ? (
<ChevronRight className="h-5 w-5 text-gray-500" />
) : (
<ChevronLeft className="h-5 w-5 text-gray-500" />
)
}
</Link> </Link>
<div className="focus:outline-none focus-visible:ring-2 focus-visible:ring-pink-700 flex items-center dark:text-white"> <div className="focus:outline-none focus-visible:ring-2 focus-visible:ring-pink-700 flex items-center dark:text-white">
<img className="h-6 w-auto" src={logoImage} alt={t("pageAssist")} /> <img className="h-6 w-auto" src={logoImage} alt={t("pageAssist")} />