Text-Manipulation/About.js at main · kavyadhariwal/Text-Manipulation · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
import React, { useState } from "react";

export default function About() {
  const [myStyle, setMyStyle] = useState({
    color: "white",
    backgroundColor: "black",
  });
  const [btnText, setBtnText] = useState("Enable Light Mode");

  const toggleStyle = () => {
    if (myStyle.color === "white") {
      setMyStyle({
        color: "black",
        backgroundColor: "white",
      });
      setBtnText("Enable Dark Mode");
    } else {
      setMyStyle({
        color: "white",
        backgroundColor: "black",
      });
      setBtnText("Enable Light Mode");
    }
  };

  return (
    <>
      <div className="container" style={myStyle}>
        <h3 className="my-3">About Text Manipulator</h3>
        <div className="accordion" id="accordionExample" style={myStyle}>
          <div className="accordion-item">
            <h2 className="accordion-header">
              <button
                className="accordion-button"
                style={myStyle}
                type="button"
                data-bs-toggle="collapse"
                data-bs-target="#collapseOne"
                aria-expanded="true"
                aria-controls="collapseOne"
              >
                What is Text Manipulator?
              </button>
            </h2>
            <div
              id="collapseOne"
              className="accordion-collapse collapse show"
              data-bs-parent="#accordionExample"
            >
              <div className="accordion-body">
                <strong>Text Manipulator</strong> is a versatile application
                designed to simplify the way you interact with text. It offers a
                variety of tools to manipulate and transform your text, such as
                converting it to uppercase or lowercase, removing extra spaces,
                trimming, and even copying text to the clipboard with just a
                click.
              </div>
            </div>
          </div>
          <div className="accordion-item">
            <h2 className="accordion-header">
              <button
                className="accordion-button collapsed"
                style={myStyle}
                type="button"
                data-bs-toggle="collapse"
                data-bs-target="#collapseTwo"
                aria-expanded="false"
                aria-controls="collapseTwo"
              >
                Key Features
              </button>
            </h2>
            <div
              id="collapseTwo"
              className="accordion-collapse collapse"
              data-bs-parent="#accordionExample"
            >
              <div className="accordion-body">
                <strong>Key Features of Text Manipulator:</strong>
                <ul>
                  <li>Convert text to uppercase or lowercase with one click.</li>
                  <li>Remove unwanted spaces from your text.</li>
                  <li>Count the number of words and characters in your text.</li>
                  <li>
                    Easily copy text to your clipboard for quick use elsewhere.
                  </li>
                  <li>
                    Supports light and dark mode for a personalized experience.
                  </li>
                </ul>
              </div>
            </div>
          </div>
          <div className="accordion-item">
            <h2 className="accordion-header">
              <button
                className="accordion-button collapsed"
                style={myStyle}
                type="button"
                data-bs-toggle="collapse"
                data-bs-target="#collapseThree"
                aria-expanded="false"
                aria-controls="collapseThree"
              >
                Why Use Text Manipulator?
              </button>
            </h2>
            <div
              id="collapseThree"
              className="accordion-collapse collapse"
              data-bs-parent="#accordionExample"
            >
              <div className="accordion-body">
                <strong>Why Choose Text Manipulator?</strong>
                <p>
                  Text Manipulator is a lightweight and user-friendly
                  application that helps you manage your text more efficiently.
                  Whether you're editing a document, formatting code, or simply
                  making your text look neat, this application provides the
                  tools you need in an intuitive interface. It's perfect for
                  students, professionals, and anyone who works with text
                  regularly.
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div className="container">
        <button
          onClick={toggleStyle}
          className="btn btn-primary mx-2 my-2"
        >
          {btnText}
        </button>
      </div>
    </>
  );
}