Commit Roast My Website

2024-06-02 20:40:19 -07:00
parent ea04fe2e3f
commit 3ea801d9dd
40 changed files with 7954 additions and 0 deletions
@@ -0,0 +1,113 @@
+"use client";
+
+import { useEffect, useRef, useState } from "react";
+import { Theme, allThemes } from "@/lib/theme";
+import html2canvas from "html2canvas";
+import { Button } from "@/components/ui/button";
+import { Input } from "./ui/input";
+import { Github } from "lucide-react";
+
+export default function MainComponent() {
+  const [roastUrl, setRoastUrl] = useState("");
+  const [loading, setLoading] = useState(false);
+  const [roastData, setRoastData] = useState("");
+
+  const [spiceLevel, setSpiceLevel] = useState(2);
+
+  return (
+    <div
+      className="h-screen"
+      style={{
+        background: `linear-gradient(to bottom right, rgba(255, 255, 255, 0.75) 58%, #fff, red )`,
+      }}
+    >
+      <main className="relative flex h-[95vh] flex-col items-center justify-center bg-transparent bg-opacity-80">
+        <div className="w-3/4 flex flex-col items-center gap-4">
+          <h1 className="font-inter-tight text-4xl lg:text-5xl xl:text-6xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-zinc-500 via-zinc-900 to-zinc-900 pb-4 text-center">
+            <em className="relative px-1 italic animate-text transition-all text-transparent bg-clip-text bg-gradient-to-tr from-red-600 to-red-400 inline-flex justify-center items-center text-6xl lg:text-7xl xl:text-8xl">
+              Roast
+            </em>
+            <br />{" "}
+            <span className="text-4xl lg:text-5xl xl:text-6xl">My Website</span>
+          </h1>
+          <div className="flex flex-col sm:flex-row  items-center gap-4 justify-center w-3/5">
+            <Input
+              type="text"
+              className="w-full p-2 border border-gray-300 rounded r"
+              placeholder="https://coconut.com/"
+              value={roastUrl}
+              onChange={(e) => setRoastUrl(e.target.value)}
+            />
+            <Button
+              className="px-6 py-2 bg-red-500/25 text-red-500 0 rounded-lg hover:bg-red-300 w-1/8 whitespace-nowrap"
+              onClick={async () => {
+                if (roastUrl) {
+                  setLoading(true);
+                  try {
+                    const response = await fetch(
+                      `/api/roastWebsite?url=${encodeURIComponent(
+                        roastUrl
+                      )}&spiceLevel=${spiceLevel}`
+                    );
+                    if (!response.ok) {
+                      throw new Error(`Error: ${response.statusText}`);
+                    }
+                    const data = await response.json();
+                    setRoastData(data.roastResult);
+                  } catch (error) {
+                    console.error("Error:", error);
+                  } finally {
+                    setLoading(false);
+                  }
+                }
+              }}
+            >
+              {loading ? "Loading..." : "Get Roasted 🌶️"}
+            </Button>
+          </div>
+          <div className="flex items-center justify-center mt-4">
+            <label
+              htmlFor="spice-level"
+              className="mr-4 font-medium text-gray-700"
+            >
+              Choose your roast level:
+            </label>
+            <select
+              id="spice-level"
+              className="cursor-pointer rounded-lg border border-gray-300 bg-white py-2 px-4 text-center shadow-sm focus:border-orange-500 focus:outline-none focus:ring-1 focus:ring-orange-500"
+              value={spiceLevel}
+              onChange={(e) => setSpiceLevel(Number(e.target.value))}
+            >
+              <option value={1}>Mild 🌶️</option>
+              <option value={2}>Medium 🌶️🌶️</option>
+              <option value={3}>Spicy 🌶️🌶️🌶️</option>
+            </select>
+          </div>
+          {loading ? (
+            <div className="mt-4 w-3/5 p-4 border border-gray-300 rounded shadow bg-gradient-to-r from-red-500 to-red-400 animate-pulse">
+              <p className="text-white text-center">Preparing your roast...</p>
+            </div>
+          ) : (
+            roastData && (
+              <div className="!font-sans mt-4 w-3/5 p-4 border border-gray-300 rounded shadow">
+                <p>{roastData}</p>
+              </div>
+            )
+          )}
+        </div>
+        <div
+          className={`fixed bottom-0 left-0 right-0 p-4 text-white text-center font-light flex justify-center items-center gap-4`}
+        >
+          <a
+            href="https://firecrawl.dev"
+            target="_blank"
+            className="text-black hover:text-orange-400"
+            style={{ textShadow: "2px 2px 4px rgba(0, 0, 0, 0.15)" }}
+          >
+            A demo web scraping and vision extraction from Firecrawl 🔥
+          </a>
+        </div>
+      </main>
+    </div>
+  );
+}