feat(web): add page route

duongdev · duongdev · commit 28318736f689 · 2024-04-12T01:15:05.000+07:00
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -3,6 +3,7 @@
     "cryptodex",
     "highcharts",
     "packedbubble",
+    "strapi",
     "tanstack"
   ]
 }
diff --git a/apps/web/src/app/[...pageSlug]/layout.tsx b/apps/web/src/app/[...pageSlug]/layout.tsx
@@ -0,0 +1,13 @@
+import { ReactNode } from "react";
+import { Header } from "../_components/header";
+import { getHeaderNavItems } from "@/lib/api/common";
+
+export default async function Layout({ children }: { children: ReactNode}) {
+  const headerNavItems = await getHeaderNavItems()
+  return (
+    <div>
+      <Header headerNavItems={headerNavItems} />
+      {children}
+    </div>
+  )
+}
diff --git a/apps/web/src/app/[...pageSlug]/not-found.tsx b/apps/web/src/app/[...pageSlug]/not-found.tsx
@@ -0,0 +1,25 @@
+export default function NotFound() {
+  return (
+    <div
+      style={{ height: 'calc(100dvh - 56px)' }}
+      className="flex flex-col items-center justify-center gap-4"
+    >
+      <svg
+        width="128"
+        fill="currentColor"
+        className="text-primary mb-4"
+        viewBox="0 0 112 138"
+      >
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M12 4h88a8 8 0 018 8v108H4V12a8 8 0 018-8zM0 12C0 5.373 5.373 0 12 0h88c6.627 0 12 5.373 12 12v112h-8.131v13.156H10V124H0V12zm21.603 5.953h67.954c.565 0 1.023.458 1.023 1.023V72.93c0 .565-.458 1.023-1.023 1.023H21.603a1.023 1.023 0 01-1.023-1.023V18.976c0-.565.458-1.023 1.023-1.023zm-5.023 1.023a5.023 5.023 0 015.023-5.023h67.954a5.023 5.023 0 015.023 5.023V72.93a5.023 5.023 0 01-5.023 5.023H21.603a5.023 5.023 0 01-5.023-5.023V18.976zm83.29 105.522H14v8.658h85.87v-8.658zM92.433 93.94H64.81v5.074h27.626V93.94zm-80.877 10.074h10.046v5.074H11.557v-5.074zm18.836-78.9h-3.767v5.165h3.767v-5.165zm5.023 0h3.767v5.165h-3.767v-5.165zm12.557 0h-3.767v5.165h3.767v-5.165zm5.023 0h3.767v5.165h-3.767v-5.165zm12.557 0h-3.767v5.165h3.767v-5.165zm5.023 0h3.767v5.165h-3.767v-5.165zM30.393 35.16h-3.767v5.164h3.767V35.16zm5.023 0h3.767v5.164h-3.767V35.16zm12.557 0h-3.767v5.164h3.767V35.16zm5.023 0h3.767v5.164h-3.767V35.16zM30.393 45.206h-3.767v5.164h3.767v-5.164zm5.023 0h3.767v5.164h-3.767v-5.164zM30.393 55.25h-3.767v5.165h3.767v-5.164zm5.023 0h3.767v5.165h-3.767v-5.164zm12.557 0h-3.767v5.165h3.767v-5.164zm12.624-6.76l3.114-3.115 7.41 7.41 7.007-7.006 3.293 3.294-7.006 7.007 7.41 7.41-3.114 3.114-7.41-7.41-7.007 7.006-3.293-3.294 7.006-7.006-7.41-7.41z"
+        ></path>
+      </svg>
+      <h1 className="text-5xl">Not found</h1>
+      <div className="text-sm sm:text-base">
+        The page you're trying to access does not exist.
+      </div>
+    </div>
+  )
+}
diff --git a/apps/web/src/app/[...pageSlug]/page.css b/apps/web/src/app/[...pageSlug]/page.css
@@ -0,0 +1,11 @@
+.page-content h1 {
+  @apply text-2xl font-semibold pt-4;
+}
+
+.page-content h2 {
+  @apply text-xl font-semibold pt-4;
+}
+
+.page-content ul {
+  @apply list-disc list-outside space-y-1 ml-4 md:ml-6;
+}
diff --git a/apps/web/src/app/[...pageSlug]/page.tsx b/apps/web/src/app/[...pageSlug]/page.tsx
@@ -0,0 +1,41 @@
+/* eslint-disable react/no-danger */
+import { getPage } from '@/lib/api/page'
+
+import './page.css'
+import { notFound } from 'next/navigation'
+
+export default async function Page({
+  params,
+}: {
+  params: { pageSlug: string }
+}) {
+  const { pageSlug } = params
+  const page = await getPage(pageSlug)
+
+  if (!page) {
+    notFound()
+  }
+
+  return (
+    <div>
+      <div className="absolute top-0 -z-10 h-full w-full bg-white dark:hidden">
+        <div className="absolute bottom-auto left-auto right-0 top-0 h-[500px] w-[500px] -translate-x-[30%] translate-y-[20%] rounded-full bg-[rgba(173,109,244,0.5)] opacity-50 blur-[80px]" />
+      </div>
+      <div className="fixed bottom-0 left-0 right-0 top-0 -z-10 hidden dark:block">
+        <div className="relative h-full w-full bg-slate-950">
+          <div className="absolute bottom-0 left-0 right-0 top-0 bg-[radial-gradient(circle_500px_at_50%_200px,#3e3e3e,transparent)]" />
+        </div>
+      </div>
+
+      <div className="container mx-auto max-w-screen-md p-4 pb-8 md:mb-16 md:px-0">
+        <div className="flex flex-col items-start justify-center py-8 md:py-16">
+          <h1 className="text-5xl">{page?.title_en}</h1>
+        </div>
+        <div
+          className="[& h1]:text-lg page-content space-y-4"
+          dangerouslySetInnerHTML={{ __html: page?.content_en || '' }}
+        />
+      </div>
+    </div>
+  )
+}
diff --git a/apps/web/src/app/_components/crypto-bubbles.tsx b/apps/web/src/app/_components/crypto-bubbles.tsx
@@ -14,7 +14,7 @@ import { useWindowSize } from 'react-use'
 
 import { exchangeFilterAtom, performanceOptionAtom } from '@/atoms/crypto'
 import { useTrackBannerClick } from '@/components/ad-banner'
