Merge pull request #39 from PotLock/landing-page-new

Landing page new

landing-page/components/TweetWall.js

@@ -0,0 +1,76 @@
+import React from "react";
+import tweetData from "../data/tweets.json";
+import { Tweet } from "react-tweet";
+import { ErrorBoundary } from "next/dist/client/components/error-boundary";
+
+const TweetWall = () => {
+  const [currentIndex, setCurrentIndex] = React.useState(0);
+
+  const handleScroll = (event) => {
+    const scrollLeft = event.target.scrollLeft;
+    const width = event.target.clientWidth;
+    const newIndex = Math.round(scrollLeft / width);
+    setCurrentIndex(newIndex);
+  };
+
+  return (
+    <div data-theme="light">
+      <div className="hidden md:grid md:grid-cols-3">
+        {tweetData.tweetIds.map((tweetId, index) => (
+          <div
+            key={index}
+            className={`p-8 ${index < 6 ? "border-b" : ""} ${
+              index % 3 !== 2 ? "border-r" : ""
+            } border-[#57606A] `}
+            style={{
+              height: "500px",
+              overflowY: "scroll",
+              scrollbarWidth: "none",
+            }}
+          >
+            <ErrorBoundary
+              fallback={
+                <div className="p-4 text-gray-500">Failed to load tweet</div>
+              }
+            >
+              <Tweet id={tweetId} />
+            </ErrorBoundary>
+          </div>
+        ))}
+      </div>
+      <div className="md:hidden">
+        <div
+          className="flex overflow-x-auto snap-x snap-mandatory scrollbar-hide"
+          onScroll={handleScroll}
+        >
+          {tweetData.tweetIds.map((tweetId, index) => (
+            <div
+              key={index}
+              className="mb-4 min-w-full flex-shrink-0 snap-center mx-auto p-4 md:p-8 border-b border-[#57606A] flex justify-center"
+            >
+              <ErrorBoundary
+                fallback={
+                  <div className="p-4 text-gray-500">Failed to load tweet</div>
+                }
+              >
+                <Tweet id={tweetId} className="mx-auto" />
+              </ErrorBoundary>
+            </div>
+          ))}
+        </div>
+        <div className="flex justify-center gap-2 mt-4 mb-6">
+          {tweetData.tweetIds.map((_, index) => (
+            <div
+              key={index}
+              className={`h-2 w-2 rounded-full ${
+                index === currentIndex ? "bg-black" : "bg-gray-200"
+              }`}
+            />
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default TweetWall;

landing-page/data/tweets.json

@@ -0,0 +1,8 @@
+{
+  "tweetIds": [
+    "1881684365459280082",
+    "1881680249311883591",
+    "1886638266876879340",
+    "1886318920996409814"
+  ]
+}

landing-page/next.config.js

@@ -0,0 +1,6 @@
+/** @type {import('next').NextConfitg } */
+const nextConfig = {
+  transpilePackages: ["react-tweet"],
+};
+
+export default nextConfig;

landing-page/package.json

@@ -11,18 +11,21 @@
   },
   "dependencies": {
     "autoprefixer": "^10.4.20",
+    "lucide-react": "^0.474.0",
     "next": "14.1.0",
     "postcss": "^8.4.49",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-icons": "^5.4.0",
+    "react-router-dom": "^7.1.5",
+    "react-tweet": "^3.2.1",
     "react-type-animation": "^3.2.0",
     "tailwindcss": "^3.4.16"
   },
   "devDependencies": {
     "@types/node": "^20.11.19",
-    "@types/react": "^18.2.57",
-    "@types/react-dom": "^18.2.19",
+    "@types/react": "^19.0.8",
+    "@types/react-dom": "^19.0.3",
     "eslint": "^8.56.0",
     "eslint-config-next": "14.1.0",
     "typescript": "^5.3.3"