feat: added graphics

2023-12-05 17:06:54 +01:00 · 2023-12-05 17:06:54 +01:00 · c8c77b536e
parent 1ff20dcf73
commit c8c77b536e
6 changed files with 150 additions and 21 deletions
--- a/public/lume-logo-bg.png
+++ b/public/lume-logo-bg.png
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@ -1,24 +1,26 @@
-import { redirect } from "next/navigation";
-import { headers } from "next/headers";
-import Feed from "@/components/Feed";
-import SearchBar from "@/components/SearchBar";
-import { fetchFeedData } from "@/lib/feed.ts";
+import { redirect } from "next/navigation"
+import { headers } from "next/headers"
+import Feed from "@/components/Feed"
+import SearchBar from "@/components/SearchBar"
+import { fetchFeedData } from "@/lib/feed.ts"
+import * as GraphicSection from "@/components/GraphicSection"
+import { ArrowIcon } from "@/components/ArrowIcon"

 type Props = {
  searchParams?: {
-    q?: string | undefined;
-  };
-};
+    q?: string | undefined
+  }
+}

 export default async function Home({ searchParams }: Props) {
-  const headerList = headers();
-  const referer = headerList.get("referer");
+  const headerList = headers()
+  const referer = headerList.get("referer")

  if (!referer && searchParams?.q) {
-    redirect(`/search?q=${searchParams.q}`);
+    redirect(`/search?q=${searchParams.q}`)
  }

-  const data = await fetchFeedData({});
+  const data = await fetchFeedData({})

  return (
    <>
@ -32,7 +34,55 @@ export default async function Home({ searchParams }: Props) {
            initialData={data.data}
          />
        </div>
+        <GraphicSection.Root href="https://lumeweb.com" className="h-[100px] border border-gray-800 cursor-pointer [&:hover_.link]:underline [&:hover_.background]:rotate-12 [&:hover_.background]:scale-110">
+          <GraphicSection.Background>
+            <img
+              src="/lume-logo-bg.png"
+              className="background transition-transform duration-500 transform-gpu absolute -top-[320px] -right-10"
+              alt=""
+              aria-hidden
+            />
+          </GraphicSection.Background>
+          <GraphicSection.Foreground>
+            <div className="mt-5 flex flex-col items-center justify-center">
+              <p className="text-white text-lg">
+                WEB3.NEWS is a project by Lume. Let’s build an open, user-owned
+                web together.
+              </p>
+              <div className="link flex text-gray-400">
+                <span>
+                  Learn more about Lume and join our community
+                </span>
+                <ArrowIcon className=" ml-2 mt-2"/>
+              </div>
+            </div>
+          </GraphicSection.Foreground>
+        </GraphicSection.Root>
+        <GraphicSection.Root href="https://lumeweb.com" className="h-[300px] border border-gray-800 cursor-pointer [&:hover_.link]:underline [&:hover_.background]:rotate-12 [&:hover_.background]:scale-110">
+          <GraphicSection.Background>
+            <img
+              src="/lume-logo-bg.png"
+              className="background transition-transform duration-500 transform-gpu absolute -top-[100px] -left-10"
+              alt=""
+              aria-hidden
+            />
+          </GraphicSection.Background>
+          <GraphicSection.Foreground>
+            <div className="flex flex-col items-start justify-center h-full w-[500px] float-right mr-20">
+              <p className="text-white text-2xl">
+                WEB3.NEWS is a project by <span className="underline">Lume</span>. Let’s build an open, user-owned
+                web together.
+              </p>
+              <div className="link mt-2 flex text-gray-400">
+                <span>
+                  Learn more about Lume and join our community
+                </span>
+                <ArrowIcon className=" ml-2 mt-2"/>
+              </div>
+            </div>
+          </GraphicSection.Foreground>
+        </GraphicSection.Root>
      </div>
    </>
-  );
+  )
 }
