Changed the direction of the rows

This commit is contained in:
Tiago Ribeiro
2023-10-23 23:55:08 +01:00
parent ea8b20f50c
commit 28d91f1afa
3 changed files with 13 additions and 8 deletions

View File

@@ -2,6 +2,7 @@ import Link from "next/link";
import {BiLogoFacebook} from "react-icons/bi";
import {BsInstagram, BsTwitter} from "react-icons/bs";
import translation from "@/translation/footer.json";
import clsx from "clsx";
interface Props {
language: "en" | "ar";
@@ -11,7 +12,11 @@ export default function Footer({language}: Props) {
return (
<>
<section className="bg-mti-gray-seasalt w-full">
<div className="w-full py-10 px-8 md:px-28 flex flex-col md:flex-row md:justify-between gap-8 lg:container lg:mx-auto">
<div
className={clsx(
"w-full py-10 px-8 md:px-28 flex flex-col md:justify-between gap-8 lg:container lg:mx-auto",
language === "ar" ? "md:flex-row-reverse" : "md:flex-row",
)}>
<div className="flex flex-col gap-4">
<span className="font-bold text-xl">{translation.navigation.text[language]}</span>
<div className="flex flex-col gap-2">
@@ -41,7 +46,7 @@ export default function Footer({language}: Props) {
<span className="font-bold text-xl">{translation.get_in_touch.title[language]}</span>
<div className="flex flex-col gap-4">
<span className="max-w-[280px]">{translation.get_in_touch.text[language]}</span>
<div className="flex gap-6 items-center">
<div className={clsx("flex gap-6 items-center", language === "ar" && "flex-row-reverse justify-start")}>
<Link
href="https://facebook.com"
className="bg-mti-purple-ultralight rounded-full w-10 h-10 flex items-center justify-center hover:bg-mti-purple-dark text-mti-purple-light hover:text-white transition ease-in-out duration-300">

View File

@@ -27,7 +27,7 @@ export default function Navbar({currentPage, language}: {currentPage: string; la
<Link href="/">
<Image src="/logo_title.png" alt="EnCoach logo" width={80} height={80} />
</Link>
<div className="flex gap-8 items-center w-fit">
<div className={clsx("flex gap-8 items-center w-fit", language === "ar" && "flex-row-reverse")}>
{items.map((item) => (
<Link
key={item.key}
@@ -114,7 +114,7 @@ export default function Navbar({currentPage, language}: {currentPage: string; la
</div>
</div>
</Dialog.Title>
<div className="flex flex-col gap-6 px-8 text-lg">
<div className={clsx("flex flex-col gap-6 px-8 text-lg", language === "ar" && "items-end")}>
{items.map((item) => (
<Link
key={item.key}