From ca05bf4f9e9c58c43372ed536f56417b813eeb87 Mon Sep 17 00:00:00 2001 From: AsmitaMishra24 <146121869+AsmitaMishra24@users.noreply.github.com> Date: Sat, 13 Jul 2024 18:30:52 +0530 Subject: [PATCH] Added Back-To-Top Button --- blog/2021-08-01-mdx-blog-post.mdx | 4 ++ .../index.md | 4 ++ docs/day-01/getting-started-with-cpp.md | 2 + docs/day-01/history-of-cpp.md | 4 ++ docs/day-01/introduction-to-cpp.md | 3 ++ docs/day-02/comments-in-cpp.md | 6 ++- docs/day-02/first-cpp-program.md | 6 ++- docs/day-02/keywords-identifiers.md | 5 ++- docs/day-02/new-line-in-cpp.md | 5 ++- docs/day-03/cpp-type-modifiers.md | 2 + docs/day-03/datatypes-in-cpp.md | 4 ++ .../variables-literals-constant-in-cpp.md | 4 +- docs/day-04/constants-in-cpp.md | 3 ++ docs/day-04/input-output-in-cpp.md | 4 ++ docs/day-04/operators-in-cpp.md | 4 ++ docs/day-05/Logical Operators.md | 7 ++- docs/day-05/arithmetic-Operators.md | 4 ++ docs/day-05/do-while-loop.md | 3 ++ docs/day-05/for-loop.md | 5 ++- docs/day-05/if-else-statement.md | 3 ++ docs/day-05/relational_operators.md | 6 ++- docs/day-06/If-statement.md | 7 ++- docs/day-06/break-statement.md | 4 +- docs/day-06/continue-statement.md | 5 +++ docs/day-06/goto-statement.md | 4 ++ docs/day-22/Linear Search.md | 6 ++- package.json | 4 +- src/components/BackToTop/BackToTop.css | 42 ++++++++++++++++++ src/components/BackToTop/BackToTop.js | 43 +++++++++++++++++++ src/pages/index.js | 2 + 30 files changed, 191 insertions(+), 14 deletions(-) create mode 100644 src/components/BackToTop/BackToTop.css create mode 100644 src/components/BackToTop/BackToTop.js diff --git a/blog/2021-08-01-mdx-blog-post.mdx b/blog/2021-08-01-mdx-blog-post.mdx index 00674f042..13029c9c2 100644 --- a/blog/2021-08-01-mdx-blog-post.mdx +++ b/blog/2021-08-01-mdx-blog-post.mdx @@ -5,6 +5,8 @@ authors: [shubhadip] tags: [cpp] --- +import BackToTop from '@site/src/components/BackToTop/BackToTop'; + Blog posts support [Docusaurus Markdown features](https://docusaurus.io/docs/markdown-features), such as [MDX](https://mdxjs.com/). :::tip @@ -18,3 +20,5 @@ Use the power of React to create interactive blog posts. ::: + + \ No newline at end of file diff --git a/blog/2024-06-25-STL-inportant-questions/index.md b/blog/2024-06-25-STL-inportant-questions/index.md index 329ea6512..6d77b3e9e 100644 --- a/blog/2024-06-25-STL-inportant-questions/index.md +++ b/blog/2024-06-25-STL-inportant-questions/index.md @@ -5,6 +5,8 @@ authors: [shubhadip] tags: [cpp, programming] --- +import BackToTop from '@site/src/components/BackToTop/BackToTop'; + Blog posts support [Docusaurus Markdown features](https://docusaurus.io/docs/markdown-features), such as [MDX](https://mdxjs.com/). :::tip @@ -18,3 +20,5 @@ Use the power of React to create interactive blog posts. ::: + + \ No newline at end of file diff --git a/docs/day-01/getting-started-with-cpp.md b/docs/day-01/getting-started-with-cpp.md index 28bc6c733..8f273b1d8 100644 --- a/docs/day-01/getting-started-with-cpp.md +++ b/docs/day-01/getting-started-with-cpp.md @@ -6,6 +6,7 @@ sidebar_label: "Getting Started with C++" slug: getting-started-with-cpp --- +import BackToTop from '@site/src/components/BackToTop/BackToTop'; import CustomTag from '@site/src/components/TagsComponents/CustomTag'; C++ is a general-purpose programming language and is widely used nowadays for competitive programming. It has imperative, object-oriented, and generic programming features. @@ -57,3 +58,4 @@ Write your C++ code in a .cpp file. - Run your compiled program: ./my_program1. + \ No newline at end of file diff --git a/docs/day-01/history-of-cpp.md b/docs/day-01/history-of-cpp.md index d5f3e9a06..3d951f0ee 100644 --- a/docs/day-01/history-of-cpp.md +++ b/docs/day-01/history-of-cpp.md @@ -6,6 +6,8 @@ sidebar_label: "History of C++" slug: /history-of-cpp --- +import BackToTop from '@site/src/components/BackToTop/BackToTop'; + ## History of CPP C++ has a rich history that began in the late 1970s and has evolved significantly since then. Here's a timeline of its key milestones: @@ -102,3 +104,5 @@ C++ is a vast language with numerous possibilities. Enjoy your journey in master --- Feel free to expand upon this content and include more details, examples, or exercises based on your audience's needs and the depth of the tutorial you're planning to create. + + \ No newline at end of file diff --git a/docs/day-01/introduction-to-cpp.md b/docs/day-01/introduction-to-cpp.md index d513af9d4..c8f9a749b 100644 --- a/docs/day-01/introduction-to-cpp.md +++ b/docs/day-01/introduction-to-cpp.md @@ -6,6 +6,7 @@ sidebar_label: "Introduction to C++" slug: introduction-to-cpp --- +import BackToTop from '@site/src/components/BackToTop/BackToTop'; import CustomTag from '@site/src/components/TagsComponents/CustomTag'; ## Introduction to C++ @@ -72,3 +73,5 @@ C++ is a vast language with numerous possibilities. Enjoy your journey in master --- Feel free to expand upon this content and include more details, examples, or exercises based on your audience's needs and the depth of the tutorial you're planning to create. + + \ No newline at end of file diff --git a/docs/day-02/comments-in-cpp.md b/docs/day-02/comments-in-cpp.md index 3f4aab9ae..e128cbd9f 100644 --- a/docs/day-02/comments-in-cpp.md +++ b/docs/day-02/comments-in-cpp.md @@ -6,7 +6,7 @@ sidebar_label: "Comment" slug: comment-in-cpp --- - +import BackToTop from '@site/src/components/BackToTop/BackToTop'; ## 1. What is Comment in C++? - A comment in C++ is a programmer-readable note that is inserted directly into the source code of a program. @@ -74,4 +74,6 @@ int calculateArea(int length, int width) { } ``` -By effectively using comments, you can improve the understandability and maintainability of your C++ programs, both for yourself and others who may read your code in the future. \ No newline at end of file +By effectively using comments, you can improve the understandability and maintainability of your C++ programs, both for yourself and others who may read your code in the future. + + \ No newline at end of file diff --git a/docs/day-02/first-cpp-program.md b/docs/day-02/first-cpp-program.md index a176d8db9..2536d04d8 100644 --- a/docs/day-02/first-cpp-program.md +++ b/docs/day-02/first-cpp-program.md @@ -6,6 +6,8 @@ sidebar_label: "First C++ Program" slug: first-cpp-program --- +import BackToTop from '@site/src/components/BackToTop/BackToTop'; + ## Your First Steps in C++: Hello, World! Welcome to the exciting world of C++ programming! Today, we'll embark on a journey together, crafting our very first C++ program - the classic "Hello, World!". This simple program lays the foundation for understanding core C++ concepts. @@ -107,4 +109,6 @@ int main() { ``` -Remember, this is a basic structure, and more complex programs may involve additional elements like classes, objects, and header files for custom functions. \ No newline at end of file +Remember, this is a basic structure, and more complex programs may involve additional elements like classes, objects, and header files for custom functions. + + \ No newline at end of file diff --git a/docs/day-02/keywords-identifiers.md b/docs/day-02/keywords-identifiers.md index c9955b4df..5fe7259fd 100644 --- a/docs/day-02/keywords-identifiers.md +++ b/docs/day-02/keywords-identifiers.md @@ -6,6 +6,7 @@ sidebar_label: "Keywords and Identifiers" slug: keywords-and-identifiers-in-cpp --- +import BackToTop from '@site/src/components/BackToTop/BackToTop'; ### 1. What is Keywords and Identifiers in C++? @@ -120,4 +121,6 @@ Remember these rules when defining identifiers: - Keywords cannot be used as identifiers.On the other hand, identifiers used for variables , functions , classes , etc. - Keywords have fixed set, lowercase only but , identifiers defined by programmer , case sensitive. - Examples of keyword: `int`,`if`,`while`,`class`. -- Examples of identifier: `age`,`calculateArea`,`myObject`. \ No newline at end of file +- Examples of identifier: `age`,`calculateArea`,`myObject`. + + \ No newline at end of file diff --git a/docs/day-02/new-line-in-cpp.md b/docs/day-02/new-line-in-cpp.md index cb08eda31..42dedd31a 100644 --- a/docs/day-02/new-line-in-cpp.md +++ b/docs/day-02/new-line-in-cpp.md @@ -6,6 +6,7 @@ sidebar_label: "New Line in C++" slug: adding-new-line-in-cpp --- +import BackToTop from '@site/src/components/BackToTop/BackToTop'; # Adding New Line in C++ There are two common ways to add a new line in C++: using `"\n"` and `"std::endl"`. @@ -68,4 +69,6 @@ In terms of performance, `\n` is generally faster than `std::endl`. Understanding the differences between `std::endl` and `\n` helps in choosing the appropriate method based on the requirements of your program. -Feel free to use either method based on your specific needs! \ No newline at end of file +Feel free to use either method based on your specific needs! + + \ No newline at end of file diff --git a/docs/day-03/cpp-type-modifiers.md b/docs/day-03/cpp-type-modifiers.md index e73bae422..c7973f436 100644 --- a/docs/day-03/cpp-type-modifiers.md +++ b/docs/day-03/cpp-type-modifiers.md @@ -6,6 +6,7 @@ sidebar_label: "Type Modifiers" slug: type-modifiers-in-cpp --- +import BackToTop from '@site/src/components/BackToTop/BackToTop'; ### 1. What is Type Modifiers in C++? Type modifiers in C++ are keywords that you use to alter the meaning of the basic data types to fit specific needs of your program. They allow you to specify more precisely the properties of variables, such as their size and whether they can hold negative values. The primary type modifiers in C++ are `short`, `long`, `signed`, and `unsigned`. @@ -93,3 +94,4 @@ Example: long double c = 0.333333333333333333L; // Large floating-point number ``` + \ No newline at end of file diff --git a/docs/day-03/datatypes-in-cpp.md b/docs/day-03/datatypes-in-cpp.md index f3438a94d..aa8441c32 100644 --- a/docs/day-03/datatypes-in-cpp.md +++ b/docs/day-03/datatypes-in-cpp.md @@ -6,6 +6,8 @@ sidebar_label: "Datatypes" slug: data-types-in-cpp --- +import BackToTop from '@site/src/components/BackToTop/BackToTop'; + ### 1. What is Data Types in C++? All variables use data type during declaration to restrict the type of data to be stored. Therefore, we can say that data types are used to tell the variables the type of data they can store. Whenever a variable is defined in C++, the compiler allocates some memory for that variable based on the data type with which it is declared. Every data type requires a different amount of memory. #### C++ supports the following data types: @@ -130,3 +132,5 @@ Example: int original = 100; int& ref = original; ``` + + \ No newline at end of file diff --git a/docs/day-03/variables-literals-constant-in-cpp.md b/docs/day-03/variables-literals-constant-in-cpp.md index 7f6c0a74a..c13c4c9ff 100644 --- a/docs/day-03/variables-literals-constant-in-cpp.md +++ b/docs/day-03/variables-literals-constant-in-cpp.md @@ -6,7 +6,7 @@ sidebar_label: "Variables, Literals, and Constants" slug: variables-literals-constant-in-cpp --- - +import BackToTop from '@site/src/components/BackToTop/BackToTop'; ### 1. What is Variables, Literals, and Constants in C++? #### Variables @@ -221,4 +221,4 @@ Example: nullptr (represents a null pointer) ``` - + diff --git a/docs/day-04/constants-in-cpp.md b/docs/day-04/constants-in-cpp.md index 79111e3a0..cc8ac1af2 100644 --- a/docs/day-04/constants-in-cpp.md +++ b/docs/day-04/constants-in-cpp.md @@ -6,6 +6,8 @@ sidebar_label: "Constants" slug: constants-in-cpp --- +import BackToTop from '@site/src/components/BackToTop/BackToTop'; + ## What is Constants in C++? Constants in C++ are fixed values that cannot be altered during the execution of a program. They are used to define values that should remain unchanged throughout the program, providing a way to ensure data integrity and improving code readability. @@ -87,3 +89,4 @@ int main() { } ``` + \ No newline at end of file diff --git a/docs/day-04/input-output-in-cpp.md b/docs/day-04/input-output-in-cpp.md index 9c2ff5238..be30260fc 100644 --- a/docs/day-04/input-output-in-cpp.md +++ b/docs/day-04/input-output-in-cpp.md @@ -6,6 +6,8 @@ sidebar_label: "Input and Output" slug: input-output-in-cpp --- +import BackToTop from '@site/src/components/BackToTop/BackToTop'; + ## What is Input and Output in C++? Input and Output (I/O) in C++ refer to the process of communicating with the user or other parts of the program. Input typically involves receiving data from an external source, such as the user via keyboard, or from a file. Output involves displaying information to the user, writing data to files, or sending data to other devices. @@ -65,3 +67,5 @@ int main() { return 0; } ``` + + \ No newline at end of file diff --git a/docs/day-04/operators-in-cpp.md b/docs/day-04/operators-in-cpp.md index b2900319f..aa26e814c 100644 --- a/docs/day-04/operators-in-cpp.md +++ b/docs/day-04/operators-in-cpp.md @@ -6,6 +6,8 @@ sidebar_label: "Operators" slug: operators-in-cpp --- +import BackToTop from '@site/src/components/BackToTop/BackToTop'; + ## 1. What is Operators in C++? In programming, an operator is a symbol that operates on a value or a variable. Operators are essential building blocks in C++, allowing you to perform various operations on data, such as arithmetic calculations, comparisons, and logical operations.--- @@ -360,3 +362,5 @@ When overloading operators, there are several rules to keep in mind: 2. **Return Types**: The return type should be appropriate for the operation. For example, `operator+` should return a new object, while `operator+=` should return a reference to `*this`. 3. **Symmetry**: Ensure symmetric behavior where applicable. For example, `a == b` should return the same result as `b == a`. 4. **Do Not Overload Operators Irrelevantly**: Only overload operators that make sense for your class. For example, overloading the arithmetic operators for a class that represents a complex number makes sense, but overloading them for a class that represents a database connection does not. + + \ No newline at end of file diff --git a/docs/day-05/Logical Operators.md b/docs/day-05/Logical Operators.md index 97fe28e4b..53a541784 100644 --- a/docs/day-05/Logical Operators.md +++ b/docs/day-05/Logical Operators.md @@ -5,6 +5,9 @@ description: "In this tutorial, we will learn about Logical Operators in C++ pro sidebar_label: "Logical Operators" slug: Logical-Operators-cpp --- + +import BackToTop from '@site/src/components/BackToTop/BackToTop'; + # Logical Operators in C++ This repository provides an explanation of logical operators in C++, along with examples of their usage. @@ -50,4 +53,6 @@ result = (a || b); // result will be true // Using NOT operator result = !a; // result will be false -``` \ No newline at end of file +``` + + \ No newline at end of file diff --git a/docs/day-05/arithmetic-Operators.md b/docs/day-05/arithmetic-Operators.md index e41d5e62b..747f8f4f7 100644 --- a/docs/day-05/arithmetic-Operators.md +++ b/docs/day-05/arithmetic-Operators.md @@ -6,6 +6,8 @@ sidebar_label: "Arithmetic Operators" slug: Arithmetic-Operators-cpp --- +import BackToTop from '@site/src/components/BackToTop/BackToTop'; + # Arithmetic Operators in C++ Arithmetic operators in C++ are symbols used to perform mathematical operations on operands. These operators allow you to perform addition, subtraction, multiplication, division, and modulus operations. @@ -65,3 +67,5 @@ int result = 10 % 3; // result will be 1 ``` These operators can be used with variables, constants, or expressions. They follow the usual rules of precedence and associativity. Additionally, parentheses can be used to enforce a specific order of evaluation. + + \ No newline at end of file diff --git a/docs/day-05/do-while-loop.md b/docs/day-05/do-while-loop.md index 3f225d43a..e27cbbf76 100644 --- a/docs/day-05/do-while-loop.md +++ b/docs/day-05/do-while-loop.md @@ -6,6 +6,7 @@ sidebar_label: "While and Do-While Loop" slug: while-and-do-while-loop-in-cpp --- +import BackToTop from '@site/src/components/BackToTop/BackToTop'; ## while Loop @@ -110,3 +111,5 @@ int main() { return 0; } ``` + + \ No newline at end of file diff --git a/docs/day-05/for-loop.md b/docs/day-05/for-loop.md index 18c29d3a8..905690a4b 100644 --- a/docs/day-05/for-loop.md +++ b/docs/day-05/for-loop.md @@ -6,6 +6,7 @@ sidebar_label: "For Loop" slug: for-loop-in-cpp --- +import BackToTop from '@site/src/components/BackToTop/BackToTop'; # C++ For Loop @@ -137,4 +138,6 @@ In this example: - The product of i and j is printed, resulting in a multiplication table. -- Each row of the table is printed by the inner loop, and after the inner loop completes, a new line is started by the outer loop. \ No newline at end of file +- Each row of the table is printed by the inner loop, and after the inner loop completes, a new line is started by the outer loop. + + \ No newline at end of file diff --git a/docs/day-05/if-else-statement.md b/docs/day-05/if-else-statement.md index 58c6ac3f7..6a5a94b54 100644 --- a/docs/day-05/if-else-statement.md +++ b/docs/day-05/if-else-statement.md @@ -6,6 +6,7 @@ sidebar_label: "IF-ELSE Statement" slug: if-else-statement-in-cpp --- +import BackToTop from '@site/src/components/BackToTop/BackToTop'; ## 1. What is Control Statements in C++? Control statements are the keywords and judgement makers of C++, which controls the run time process of a program. These statements enable the program to decide on a course of action, to compute repetitive tasks and to determine the program’s flow according to specific conditions that may have been defined in the statements. There are two primary types of control statements in C++: @@ -132,3 +133,5 @@ int main(){ ``` NOTE: > In the above code "?" refers to if-statement and statement after the ":" is executed if the if-statement is `false`. + + \ No newline at end of file diff --git a/docs/day-05/relational_operators.md b/docs/day-05/relational_operators.md index a2e6ea923..31722b2b3 100644 --- a/docs/day-05/relational_operators.md +++ b/docs/day-05/relational_operators.md @@ -6,6 +6,8 @@ sidebar_label: "Relational Operators" slug: Relational-Operators-cpp --- +import BackToTop from '@site/src/components/BackToTop/BackToTop'; + # Relational Operators in C++ Relational operators in C++ are used to compare two values and determine the relationship between them. These operators return a boolean value of true or false based on whether the comparison is true or false. Here are the commonly used relational operators: @@ -72,4 +74,6 @@ if (a <= b) { // This block will be executed because a is less than or equal to b } -``` \ No newline at end of file +``` + + \ No newline at end of file diff --git a/docs/day-06/If-statement.md b/docs/day-06/If-statement.md index b7436c00f..ee4ad3c47 100644 --- a/docs/day-06/If-statement.md +++ b/docs/day-06/If-statement.md @@ -5,6 +5,9 @@ description: "In this tutorial, we will learn about the If Statements in C++ pro sidebar_label: "If Statements in C++" slug: If-Statements --- + +import BackToTop from '@site/src/components/BackToTop/BackToTop'; + # If Statements in C++ This repository provides an explanation of if statements in C++, along with examples of their usage. @@ -76,4 +79,6 @@ if (mark >= 90) { } ``` -In this example, the program checks the value of `mark` against multiple conditions in a sequential manner. Once a condition is met, the corresponding block of code is executed, and the rest of the conditions are skipped. \ No newline at end of file +In this example, the program checks the value of `mark` against multiple conditions in a sequential manner. Once a condition is met, the corresponding block of code is executed, and the rest of the conditions are skipped. + + \ No newline at end of file diff --git a/docs/day-06/break-statement.md b/docs/day-06/break-statement.md index 508fee79c..5a8bd1da5 100644 --- a/docs/day-06/break-statement.md +++ b/docs/day-06/break-statement.md @@ -6,6 +6,8 @@ sidebar_label: "Break Statement" slug: break-statement-in-cpp --- +import BackToTop from '@site/src/components/BackToTop/BackToTop'; + ## What is the Break Statement in C++? The break statement in C++ is a control statement used to exit prematurely from loops (like for, while, or do-while loops) and switch statements. When encountered, the break statement immediately terminates the loop it's contained within, regardless of the loop's normal exit conditions. This allows for an early exit based on certain conditions without executing the remaining code inside the loop. @@ -69,4 +71,4 @@ int main() { ``` - + diff --git a/docs/day-06/continue-statement.md b/docs/day-06/continue-statement.md index 32be52b81..f34e3722c 100644 --- a/docs/day-06/continue-statement.md +++ b/docs/day-06/continue-statement.md @@ -5,6 +5,9 @@ description: "In this tutorial, we will learn about the continue statement in C+ sidebar_label: "Continue Statement" slug: continue-statement-in-cpp --- + +import BackToTop from '@site/src/components/BackToTop/BackToTop'; + ## What is the Continue Statement in C++? In C++, the continue statement is used within loops to skip the rest of the current iteration and proceed directly to the next iteration of the loop. It's often used to avoid executing certain code in a loop under certain conditions. @@ -102,3 +105,5 @@ int main() { } ``` + + \ No newline at end of file diff --git a/docs/day-06/goto-statement.md b/docs/day-06/goto-statement.md index c66576830..b54f991be 100644 --- a/docs/day-06/goto-statement.md +++ b/docs/day-06/goto-statement.md @@ -6,6 +6,8 @@ sidebar_label: "Go To Statement" slug: goto-statement-in-cpp --- +import BackToTop from '@site/src/components/BackToTop/BackToTop'; + `NOTE:` The `return` statement is necessary in the code corresponding to `positive` label, as, otherwise the code corresponding to `negative` label will also get executed. @@ -42,3 +44,5 @@ Although the use of the `goto` statement is generally discouraged, there are spe 3. Jumping within a Local Scope: Occasionally, in very specific algorithms or low-level code, jumping within a local scope using "go to" might provide a cleaner and more efficient solution compared to alternative approaches. However, this should be approached with caution and well-documented. 4. Optimization in Performance-Critical Code: In rare cases where performance is critical and careful optimization is necessary, judicious use of "go to" might provide some benefits by avoiding unnecessary function calls or loop iterations. + + \ No newline at end of file diff --git a/docs/day-22/Linear Search.md b/docs/day-22/Linear Search.md index 024b6465a..1860983d7 100644 --- a/docs/day-22/Linear Search.md +++ b/docs/day-22/Linear Search.md @@ -6,6 +6,8 @@ sidebar_label: "Linear Search in C++" slug: Linear-Search-in-cpp --- +import BackToTop from '@site/src/components/BackToTop/BackToTop'; + # Linear Search in C++ Linear search is a sequential searching algorithm where we start from one end and check every element of the list until the desired element is found. It is the simplest searching algorithm. @@ -41,4 +43,6 @@ int main() { The time complexity of the linear search algorithm is O(n), where "n" represents the number of elements in the dataset being searched. In linear search, the algorithm scans through the data sequentially, comparing each element with the target value until it either finds a match or reaches the end of the dataset. In the worst-case scenario, the target element may be the last element in the dataset, which requires checking every element. Therefore, the time complexity is linear, and the running time increases linearly with the size of the input data. ## Space Complexity of Linear Search: -The space complexity of the linear search algorithm is O(1). \ No newline at end of file +The space complexity of the linear search algorithm is O(1). + + \ No newline at end of file diff --git a/package.json b/package.json index de46c2d3a..ebf07b9f2 100644 --- a/package.json +++ b/package.json @@ -41,12 +41,14 @@ "dependencies": { "@docusaurus/core": "3.4.0", "@docusaurus/preset-classic": "3.4.0", + "@fortawesome/fontawesome-free": "^6.5.2", "@mdx-js/react": "^3.0.0", "clsx": "^2.0.0", "lottie-react": "^2.4.0", "prism-react-renderer": "^2.3.0", "react": "^18.0.0", - "react-dom": "^18.0.0" + "react-dom": "^18.0.0", + "react-scroll": "^1.9.0" }, "devDependencies": { "@docusaurus/module-type-aliases": "3.4.0", diff --git a/src/components/BackToTop/BackToTop.css b/src/components/BackToTop/BackToTop.css new file mode 100644 index 000000000..349795b03 --- /dev/null +++ b/src/components/BackToTop/BackToTop.css @@ -0,0 +1,42 @@ +/* BackToTop Button */ +.back-to-top { + position: fixed; + bottom: 20px; + right: 20px; + z-index: 1000; + background-color: #05cfb4; + color: #000000; + border: none; + padding: 10px; + font-size: 16px; + cursor: pointer; + opacity: 0; + transition: opacity 0.1s ease;; + border-radius: 70%; + display: flex; + align-items: center; + justify-content: center; + width: 45px; + height: 45px; +} + +.back-to-top.show { + opacity: 1; +} + +.back-to-top:hover { + background-color: #00e1c3; + color: #fff; +} + +.back-to-top:focus { + outline: none; +} + +.back-to-top:active { + transform: translateY(2px); +} + +.back-to-top i { + font-size: 20px; +} \ No newline at end of file diff --git a/src/components/BackToTop/BackToTop.js b/src/components/BackToTop/BackToTop.js new file mode 100644 index 000000000..2102eccb6 --- /dev/null +++ b/src/components/BackToTop/BackToTop.js @@ -0,0 +1,43 @@ +import React, { useState, useEffect } from "react"; +import '@fortawesome/fontawesome-free/css/all.min.css'; +import { animateScroll } from 'react-scroll'; +import "./BackToTop.css"; + +const BackToTop = () => { + const [showButton, setShowButton] = useState(false); + + useEffect(() => { + const handleScroll = () => { + if (window.scrollY > 50) { + setShowButton(true); + } else { + setShowButton(false); + } + }; + + window.addEventListener("scroll", handleScroll); + + return () => { + window.removeEventListener("scroll", handleScroll); + }; + }, []); + + const handleClick = () => { + animateScroll.scrollToTop({ + top: 0, + behavior: "smooth", + duration: 500 + }); + }; + + return ( + + ); + }; + +export default BackToTop; \ No newline at end of file diff --git a/src/pages/index.js b/src/pages/index.js index 594435aef..c65e05bf2 100644 --- a/src/pages/index.js +++ b/src/pages/index.js @@ -6,6 +6,7 @@ import HomepageFeatures from '@site/src/components/HomepageFeatures'; import Heading from '@theme/Heading'; import styles from './index.module.css'; import Preloader from '../components/Preloader/preloader'; +import BackToTop from '../components/BackToTop/BackToTop'; function HomepageHeader() { const {siteConfig} = useDocusaurusContext(); @@ -40,6 +41,7 @@ export default function Home() { + ); }