--- a/src/components/ArrowIcon.tsx
+++ b/src/components/ArrowIcon.tsx
@ -0,0 +1,48 @@
+export const ArrowIcon = ({className}: {className?: string}) => {
+  return (
+    <svg
+      width="10"
+      height="10"
+      viewBox="0 0 10 10"
+      fill="none"
+      className={className}
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <g clip-path="url(#clip0_61_133)">
+        <path
+          d="M3.30432 1.71807L8.28174 1.71826"
+          stroke="currentColor"
+          stroke-opacity="0.75"
+          stroke-width="2"
+          stroke-miterlimit="10"
+          stroke-linecap="square"
+        />
+        <path
+          d="M8.28175 1.7183L8.28198 6.6958"
+          stroke="currentColor"
+          stroke-opacity="0.75"
+          stroke-width="2"
+          stroke-miterlimit="10"
+          stroke-linecap="square"
+        />
+        <path
+          d="M8.28149 1.71834L1.25024 8.74951"
+          stroke="currentColor"
+          stroke-opacity="0.75"
+          stroke-width="2"
+          stroke-miterlimit="10"
+        />
+      </g>
+      <defs>
+        <clipPath id="clip0_61_133">
+          <rect
+            width="10"
+            height="10"
+            fill="currentColor"
+            transform="translate(10.0007 9.99951) rotate(-180)"
+          />
+        </clipPath>
+      </defs>
+    </svg>
+  )
+}
--- a/src/components/Feed.tsx
+++ b/src/components/Feed.tsx
@ -23,8 +23,6 @@ const Feed = ({
  initialData: Article[];
 }) => {
  const filters = ["latest", "day", "week", "month"] as const;
-  const [dataResponse, setDataResponse] =
-    useState<Awaited<ReturnType<typeof fetchFeedData>>>();
  const [content, setContent] = useState<NonNullable<Article[]>>(initialData);
  const [selectedFilter, setSelectedFilter] =
    useState<(typeof filters)[number]>("latest");
@ -111,7 +109,7 @@ const Feed = ({
                </article>
              );
            })}
-            {dataResponse?.next ? (
+            {swrData?.next ? (
              <button
                className="bg-gray-600 text-gray-300 rounded-md p-2 px-4"
                onClick={handleLoadMore}
--- a/src/components/GraphicSection.tsx
+++ b/src/components/GraphicSection.tsx
@ -0,0 +1,17 @@
+const Root = ({className, children, href}: React.PropsWithChildren & {href:string,className?: string}) => {
+    return <a href={href} className={`block relative overflow-hidden w-full ${className}`}>{children}</a>
+}
+
+const Background = ({className, children}: React.PropsWithChildren & {className?: string}) => {
+    return <div className={`absolute w-full inset-0 z-0 ${className}`}>{children}</div>
+}
+
+const Foreground = ({className, children}: React.PropsWithChildren & {className?: string}) => {
+    return <div className={`absolute w-full h-full inset-0 z-10 ${className}`}>{children}</div>
+}
+
+export {
+    Root,
+    Background,
+    Foreground
+}
--- a/src/lib/feed.ts
+++ b/src/lib/feed.ts
@ -39,11 +39,27 @@ export async function fetchFeedData({
    }
  }

-  const articles = await prisma.article.findMany({
-    ...query,
-    skip: current,
-    take: next,
-  });
+  // Mocking the data instead of fetching from the database
+  const articles: Article[] = [
+    {
+      id: 1,
+      title: "Mock Article 1",
+      slug: "This is a mock article.",
+      siteKey: "asdas",
+      url: "asdasd",
+      createdAt: new Date(),
+      updatedAt: new Date(),
+    },
+    {
+      id: 2,
+      title: "Mock Article 2",
+      slug: "This is a mock article.",
+      siteKey: "asdas",
+      url: "asdasd",
+      createdAt: new Date(),
+      updatedAt: new Date(),
+    },
+  ];

  const nextPointer = articles.length >= limit ? next + limit : null;