Merge pull request #22 from smswithoutborders/dev

Fixed RTL direction problem
smswithoutborders · Jun 27, 2024 · ee04b35 · ee04b35
2 parents 38a6b5d + 767e3dc
commit ee04b35
Show file tree

Hide file tree

Showing 4 changed files with 358 additions and 266 deletions.
diff --git a/src/App.css b/src/App.css
@@ -157,3 +157,10 @@ button:hover {
 	font-size: 30px;
 	text-align: center;
 }
+
+/* carousel */
+.centered-carousel {
+	display: flex;
+	/* justify-content: center; */
+	/* align-items: center; */
+}
diff --git a/src/Components/Blog.js b/src/Components/Blog.js
@@ -5,7 +5,9 @@ import { Card, CardContent, CardMedia, Typography, Box, Avatar } from "@mui/mate
 import { useTranslation } from "react-i18next";
 
 const BlogCarousel = () => {
-	const { t } = useTranslation();
+	const { t, i18n } = useTranslation();
+
+	const isRTL = i18n.language === "fa"; // Check if the current language is RTL
 
 	const items = [
 		{
@@ -27,113 +29,129 @@ const BlogCarousel = () => {
 	];
 
 	return (
-		<Carousel
-			additionalTransfrom={0}
-			arrows
-			autoPlaySpeed={3000}
-			centerMode={false}
-			className=""
-			containerClass="container-with-dots"
-			dotListClass=""
-			draggable
-			focusOnSelect={false}
-			infinite
-			itemClass=""
-			keyBoardControl
-			minimumTouchDrag={80}
-			pauseOnHover
-			renderArrowsWhenDisabled={false}
-			renderButtonGroupOutside={false}
-			renderDotsOutside={false}
-			responsive={{
-				desktop: {
-					breakpoint: {
-						max: 3000,
-						min: 1024
-					},
-					items: 3,
-					partialVisibilityGutter: 40
-				},
-				mobile: {
-					breakpoint: {
-						max: 464,
-						min: 0
+		<Box sx={{ direction: isRTL ? "rtl" : "ltr" }}>
+			{" "}
+			{/* Set the direction based on isRTL */}
+			<Carousel
+				additionalTransfrom={0}
+				arrows
+				autoPlaySpeed={3000}
+				centerMode={false}
+				className="centered-carousel"
+				containerClass="container-with-dots"
+				dotListClass=""
+				draggable
+				focusOnSelect={false}
+				infinite
+				itemClass=""
+				keyBoardControl
+				minimumTouchDrag={80}
+				pauseOnHover
+				renderArrowsWhenDisabled={false}
+				renderButtonGroupOutside={false}
+				renderDotsOutside={false}
+				responsive={{
+					desktop: {
+						breakpoint: {
+							max: 3000,
+							min: 1024
+						},
+						items: 3,
+						partialVisibilityGutter: 40
 					},
-					items: 1,
-					partialVisibilityGutter: 30
-				},
-				tablet: {
-					breakpoint: {
-						max: 1024,
-						min: 464
+					mobile: {
+						breakpoint: {
+							max: 464,
+							min: 0
+						},
+						items: 1,
+						partialVisibilityGutter: 30
 					},
-					items: 2,
-					partialVisibilityGutter: 30
-				}
-			}}
-			rewind={false}
-			rewindWithAnimation={false}
-			rtl={false}
-			shouldResetAutoplay
-			showDots={false}
-			sliderClass=""
-			slidesToSlide={1}
-			swipeable
-		>
-			{items.map((item, index) => (
-				<div key={index}>
-					<Card
-						sx={{
-							maxWidth: { xs: "100%", sm: "400px" },
-							mx: "auto",
-							boxShadow: "0 4px 8px #041c94",
-							transition: "transform 0.3s ease-in-out",
-							borderRadius: 8,
-							border: "1px solid #e0e0e0",
-							"&:hover": {
-								transform: "scale(1.02)",
-								boxShadow: "0 8px 16px #041c94",
-								border: "1px solid #8AC1EE"
-							},
-							marginRight: "30px",
-							marginLeft: "40px",
-							marginBottom: "20px"
-						}}
-					>
-						<CardMedia
-							component="img"
-							height="200"
-							image={item.image}
-							alt={item.title}
-							sx={{ objectFit: "cover", width: "100%" }}
-						/>
-						<CardContent>
-							<Typography
-								gutterBottom
-								variant="h5"
-								component="div"
-								sx={{ fontSize: { xs: "1.25rem", md: "1.5rem" } }}
+					tablet: {
+						breakpoint: {
+							max: 1024,
+							min: 464
+						},
+						items: 2,
+						partialVisibilityGutter: 30
+					}
+				}}
+				rewind={false}
+				rewindWithAnimation={false}
+				rtl={isRTL} // Set RTL based on the current language
+				shouldResetAutoplay
+				showDots={false}
+				sliderClass=""
+				slidesToSlide={1}
+				swipeable
+			>
+				{items.map((item, index) => (
+					<div key={index}>
+						<Card
+							sx={{
+								maxWidth: { xs: "100%", sm: "400px" },
+								mx: "auto",
+								boxShadow: "0 4px 8px #041c94",
+								transition: "transform 0.3s ease-in-out",
+								borderRadius: 8,
+								border: "1px solid #e0e0e0",
+								"&:hover": {
+									transform: "scale(1.02)",
+									boxShadow: "0 8px 16px #041c94",
+									border: "1px solid #8AC1EE"
+								},
+								marginRight: isRTL ? "0" : "30px", // Adjust margin based on RTL
+								marginLeft: isRTL ? "30px" : "0", // Adjust margin based on RTL
+								marginBottom: "20px"
+							}}
+						>
+							<CardMedia
+								component="img"
+								height="200"
+								image={item.image}
+								alt={item.title}
+								sx={{ objectFit: "cover", width: "100%" }}
+							/>
+							<CardContent sx={{ textAlign: isRTL ? "right" : "left" }}>
+								{" "}
+								{/* Adjust text alignment based on RTL */}
+								<Typography
+									gutterBottom
+									variant="h5"
+									component="div"
+									sx={{ fontSize: { xs: "1.25rem", md: "1.5rem" } }}
+								>
+									{item.title}
+								</Typography>
+								<Typography variant="body2" color="text.secondary">
+									{item.description}
+									<a style={{ color: "#8AC1EE" }} href={item.link} target="_blank" rel="noreferrer">
+										<br />
+										{t("Blog.ReadMore")}
+									</a>
+								</Typography>
+							</CardContent>
+							<Box
+								sx={{
+									display: "flex",
+									alignItems: "center",
+									px: 2,
+									pb: 2,
+									justifyContent: isRTL ? "flex-end" : "flex-start"
+								}}
 							>
-								{item.title}
-							</Typography>
-							<Typography variant="body2" color="text.secondary">
-								{item.description}
-								<a style={{ color: "#8AC1EE" }} href={item.link} target="_blank" rel="noreferrer">
-									<br />
-									{t("Blog.ReadMore")}
-								</a>
-							</Typography>
-						</CardContent>
-						<Box sx={{ display: "flex", alignItems: "center", px: 2, pb: 2 }}>
-							<Avatar>{item.avatar}</Avatar>
-							<Typography variant="body2" sx={{ p: 1 }}>
-								{item.author}
-							</Typography>
-						</Box>
-					</Card>
-				</div>
-			))}
-		</Carousel>
+								{" "}
+								{/* Adjust alignment based on RTL */}
+								<Avatar>{item.avatar}</Avatar>
+								<Typography variant="body2" sx={{ p: 1 }}>
+									{item.author}
+								</Typography>
+							</Box>
+						</Card>
+					</div>
+				))}
+			</Carousel>
+		</Box>
 	);
 };