2023-12-18 03:18:17 +00:00
import React from "react" ;
import { ArrowLeftIcon } from "@heroicons/react/24/outline" ;
2023-12-22 09:42:21 +00:00
import { formatDate , getAvailableSites , getResults } from "@/utils" ;
2023-12-18 03:18:17 +00:00
import SimplifiedSearchBar from "@/components/SimplifiedSearchBar" ;
2023-12-22 09:42:21 +00:00
import { Link , useLoaderData , useSearchParams } from "@remix-run/react" ;
import { json , LoaderFunction } from "@remix-run/node" ;
import type { SearchResult , SiteList } from "@/types.js" ;
2023-12-27 12:19:03 +00:00
import { generateMetaTags } from "@/lib/meta.js" ;
2023-12-27 16:20:55 +00:00
import type { ServerRuntimeMetaArgs } from "@remix-run/server-runtime" ;
2023-11-14 15:52:42 +00:00
2023-12-22 09:42:21 +00:00
type LoaderData = {
sites : SiteList ;
results : SearchResult [ ] ;
query : string ;
} ;
2023-12-27 16:20:55 +00:00
export function meta ( meta : ServerRuntimeMetaArgs ) {
2023-12-27 12:19:03 +00:00
const title = "Search - web3.news: Discover Community Web3 News" ;
const description =
"Explore a vast array of Web3, Crypto, and DeFi news and insights. Use web3.news search to dive deep into community-driven content, uncovering the latest trends and developments in the decentralized world." ;
2023-12-27 16:20:55 +00:00
return [
. . . generateMetaTags ( {
title : title ,
description : description ,
parentMeta : meta ,
} ) ,
] ;
2023-12-27 12:19:03 +00:00
}
2023-12-22 09:42:21 +00:00
export let loader : LoaderFunction = async ( { request } ) = > {
const sites = getAvailableSites ( ) ;
const search = new URL ( request . url ) . searchParams ;
const query = search . get ( "q" ) ? ? "" ;
2023-12-23 12:28:52 +00:00
const site = search . get ( "site" ) ? ? undefined ;
const time = search . get ( "time" ) ? ? undefined ;
const results = await getResults ( { query : query , site , time } ) ;
2023-11-14 15:52:42 +00:00
2023-12-22 09:42:21 +00:00
// Return the fetched data as JSON
return json ( { sites , results , query } ) ;
} ;
const Page = ( ) = > {
const { sites , results , query } = useLoaderData < LoaderData > ( ) ;
2023-11-14 15:52:42 +00:00
return (
< div className = "w-full items-center text-lg" >
2023-11-15 09:16:20 +00:00
< SimplifiedSearchBar
value = { query }
placeholder = {
query ? undefined : "Search for web3 news from the community"
}
2023-12-22 09:42:21 +00:00
sites = { sites }
2023-11-15 09:16:20 +00:00
/ >
2023-12-18 03:18:17 +00:00
< Link to = "/" >
2023-12-05 17:38:27 +00:00
< button className = "my-4 -ml-3 px-3 py-2 text-gray-400 hover:bg-gray-800 hover:text-white rounded" >
2023-11-15 09:16:20 +00:00
< ArrowLeftIcon className = "w-4 h-4 inline mr-2 -mt-1" / >
Go Back Home
< / button >
< / Link >
2023-11-14 15:52:42 +00:00
{ results . length > 0 && (
< >
{ results . map ( ( item ) = > (
2023-11-15 09:16:20 +00:00
< Link
2023-12-18 03:18:17 +00:00
to = { ` /article/ ${ item . slug } ` }
2023-11-14 15:52:42 +00:00
key = { item . id }
className = "flex cursor-pointer flex-row items-center space-x-5 my-2 py-2 px-4 hover:bg-gray-800 rounded-md"
>
< span className = "text-sm text-gray-400" >
{ formatDate ( item . timestamp ) }
< / span >
2023-12-24 16:43:41 +00:00
< h3 className = "text-md font-semibold text-white" >
{ " " }
< Link to = { ` /article/ ${ item . cid } ` } > { item . title } < / Link >
< / h3 >
2023-11-15 09:16:20 +00:00
< / Link >
2023-11-14 15:52:42 +00:00
) ) }
2023-12-18 03:18:17 +00:00
< Link to = { ` /search?q= ${ encodeURIComponent ( query ) } ` } >
2023-11-14 15:52:42 +00:00
< button className = "rounded mt-4 flex justify-center items-center bg-gray-800 mx-auto w-44 py-7 text-white hover:bg-gray-800/50 transition-colors" >
Load More
< / button >
< / Link >
< / >
) }
< / div >
2023-12-18 03:18:17 +00:00
) ;
} ;
2023-11-14 15:52:42 +00:00
2023-12-18 03:18:17 +00:00
export default Page ;