-import type { MonetizationAdBannerComponent } from '@/lib/api'
+import type { MonetizationAdBannerComponent } from '@/lib/api/strapi'
 import {
   BUBBLE_OPTIONS,
   DEFAULT_PERFORMANCE_OPTION,
diff --git a/apps/web/src/app/_components/crypto-table/columns.tsx b/apps/web/src/app/_components/crypto-table/columns.tsx
@@ -13,7 +13,7 @@ import {
   TooltipProvider,
   TooltipTrigger,
 } from '@/components/ui/tooltip'
-import type { ExchangeListResponseDataItem } from '@/lib/api'
+import type { ExchangeListResponseDataItem } from '@/lib/api/strapi'
 import type { Exchange } from '@/lib/exchanges'
 import type { ANY, CryptoData, Currency } from '@/lib/types'
 
diff --git a/apps/web/src/app/_components/crypto-table/crypto-table.tsx b/apps/web/src/app/_components/crypto-table/crypto-table.tsx
@@ -33,7 +33,7 @@ import {
   TableHeader,
   TableRow,
 } from '@/components/ui/table'
-import type { ExchangeListResponseDataItem } from '@/lib/api'
+import type { ExchangeListResponseDataItem } from '@/lib/api/strapi'
 import { CRYPTO_TABLE_SIZE } from '@/lib/constants'
 import type { CryptoData } from '@/lib/types'
 
diff --git a/apps/web/src/app/_components/exchange-logo.tsx b/apps/web/src/app/_components/exchange-logo.tsx
@@ -1,6 +1,6 @@
 import Image from 'next/image'
 
-import type { ExchangeListResponseDataItem } from '@/lib/api'
+import type { ExchangeListResponseDataItem } from '@/lib/api/strapi'
 import { cn } from '@/lib/utils'
 import { track } from '@vercel/analytics/react'
 
diff --git a/apps/web/src/app/_components/header.tsx b/apps/web/src/app/_components/header.tsx
@@ -5,7 +5,7 @@ import Link from 'next/link'
 
 import { DynamicLink } from '@/components/dynamic-link'
 import { Button } from '@/components/ui/button'
-import type { NavigationAppBarNavComponent } from '@/lib/api'
+import type { NavigationAppBarNavComponent } from '@/lib/api/strapi'
 
 export type HeaderProps = {
   children?: ReactNode
@@ -27,7 +27,7 @@ export const Header: FC<HeaderProps> = async ({
             src="/images/logo/logo-base-256x256.png"
             width={32}
           />
-          <div className="ml-1 hidden text-lg font-semibold text-[#4D0BDA] md:block">
+          <div className="ml-1 hidden text-lg font-semibold text-primary md:block">
             <b>Harga</b>Crypto
           </div>
         </Link>
diff --git a/apps/web/src/app/_components/realtime-crypto-wrapper.tsx b/apps/web/src/app/_components/realtime-crypto-wrapper.tsx
@@ -5,8 +5,8 @@ import { useEffect, useState } from 'react'
 
 import { AdBanner } from '@/components/ad-banner'
 import { Progress } from '@/components/ui/progress'
-import type { ExchangeListResponseDataItem } from '@/lib/api'
-import { MonetizationAdBannerComponent } from '@/lib/api'
+import type { ExchangeListResponseDataItem } from '@/lib/api/strapi'
+import { MonetizationAdBannerComponent } from '@/lib/api/strapi'
 import { REFRESH_INTERVAL } from '@/lib/constants'
 import type { CryptoData } from '@/lib/types'
 
@@ -64,7 +64,7 @@ export const RealtimeCryptoWrapper: FC<RealtimeCryptoWrapperProps> = ({
         cryptos={topCryptos}
       />
       <div
-        className="container max-w-screen-2xl -mt-10 flex flex-col gap-4 px-2 pb-8 pt-16 md:px-8"
+        className="container -mt-10 flex max-w-screen-2xl flex-col gap-4 px-2 pb-8 pt-16 md:px-8"
         id="table-wrapper"
       >
         {belowBubblesBanners.length > 0 && (
diff --git a/apps/web/src/app/globals.css b/apps/web/src/app/globals.css
@@ -45,11 +45,11 @@
     --popover: 0 0% 3.9%;
     --popover-foreground: 0 0% 98%;
 
-    --primary: 0 0% 98%;
-    --primary-foreground: 0 0% 9%;
+    --primary: 259 90% 45%;
+    --primary-foreground: 0 0% 98%;
 
-    --secondary: 0 0% 14.9%;
-    --secondary-foreground: 0 0% 98%;
+    --secondary: 0 0% 96.1%;
+    --secondary-foreground: 0 0% 9%;
 
     --muted: 0 0% 14.9%;
     --muted-foreground: 0 0% 63.9%;
diff --git a/apps/web/src/app/layout.tsx b/apps/web/src/app/layout.tsx
@@ -33,9 +33,11 @@ export default function RootLayout({
         <JotaiProvider>
           <ThemeProvider
             disableTransitionOnChange
+            enableColorScheme
             enableSystem
             attribute="class"
             defaultTheme="system"
+            // forcedTheme="dark"
             storageKey="theme"
           >
             {children}
diff --git a/apps/web/src/app/page.tsx b/apps/web/src/app/page.tsx
@@ -1,6 +1,7 @@
 import { Filter } from 'lucide-react'
 
-import { strapi } from '@/lib/api'
+import { getHeaderNavItems, getSiteConfig } from '@/lib/api/common'
+import { strapi } from '@/lib/api/strapi'
 import { getCryptoData } from '@/services/cryptos'
 
 import { exchangeOptions } from './_components/crypto-table/table-toolbar'
@@ -25,10 +26,8 @@ export default async function Home({
     return getCryptoData()
   }
 
-  const siteConfig = await strapi.siteConfig.getSiteConfig({
-    populate: 'deep,4',
-  })
-  const headerNavItems = siteConfig.data?.attributes?.header_nav ?? []
+  const siteConfig = await getSiteConfig()
+  const headerNavItems = await getHeaderNavItems(siteConfig)
   const adBanners = siteConfig.data?.attributes?.ad_banners ?? []
   const exchanges =
     (
diff --git a/apps/web/src/components/ad-banner.tsx b/apps/web/src/components/ad-banner.tsx
@@ -5,7 +5,7 @@ import type { FC } from 'react'
 import { track } from '@vercel/analytics/react'
 import Image from 'next/image'
 
-import type { MonetizationAdBannerComponent } from '@/lib/api'
+import type { MonetizationAdBannerComponent } from '@/lib/api/strapi'
 import { cn } from '@/lib/utils'
 
 import { DynamicLink } from './dynamic-link'
diff --git a/apps/web/src/components/dynamic-link.tsx b/apps/web/src/components/dynamic-link.tsx
@@ -2,8 +2,8 @@ import type { FC, ReactNode } from 'react'
 
 import Link from 'next/link'
 
-import type { Page } from '@/lib/api'
-import { NavigationAppBarNavComponent } from '@/lib/api'
+import type { Page } from '@/lib/api/strapi'
+import { NavigationAppBarNavComponent } from '@/lib/api/strapi'
 
 export type DynamicLinkProps = {
   link: {
diff --git a/apps/web/src/lib/api/common.ts b/apps/web/src/lib/api/common.ts
@@ -0,0 +1,20 @@
+import type { SiteConfigResponse } from './strapi'
+import { strapi } from './strapi'
+
+export async function getSiteConfig() {
+  const siteConfig = await strapi.siteConfig.getSiteConfig({
+    populate: 'deep,4',
+  })
+
+  return siteConfig
+}
+
+export async function getHeaderNavItems(siteConfig?: SiteConfigResponse) {
+  if (!siteConfig) {
+    // eslint-disable-next-line no-param-reassign
+    siteConfig = await getSiteConfig()
+  }
+  const headerNavItems = siteConfig.data?.attributes?.header_nav ?? []
+
+  return headerNavItems
+}
diff --git a/apps/web/src/lib/api/page.ts b/apps/web/src/lib/api/page.ts
@@ -0,0 +1,13 @@
+import { strapi } from './strapi'
+
+export async function getPage(pageSlug: string) {
+  const { data } = await strapi.page.getPages({
+    filters: {
+      slug: { $eq: pageSlug },
+    },
+    paginationLimit: 1,
+    populate: 'deep,4',
+  })
+
+  return data?.[0]?.attributes ?? null
+}
diff --git a/apps/web/src/lib/api/strapi.ts b/apps/web/src/lib/api/strapi.ts
diff --git a/bun.lockb b/bun.lockb

Original file line number	Diff line number	Diff line change
`@@ -3,6 +3,7 @@`
`3`	`3`	`"cryptodex",`
`4`	`4`	`"highcharts",`
`5`	`5`	`"packedbubble",`
	`6`	`+ "strapi",`
`6`	`7`	`"tanstack"`
`7`	`8`	`]`
`8`	`9`	`}`