From 081f28f64b36384af1d80f3a361560a46b824d99 Mon Sep 17 00:00:00 2001
From: develad <develadb@gmail.com>
Date: Thu, 4 Apr 2024 12:25:36 +0300
Subject: [PATCH] Controlling the member card style using the use TextDirection
 hook

---
 app/[locale]/not-found.tsx                             |  2 +-
 components/Members/MemberCard/MemberCard.tsx           |  7 ++++++-
 components/Members/MemberCard/MemberCardInfo.tsx       |  9 ++++++++-
 .../Members/MemberCard/MemberCardSocialButtons.tsx     | 10 +++++++++-
 4 files changed, 24 insertions(+), 4 deletions(-)

diff --git a/app/[locale]/not-found.tsx b/app/[locale]/not-found.tsx
index b6696fc..6582321 100644
--- a/app/[locale]/not-found.tsx
+++ b/app/[locale]/not-found.tsx
@@ -13,7 +13,7 @@ export default function NotFound() {
       <p>{t('paragraph')}</p>
       <Link
         href={LINKS.HOME}
-        className="w-[250px] my-8 text-xs discord-btn rounded-full px-7 py-2 flex items-start justify-center gap-2 dark:hover:bg-purple-200 item-hover-transition items-center"
+        className="w-[250px] my-8 text-xs discord-btn rounded-full px-7 py-2 flex justify-center gap-2 dark:hover:bg-purple-200 item-hover-transition items-center"
       >
         {t('home')}{' '}
         <div className="fill-white dark:fill-black">
diff --git a/components/Members/MemberCard/MemberCard.tsx b/components/Members/MemberCard/MemberCard.tsx
index ed70c8f..248ed36 100644
--- a/components/Members/MemberCard/MemberCard.tsx
+++ b/components/Members/MemberCard/MemberCard.tsx
@@ -2,6 +2,7 @@ import React from 'react';
 import { MemberCardInfo } from './MemberCardInfo';
 import { MemberCardSocialButtons } from './MemberCardSocialButtons';
 import { MemberCardInfoProps } from '../../../types';
+import useTextDirection from '@/hooks/useTextDirection';
 
 type MemberCardProps = MemberCardInfoProps;
 
@@ -16,8 +17,12 @@ export const MemberCard = ({
   twitterUrl,
   githubUrl,
 }: MemberCardProps) => {
+  const direction = useTextDirection();
   return (
-    <div dir='rtl' className="flex bg-purple-100 dark:bg-gray-600 rounded-2xl shadow-md w-full xl:w-[400px] xl:h-[173px]">
+    <div
+      dir={direction}
+      className="flex bg-purple-100 dark:bg-gray-600 rounded-2xl shadow-md w-full xl:w-[400px] xl:h-[173px]"
+    >
       <MemberCardInfo
         imgUrl={imgUrl}
         name={name}
diff --git a/components/Members/MemberCard/MemberCardInfo.tsx b/components/Members/MemberCard/MemberCardInfo.tsx
index 18b9c3f..e8b1a90 100644
--- a/components/Members/MemberCard/MemberCardInfo.tsx
+++ b/components/Members/MemberCard/MemberCardInfo.tsx
@@ -2,6 +2,7 @@ import React from 'react';
 import ImageWithFallback from '@/components/utils/ImageWithFallback';
 import { MemberCardProps } from '../../../types';
 import Crown from '@/components/SvgCmps/Crown';
+import useTextDirection from '@/hooks/useTextDirection';
 
 export const MemberCardInfo = ({
   imgUrl,
@@ -11,8 +12,14 @@ export const MemberCardInfo = ({
   joinDate,
   isAdmin,
 }: MemberCardProps) => {
+  const direction = useTextDirection();
   return (
-    <div className="flex flex-col rounded-md p-[10px] pr-6 w-full">
+    <div
+      dir={direction}
+      className={`flex flex-col rounded-md p-[10px] ${
+        direction === 'rtl' ? 'pr-6' : 'pl-6'
+      } w-full`}
+    >
       <div className="flex gap-4">
         <ImageWithFallback
           width="50"
diff --git a/components/Members/MemberCard/MemberCardSocialButtons.tsx b/components/Members/MemberCard/MemberCardSocialButtons.tsx
index 56f1b73..981b86c 100644
--- a/components/Members/MemberCard/MemberCardSocialButtons.tsx
+++ b/components/Members/MemberCard/MemberCardSocialButtons.tsx
@@ -2,6 +2,7 @@ import React from 'react';
 import { TwitterMemberLink } from './socialIcons/TwiterMemberLink';
 import { LinkedInMemberLink } from './socialIcons/LinkedInMemberLink';
 import { GithubMemberLink } from './socialIcons/GithubMemberLink';
+import useTextDirection from '@/hooks/useTextDirection';
 
 interface MemberCardSocialButtonsProps {
   linkedInUrl: string;
@@ -14,8 +15,15 @@ export const MemberCardSocialButtons = ({
   twitterUrl,
   githubUrl,
 }: MemberCardSocialButtonsProps) => {
+  const direction = useTextDirection();
   return (
-    <div className="flex flex-col w-[67px] bg-purple-200 justify-evenly dark:bg-gray-800 rounded-tl-2xl rounded-bl-2xl shadow-2xl">
+    <div
+      className={`flex flex-col w-[67px] bg-purple-200 justify-evenly dark:bg-gray-800 shadow-2xl ${
+        direction === 'rtl'
+          ? 'rounded-tl-2xl rounded-bl-2xl'
+          : 'rounded-tr-2xl rounded-br-2xl'
+      }`}
+    >
       <LinkedInMemberLink linkedInUrl={linkedInUrl} />
       <TwitterMemberLink twitterUrl={twitterUrl} />
       <GithubMemberLink githubUrl={githubUrl} />