Skip to content

Commit ede9330

Browse files
BashamegaBashamega
authored
Merge pull request #219 from Oslonline/main
Minor chore & styling changes
2 parents 74f5819 + c438da3 commit ede9330

File tree

23 files changed

+203
-184
lines changed

23 files changed

+203
-184
lines changed

Diff for: ‎src/app/MD/page.jsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
"use client";
2-
import React, { useState, useRef, useEffect } from "react";
2+
3+
import { useState, useRef, useEffect } from "react";
34
import snarkdown from "snarkdown";
45
import { saveAs } from "file-saver";
56
import SearchIcon from "@mui/icons-material/Search";
67
import ArrowBackIcon from "@mui/icons-material/ArrowBack";
78
import Search from "../components/search";
89
import Link from "next/link";
9-
import Switch from "@mui/material/Switch";
1010
import SunIcon from "../components/icons/sunicon";
1111
import MoonIcon from "../components/icons/moonicon";
1212

Diff for: ‎src/app/about/page.jsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
"use client";
22
import Footer from "../components/Footer";
33
import Nav from "../components/nav";
4-
import React, { useState } from "react";
4+
import { useState } from "react";
55
import Link from "next/link";
66

77
export default function Home() {

Diff for: ‎src/app/asciiDoc/page.jsx

+2-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
"use client";
2-
import React, { useState } from "react";
2+
3+
import { useState } from "react";
34
import CodeEditor from "./components/Editor";
45
import { NavBar } from "../components/navbar";
56
import Asciidoctor from "asciidoctor";

Diff for: ‎src/app/components/Footer/index.jsx

+2-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
"use client";
2-
import React, { useEffect } from "react";
2+
3+
import { useEffect } from "react";
34
import { FaGithub, FaHome } from "react-icons/fa";
45
import Link from "next/link";
56

Diff for: ‎src/app/components/navbar.jsx

+2-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
"use client";
2-
import React, { useEffect } from "react";
2+
3+
import { useEffect } from "react";
34
import Link from "next/link";
45
import SunIcon from "./icons/sunicon";
56
import MoonIcon from "./icons/moonicon";

Diff for: ‎src/app/contribute/page.jsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
"use client";
2+
23
import React, { useState, useEffect } from "react";
34
import Nav from "../components/nav";
4-
// import { Nav } from "@/app/components/nav";
55
import Footer from "../components/Footer";
66
import Link from "next/link";
77
import Image from "next/image";

Diff for: ‎src/app/customizer/CupcakeIpsumGenerator/page.jsx

+7-7
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,7 @@
11
"use client";
2-
// import React, { useState } from "react";
3-
import React, { useEffect, useState } from "react";
42

5-
import Nav from "@/app/components/nav";
3+
import { useEffect, useState } from "react";
64
import { NavBar } from "@/app/components/navbar";
7-
// import { Navbar } from "react-bootstrap";
85

96
export default function ButtonCustomizer() {
107
const [cupcakes, setCupcakes] = useState(1);
@@ -51,9 +48,12 @@ export default function ButtonCustomizer() {
5148
isDarkMode={isDarkMode}
5249
toggleTheme={toggleTheme}
5350
/>
54-
<section className="flex items-center justify-center h-screen">
51+
<section className="flex flex-col gap-10 items-center justify-center h-screen">
52+
<h1 className="relative p-2 z-10 font-sans text-xl sm:text-4xl font-bold text-center text-transparent md:text-7xl bg-clip-text bg-gradient-to-b from-neutral-200 to-neutral-600">
53+
Cupcake Ipsum Generator
54+
</h1>
5555
<div
56-
className={`${isDarkMode ? "bg-gray-700 text-gray-400" : "bg-slate-100 text-gray-500"} p-10 w-full max-w-5xl overflow-y-scroll max-h-96`}
56+
className={`${isDarkMode ? "bg-gray-700 text-gray-400" : "bg-slate-100 text-gray-500"} p-10 w-full max-w-5xl rounded-lg shadow-md overflow-y-scroll max-h-96`}
5757
>
5858
<label htmlFor="cupcakes">Number of cupcakes:</label>
5959
<br />
@@ -84,7 +84,7 @@ export default function ButtonCustomizer() {
8484
<button
8585
type="button"
8686
onClick={copy}
87-
className="text-gray-900 bg-white hover:bg-gray-200 border border-gray-200 focus:outline-none font-medium rounded-lg text-sm px-5 py-2.5 text-center inline-flex items-center transition duration-200 ease-in-out transform hover:scale-105 dark:bg-gray-800 dark:border-gray-700 dark:text-white dark:hover:bg-gray-600 mr-2 mb-2"
87+
className="text-gray-900 bg-white hover:bg-gray-200 border border-gray-200 focus:outline-none font-medium rounded-lg text-sm px-5 py-2.5 text-center inline-flex items-center transition duration-200 ease-in-out dark:bg-gray-800 dark:border-gray-700 dark:text-white dark:hover:bg-gray-600 mr-2 mb-2"
8888
>
8989
Copy
9090
</button>

Diff for: ‎src/app/customizer/JsonGenerator/components/CardForm.jsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React, { useState, useEffect } from "react";
1+
import { useState, useEffect } from "react";
22
import { v4 as uuidv4 } from "uuid";
33
import Box from "@mui/material/Box";
44
import CircularProgress from "@mui/material/CircularProgress";

Diff for: ‎src/app/customizer/LoremIpsumGenerator/page.jsx

+69-63
Original file line numberDiff line numberDiff line change
@@ -1,91 +1,97 @@
11
"use client";
2-
import React, { useState } from "react";
3-
import ContentCopyIcon from "@mui/icons-material/ContentCopy";
4-
import CloseIcon from "@mui/icons-material/Close";
5-
import Nav from "@/app/components/nav";
2+
3+
import { useEffect, useState } from "react";
64
import { NavBar } from "@/app/components/navbar";
75

86
export default function ButtonCustomizer() {
9-
const [paragraphs, setParagraphs] = useState(1);
10-
const [code, setCode] = useState("");
11-
const [copiedStatus, setCopiedStatus] = useState("");
7+
const [lorem, setLorem] = useState(1);
8+
const [lor, setLor] = useState("");
129
const [isDarkMode, setIsDarkMode] = useState(false);
1310

14-
const generateLoremIpsum = () => {
15-
let loremIpsumText = "";
16-
for (let i = 0; i < paragraphs; i++) {
17-
loremIpsumText += `Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus auctor orci quis metus ultricies, vitae finibus urna pellentesque. Sed commodo, tortor sed pharetra bibendum, turpis purus gravida orci, nec aliquet mi ligula eu purus. In at elit ex. Quisque ultricies pulvinar purus, at luctus justo lacinia vel. Vestibulum pulvinar lacus eu turpis rutrum, et fermentum sapien rhoncus. Nullam dapibus felis in neque ultricies ullamcorper. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In hac habitasse platea dictumst. Donec efficitur dolor a bibendum vehicula. Curabitur vitae est elit. Integer tempus massa elit, eget euismod nunc pharetra eget. Morbi efficitur metus in viverra finibus. Aliquam sollicitudin pharetra sapien nec bibendum. Etiam congue faucibus malesuada. Nunc vulputate congue vulputate.\n\n`;
11+
useEffect(() => {
12+
const storedTheme = localStorage.getItem("theme");
13+
try {
14+
if (storedTheme !== null && JSON.parse(storedTheme) !== isDarkMode) {
15+
toggleTheme();
16+
}
17+
} catch {
18+
console.log("Failed to read localstorage");
1819
}
19-
setCode(loremIpsumText);
20-
};
20+
}, []);
2121

22-
const copy = () => {
23-
navigator.clipboard.writeText(code);
24-
setCopiedStatus("Text copied successfully");
22+
const generate = () => {
23+
let text = "";
24+
for (let i = 0; i < lorem; i++) {
25+
text +=
26+
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus auctor orci quis metus ultricies, vitae finibus urna pellentesque. Sed commodo, tortor sed pharetra bibendum, turpis purus gravida orci, nec aliquet mi ligula eu purus. In at elit ex. Quisque ultricies pulvinar purus, at luctus justo lacinia vel. Vestibulum pulvinar lacus eu turpis rutrum, et fermentum sapien rhoncus. Nullam dapibus felis in neque ultricies ullamcorper. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In hac habitasse platea dictumst. Donec efficitur dolor a bibendum vehicula. Curabitur vitae est elit. Integer tempus massa elit, eget euismod nunc pharetra eget. Morbi efficitur metus in viverra finibus. Aliquam sollicitudin pharetra sapien nec bibendum. Etiam congue faucibus malesuada. Nunc vulputate congue vulputate.\n\n";
27+
}
28+
setLor(text);
2529
};
2630

27-
const closeBtn = () => {
28-
setCopiedStatus("");
31+
const copy = () => {
32+
navigator.clipboard.writeText(lor);
33+
setLor("Text copied successfully");
2934
};
3035

3136
const toggleTheme = () => {
32-
setIsDarkMode(!isDarkMode);
37+
const newTheme = !isDarkMode;
38+
setIsDarkMode(newTheme);
39+
localStorage.setItem("theme", JSON.stringify(newTheme));
3340
};
3441

3542
return (
3643
<main
37-
className={`${isDarkMode ? "bg-gray-900 text-gray-400" : "bg-white text-gray-800"} h-screen flex flex-col gap-10 min-w-80`}
44+
className={`${isDarkMode ? "bg-gray-900 text-gray-400" : "bg-white text-gray-800"} min-w-80 `}
3845
>
3946
<NavBar
40-
title={"Lorem Ipsum generator"}
47+
title={"Lorem Ipsum Generator"}
4148
isDarkMode={isDarkMode}
4249
toggleTheme={toggleTheme}
4350
/>
44-
<section className="flex items-center justify-center">
51+
<section className="flex flex-col gap-10 items-center justify-center h-screen">
52+
<h1 className="relative p-2 z-10 font-sans text-xl sm:text-4xl font-bold text-center text-transparent md:text-7xl bg-clip-text bg-gradient-to-b from-neutral-200 to-neutral-600">
53+
Lorem Ipsum Generator
54+
</h1>
4555
<div
46-
className={`${isDarkMode ? "bg-gray-800" : "bg-gray-400"} p-10 w-full max-w-5xl overflow-y-scroll max-h-96 min-w-80`}
56+
className={`${isDarkMode ? "bg-gray-700 text-gray-400" : "bg-slate-100 text-gray-500"} p-10 w-full max-w-5xl rounded-lg shadow-md overflow-y-scroll max-h-96`}
4757
>
48-
<div className="flex justify-center pb-5 flex-wrap gap-4 md:justify-between">
49-
<div className="flex gap-2 items-center">
50-
<label htmlFor="paragraphs">Number of paragraphs:</label>
51-
<input
52-
type="number"
53-
id="paragraphs"
54-
value={paragraphs}
55-
min={1}
56-
max={10}
57-
onChange={(e) => setParagraphs(e.target.value)}
58-
className="focus:outline-none bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
59-
required
60-
/>
61-
</div>
62-
<div className="flex gap-5">
63-
<button
64-
onClick={generateLoremIpsum}
65-
className="relative inline-flex items-center justify-center p-0.5 mb-2 mr-2 overflow-hidden text-sm font-medium text-gray-900 rounded-lg group bg-gradient-to-br from-red-200 via-red-300 to-yellow-200 group-hover:from-red-200 group-hover:via-red-300 group-hover:to-yellow-200 dark:text-white dark:hover:text-gray-900 focus:outline-none"
66-
>
67-
<span className="relative px-5 py-2.5 transition-all ease-in duration-75 bg-white dark:bg-gray-900 rounded-md group-hover:bg-opacity-0">
68-
Generate
69-
</span>
70-
</button>
71-
<button
72-
onClick={copy}
73-
className="text-gray-900 bg-white hover:bg-gray-100 border border-gray-200 focus:outline-none font-medium rounded-lg text-sm px-5 py-2.5 text-center inline-flex items-center dark:bg-gray-800 dark:border-gray-700 dark:text-white dark:hover:bg-gray-700 mr-2 mb-2"
74-
>
75-
Copy
76-
<ContentCopyIcon fontSize="small" className="ml-2" />
77-
</button>
78-
</div>
58+
<label htmlFor="lorem">Number of paragraphs:</label>
59+
<br />
60+
<br />
61+
<div>
62+
<input
63+
type="number"
64+
id="lorem"
65+
value={lorem}
66+
min={1}
67+
max={10}
68+
onChange={(e) => setLorem(e.target.value)}
69+
className="focus:outline-none bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
70+
required
71+
/>
72+
</div>
73+
<br />
74+
<div className="inline-flex rounded-md shadow-sm" role="group">
75+
<button
76+
onClick={generate}
77+
className="relative inline-flex items-center justify-center p-0.5 mb-2 mr-2 overflow-hidden text-sm font-medium text-gray-900 rounded-lg group bg-gradient-to-br from-red-200 via-red-300 to-yellow-200 group-hover:from-red-200 group-hover:via-red-300 group-hover:to-yellow-200 dark:text-white dark:hover:text-gray-900 focus:outline-none"
78+
>
79+
<span className="relative px-5 py-2.5 transition-all ease-in duration-75 bg-white dark:bg-gray-900 rounded-md group-hover:bg-opacity-0">
80+
Generate
81+
</span>
82+
</button>
83+
&emsp;
84+
<button
85+
type="button"
86+
onClick={copy}
87+
className="text-gray-900 bg-white hover:bg-gray-200 border border-gray-200 focus:outline-none font-medium rounded-lg text-sm px-5 py-2.5 text-center inline-flex items-center transition duration-200 ease-in-out dark:bg-gray-800 dark:border-gray-700 dark:text-white dark:hover:bg-gray-600 mr-2 mb-2"
88+
>
89+
Copy
90+
</button>
7991
</div>
80-
{code !== "" && !copiedStatus && <pre>{code}</pre>}
81-
{copiedStatus !== "" && (
82-
<div className="copyStatus bg-green-500 font-bold text-center rounded-lg p-2 relative">
83-
<button className="absolute top-0 right-1" onClick={closeBtn}>
84-
<CloseIcon fontSize="small" />
85-
</button>
86-
{copiedStatus}
87-
</div>
88-
)}
92+
<br />
93+
<br />
94+
{lor}
8995
</div>
9096
</section>
9197
</main>

Diff for: ‎src/app/customizer/Readme-generator/page.jsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
"use client";
22

3-
import React, { useState } from "react";
3+
import { useState } from "react";
44
import snarkdown from "snarkdown";
55
import { NavBar } from "@/app/components/navbar";
66

Diff for: ‎src/app/customizer/box-shadow-generator/page.jsx

+2-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
"use client";
2-
import React, { useState } from "react";
2+
3+
import { useState } from "react";
34
import InputRange from "@/app/components/Input/InputRange";
45
import Footer from "@/app/components/Footer";
56
import Swal from "sweetalert2";

0 commit comments

Comments
 (0)