From 49bd72cc6d59e2dee5801d9c816345686ba1181f Mon Sep 17 00:00:00 2001 From: Ajay-Dhangar Date: Mon, 30 Sep 2024 21:33:21 +0530 Subject: [PATCH 1/3] modify main code --- .../ArrayVisualization.css | 27 ----- .../DSA/arrays/ArrayVisualizations/index.tsx | 112 ++++++++++-------- src/components/HomePage/TweetsSection.tsx | 74 ++++++++++++ src/pages/index.module.css | 10 -- src/pages/index.tsx | 69 +---------- 5 files changed, 142 insertions(+), 150 deletions(-) delete mode 100644 src/components/DSA/arrays/ArrayVisualizations/ArrayVisualization.css create mode 100644 src/components/HomePage/TweetsSection.tsx diff --git a/src/components/DSA/arrays/ArrayVisualizations/ArrayVisualization.css b/src/components/DSA/arrays/ArrayVisualizations/ArrayVisualization.css deleted file mode 100644 index b55cf6ec3..000000000 --- a/src/components/DSA/arrays/ArrayVisualizations/ArrayVisualization.css +++ /dev/null @@ -1,27 +0,0 @@ -.array-visualizations { - padding: 20px; - border: 1px solid #3498db; - border-radius: 5px; -} - -.array-visualizations .array-container { - display: flex; - justify-content: center; - align-items: flex-end; - height: 300px; -} - -.array-visualizations .array-bar { - width: 20px; - margin: 0 2px; - background-color: #3498db; - transition: height 0.3s, background-color 0.3s; -} - -.array-visualizations .min-value { - background-color: #e74c3c; -} - -.array-visualizations .current-value { - background-color: yellow; -} diff --git a/src/components/DSA/arrays/ArrayVisualizations/index.tsx b/src/components/DSA/arrays/ArrayVisualizations/index.tsx index 6c5101b5a..7e974d9ce 100644 --- a/src/components/DSA/arrays/ArrayVisualizations/index.tsx +++ b/src/components/DSA/arrays/ArrayVisualizations/index.tsx @@ -1,46 +1,25 @@ -import React, { useState, useEffect } from 'react'; -import './ArrayVisualization.css'; +import React, { useState, useEffect } from "react"; const ArrayVisualizations: React.FC = () => { - // State variables - const [array, setArray] = useState([]); // Holds the array of numbers - const [delay, setDelay] = useState(300); // Controls the delay for visualization - const [minIndex, setMinIndex] = useState(null); // Index of the minimum value in the array - const [isDisabled, setIsDisabled] = useState(false); // Controls button disable state - const [currentIndex, setCurrentIndex] = useState(null); // Current index being evaluated - const [isSorting, setIsSorting] = useState(false); // Indicates if the array is being sorted + const [array, setArray] = useState([]); + const [delay, setDelay] = useState(300); + const [minIndex, setMinIndex] = useState(null); + const [isDisabled, setIsDisabled] = useState(false); + const [currentIndex, setCurrentIndex] = useState(null); + const [isSorting, setIsSorting] = useState(false); - // Generates a new array when the component mounts useEffect(() => { - generateArray(); + generateArray(); }, []); - // Updates the transition duration whenever the delay changes - useEffect(() => { - updateMoveDuration(); - }, [delay]); - - // Function to generate a new array with random values const generateArray = () => { - const newArray = Array.from({ length: 18 }, () => Math.ceil(Math.random() * 90) + 10); + const newArray = Array.from( + { length: 12 }, + () => Math.ceil(Math.random() * 90) + 10 + ); setArray(newArray); }; - // Function to update the transition duration for CSS animations - const updateMoveDuration = () => { - const stylesheets = document.styleSheets; - for (let i = 0; i < stylesheets.length; i++) { - const rules = (stylesheets[i] as CSSStyleSheet).cssRules || (stylesheets[i] as CSSStyleSheet).rules; - for (let j = 0; j < rules.length; j++) { - if ((rules[j] as CSSStyleRule).selectorText === '.v-move') { - (rules[j] as CSSStyleRule).style.transitionDuration = `${delay}ms`; - break; - } - } - } - }; - - // Function to find the lowest value in the array const findLowest = async () => { setIsDisabled(true); setIsSorting(true); @@ -52,36 +31,75 @@ const ArrayVisualizations: React.FC = () => { minVal = array[j]; minIdx = j; } - await new Promise(resolve => setTimeout(resolve, delay)); + await new Promise((resolve) => setTimeout(resolve, delay)); } setMinIndex(minIdx); setIsSorting(false); setIsDisabled(false); }; - // Function to reset the array to new random values const resetArray = () => { generateArray(); setMinIndex(null); }; return ( -
-

Speed: setDelay(Number(e.target.value))} />

