Made code display and tabs to server components. (#10)

* Made code display and tabs server components.

* We don't need this dep anymore.

* Ran formatter.

package.json

@@ -6,8 +6,7 @@
     "highlight.js": "^11.8.0",
     "next": "^13.5.3",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "react-highlight": "^0.15.0"
+    "react-dom": "^18.2.0"
   },
   "scripts": {
     "prestart": "node generateAssets.js",
@@ -41,7 +40,6 @@
     "@types/node": "^20.6.5",
     "@types/react": "^18.2.22",
     "@types/react-dom": "^18.2.7",
-    "@types/react-highlight": "^0.12.5",
     "@typescript-eslint/eslint-plugin": "^6.7.3",
     "eslint-config-next": "^13.5.3",
     "eslint-plugin-import": "^2.28.1",

src/app/SecondSegment.tsx

@@ -0,0 +1,48 @@
+import CodeTab from "../components/CodeViewer/CodeTab";
+import CodeViewer from "../components/CodeViewer/CodeViewer";
+import "./SecondSegment.css";
+import SuperDerpy from "./SuperDerpy";
+
+export default function SecondSegment() {
+  const fizzbuzz = `import System.Console;
+import System.Linq.Enumerable;
+
+func main() {
+    for (i in Range(100)) {
+        match (i mod 3, i mod 5) {
+            (0, 0) -> WriteLine("FizzBuzz");
+            (0, _) -> WriteLine("Fizz");
+            (_, 0) -> WriteLine("Buzz");
+            _ -> WriteLine(i);
+        }
+    }
+}`;
+  const guessANumber = `import System;
+import System.Console;
+
+func main() {
+    val value = Random.Shared.Next(1, 101);
+    while (true) {
+        Write("Guess a number (1-100): ");
+        val input = Convert.ToInt32(ReadLine());
+        if (input == value) goto break;
+        WriteLine("Incorrect. Too \\{if (input < value) "low" else "high"}");
+    }
+    WriteLine("You guessed it!");
+}`;
+
+  return (
+    <div className="second-segment">
+      <h1 className="aligned">Derpy™ Included.</h1>
+      <SuperDerpy />
+      <CodeViewer className="splash-code-viewer">
+        <CodeTab title="FizzBuzz" language="kotlin">
+          {fizzbuzz}
+        </CodeTab>
+        <CodeTab title="Guess A Number" language="kotlin">
+          {guessANumber}
+        </CodeTab>
+      </CodeViewer>
+    </div>
+  );
+}

src/app/SuperDerpy.tsx

@@ -0,0 +1,59 @@
+"use client";
+
+import { useState } from "react";
+import { EmojiName } from "../generated/emojiTypes";
+import Emoji from "@/components/Emoji";
+
+export default function SuperDerpy() {
+  const [emojiState, setEmoji] = useState<{ name: EmojiName; title: string }>({
+    name: "smile",
+    title: "Derpy is our mascot.",
+  });
+  const [clickCount, setClickCount] = useState(0);
+  const handleEmojiClick = () => {
+    if (clickCount >= 0 && clickCount <= 5) {
+      setClickCount(clickCount + 1);
+    }
+
+    switch (clickCount + 1) {
+      case 1:
+        setEmoji({
+          name: "sad",
+          title: "Derpy is sad. He dislke to be clicked.",
+        });
+        break;
+      case 2:
+        setEmoji({
+          name: "cry",
+          title: "Derpy is crying. Why are you mean with him?",
+        });
+        break;
+      case 3:
+        setEmoji({ name: "angry", title: "Derpy is angry. He may bite you." });
+        break;
+      case 4:
+        setEmoji({ name: "ree", title: "Derpy is very angry." });
+        break;
+      default:
+        setEmoji({
+          name: "triggered",
+          title: "You have unleashed the fury of the Derpy.",
+        });
+        break;
+    }
+    console.log(emojiState);
+    setTimeout(() => {
+      setEmoji({ name: "smile", title: "Derpy calmed down." });
+    }, 3000);
+  };
+
+  return (
+    <Emoji
+      className="super-derpy"
+      emojiName={emojiState.name}
+      onClick={handleEmojiClick}
+      style={{ cursor: emojiState.name === "smile" ? "pointer" : "default" }}
+      title={emojiState.title}
+    />
+  );
+}

src/app/page.tsx

@@ -1,5 +1,5 @@
-import LandingSegment from "@/LandingPage/LandingSegment";
-import SecondSegment from "@/LandingPage/SecondSegment";
+import LandingSegment from "./LandingSegment";
+import SecondSegment from "./SecondSegment";
 
 export default function Page() {
   return (

src/components/CodeViewer/CodeTab.css

@@ -1,34 +1,30 @@
 .tab-buttons {
-  display: flex;
-}
-
-.tab-buttons button {
   background-color: transparent;
   font-size: 16px;
   padding: 0.5em 1em;
   outline: 1px solid #e5e7eb28;
-
-  /* borders produces doubles borders in tabs */
-  border: 0;
+  display: inline-block;
+  border: 0; /* borders produces doubles borders in tabs */
   margin-left: 1px;
+  float: left;
 }
 
-.tab-buttons button:first-child {
+.tab-buttons.first-tab {
   border-radius: 5px 0 0 0;
 }
 
-.tab-buttons button:last-child {
+.tab-buttons.last-tab {
   border-radius: 0 5px 0 0;
 }
 
-.tab-buttons .active {
+input[type="radio"]:checked + div.tab-content > label {
   outline-color: #00c8bd;
 }
 
-.tab-buttons :not(.active):hover {
+.tab-buttons :not(:checked):hover {
   background-color: #00c8bd50;
 }
 
-.tab-buttons :not(.active) {
+.tab-buttons :not(:checked) {
   cursor: pointer;
 }