From 50ba72f95006f529b253496bd15a212edf8200c6 Mon Sep 17 00:00:00 2001 From: Juan Di Toro Date: Wed, 15 Nov 2023 10:16:20 +0100 Subject: [PATCH] feat: site is pretty much done now, all functionality is cover just losing some details --- src/app/article/[slug]/page.tsx | 34 ++++++++++ src/app/layout.tsx | 49 ++------------ src/app/search/page.tsx | 49 +++++--------- src/components/LayoutFooter.tsx | 13 ++++ src/components/LayoutHeader.tsx | 50 ++++++++++++++ src/components/SearchBar.tsx | 112 ++++++++++++++++---------------- src/types.d.ts | 1 + src/utils.ts | 41 +++++++++--- 8 files changed, 209 insertions(+), 140 deletions(-) create mode 100644 src/app/article/[slug]/page.tsx create mode 100644 src/components/LayoutFooter.tsx create mode 100644 src/components/LayoutHeader.tsx diff --git a/src/app/article/[slug]/page.tsx b/src/app/article/[slug]/page.tsx new file mode 100644 index 0000000..e0db5b1 --- /dev/null +++ b/src/app/article/[slug]/page.tsx @@ -0,0 +1,34 @@ +"use client" +import { ArrowLeftIcon } from "@heroicons/react/24/outline" +import Link from "next/link" +// page https://www.businessinsider.com/web3-music-platforms-blockchain-even-sound-iyk-streaming-services-artists-2023-9#:~:text=Web3%20music%20platforms%20are%20combining,and%20'create%20dope%20consumer%20experiences'&text=Web3%20music%20platforms%20are%20changing,and%20ways%20to%20reach%20fans. +import React from "react" + +type Props = { + params: { + slug: string + } +} + +const Page = ({ params }: Props) => { + // TODO: Explore based on the slug, we can also change the slug to be like the id or something the backend understands + // We can also pre-render the article from the backend + return ( + <> + + + +
+ +
+ + ) +} + +export default Page diff --git a/src/app/layout.tsx b/src/app/layout.tsx index 9ca6e12..b8916be 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -2,6 +2,8 @@ import type { Metadata } from "next" import Image from "next/image" import { Inter, Jaldi } from "next/font/google" import "./globals.css" +import Header from "@/components/LayoutHeader" +import Footer from "@/components/LayoutFooter" const inter = Inter({ subsets: ["latin"], variable: "--font-inter" }) const jaldi = Jaldi({ @@ -23,55 +25,12 @@ export default function RootLayout({ return ( -
+
{children} +
) } - -export const Header = () => { - return ( -
-
- -
-
- - - a Lume project - -
-
- ) -} - -const Web3NewsLogo = ({ className }: { className?: string }) => { - return ( - - - - - ) -} diff --git a/src/app/search/page.tsx b/src/app/search/page.tsx index 415f3ed..33b19c9 100644 --- a/src/app/search/page.tsx +++ b/src/app/search/page.tsx @@ -1,7 +1,7 @@ import React, { FormEvent } from "react" import Link from "next/link" import { ArrowLeftIcon } from "@heroicons/react/24/outline" -import { formatDate } from "@/utils" +import { formatDate, getResults } from "@/utils" import SimplifiedSearchBar from "@/components/SimplifiedSearchBar" type Props = { @@ -16,17 +16,25 @@ const Page = async ({ searchParams }: Props) => { return (
- - - + + + + + {results.length > 0 && ( <> {results.map((item) => ( -
@@ -34,7 +42,7 @@ const Page = async ({ searchParams }: Props) => { {formatDate(item.timestamp)}

{item.title}

-
+ ))} diff --git a/src/types.d.ts b/src/types.d.ts index b0fd0ff..4d63566 100644 --- a/src/types.d.ts +++ b/src/types.d.ts @@ -3,4 +3,5 @@ type SearchResult = { timestamp: Date title: string description: string + slug: string } \ No newline at end of file diff --git a/src/utils.ts b/src/utils.ts index 18d455e..a6773ab 100644 --- a/src/utils.ts +++ b/src/utils.ts @@ -2,11 +2,36 @@ import { formatDistanceToNow } from "date-fns" // Utility function to format dates export const formatDate = (date: string | Date) => { - const distance = formatDistanceToNow(new Date(date), { addSuffix: true }) - return distance - .replace(/less than a minute?/, "<1m") - .replace(/ minutes?/, "m") - .replace(/ hours?/, "h") - .replace(/ days?/, "d") - .replace(/ weeks?/, "w") - } \ No newline at end of file + const distance = formatDistanceToNow(new Date(date), { addSuffix: true }) + return distance + .replace(/less than a minute?/, "<1m") + .replace(/ minutes?/, "m") + .replace(/ hours?/, "h") + .replace(/ days?/, "d") + .replace(/ weeks?/, "w") +} + +export async function getResults({ + query +}: { + query?: string +}): Promise { + if (!query) return [] + + return [ + { + id: 1, + timestamp: new Date(), + title: "Mock Title 1", + description: "Mock Description 1", + slug: "hello-world" + }, + { + id: 2, + timestamp: new Date(), + title: "Mock Title 2", + description: "Mock Description 2", + slug: "hello-world-2" + } + ] +}