- -   - -

Lowest value: {minIndex !== null ? array[minIndex] : null}

-

-
+
+
+

+ Speed:{" "} + setDelay(Number(e.target.value))} + className="ml-2" + /> +

+
+ + +
+
+

+ Lowest value of{" "} + + [ + {array.map( + (value, index) => + `${value}${index === array.length - 1 ? "" : ", "}` + )} + ]{" "} + + :   + + {minIndex !== null ? array[minIndex] : null} + +

+
{array.map((value, index) => (
+ /> ))} -
+
); }; diff --git a/src/components/HomePage/TweetsSection.tsx b/src/components/HomePage/TweetsSection.tsx new file mode 100644 index 000000000..21ed1385a --- /dev/null +++ b/src/components/HomePage/TweetsSection.tsx @@ -0,0 +1,74 @@ +import { motion } from "framer-motion"; +import { Swiper, SwiperSlide } from "swiper/react"; +import { Navigation, Pagination, Autoplay } from "swiper/modules"; +import Tweet from "../Tweet"; +import Tweets from "../../data/tweets"; +import "swiper/css"; +import "swiper/css/navigation"; +import "swiper/css/pagination"; +import React from "react"; + +type TweetType = { + id: number; + showOnHomepage: boolean; +}; + +export const TweetsSection: React.FC = () => { + const tweetColumns = [[], [], []] as TweetType[][]; + + // Distribute the tweets into 3 columns + Tweets.filter((tweet) => tweet.showOnHomepage).forEach((tweet, i) => + tweetColumns[i % 3].push(tweet) + ); + + return ( +
+ {/* Section Title */} + +

+ Loved by Many Users +

+
+ + + {/* Swiper Tweets */} + + {/* Map through tweetColumns and render SwiperSlides */} + {tweetColumns.map((tweetItems, columnIndex) => + tweetItems.map((tweet, tweetIndex) => ( + +
+ +
+ + )) + )} + +
+ ); +}; + +export default TweetsSection; \ No newline at end of file diff --git a/src/pages/index.module.css b/src/pages/index.module.css index cb67bb04a..61c77ff66 100644 --- a/src/pages/index.module.css +++ b/src/pages/index.module.css @@ -47,14 +47,4 @@ border-radius: 4px; cursor: pointer; text-align: center; -} - -.tweetContainer { - transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease; - margin-bottom: 1rem; -} - -.tweetContainer:hover { - transform: scale(1.1); - box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); } \ No newline at end of file diff --git a/src/pages/index.tsx b/src/pages/index.tsx index d1803b2ca..67097c29c 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -6,9 +6,6 @@ import Layout from "@theme/Layout"; import Heading from "@theme/Heading"; import Head from "@docusaurus/Head"; import Header from "../components/HomePage/Header"; -import Tweet from "../components/Tweet"; -import Tweets from "../data/tweets"; -import { motion } from "framer-motion"; import ResourcesSection from "../components/HomePage/ResourcesSection"; import ScrollTopToButton from "../components/Buttons/bottom/ScrollTopToButton"; import ScrollBottomToTop from "../components/Buttons/top/ScrollBottomToTop"; @@ -16,67 +13,7 @@ import { LandingCommunity } from "../components/HomePage/Community"; import { CommunityStatsProvider } from "../context/CommunityStats"; import Faq from "./Faq"; import Organizations from "../components/HomePage/organizations"; -import "swiper/css"; -import "swiper/css/navigation"; -import "swiper/css/pagination"; -import { Swiper, SwiperSlide } from "swiper/react"; -import { Navigation, Pagination, Autoplay } from "swiper/modules"; - -function TweetsSection() { - const tweetColumns = [[], [], []]; - Tweets.filter((tweet) => tweet.showOnHomepage).forEach((tweet, i) => - tweetColumns[i % 3].push(tweet) - ); - - return ( -
-
- - - Loved by many Users - - - - {tweetColumns.map((tweetItems, columnIndex) => - tweetItems.map((tweet, tweetIndex) => ( - -
-
- -
-
- - )) - )} - -
-
- ); -} +import TweetsSection from "../components/HomePage/TweetsSection"; export default function Home() { const { siteConfig } = useDocusaurusContext(); @@ -91,12 +28,12 @@ export default function Home() { async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-5832817025080991" crossOrigin="anonymous" - /> + />