feat: add alert-card

src/app/(lobby)/_components/lobby.tsx

@@ -45,6 +45,7 @@ export async function Lobby({
             <Icons.gitHub className="mr-2 size-3.5" aria-hidden="true" />
             {githubStars} stars on GitHub
           </Badge>
+
           <span className="sr-only">GitHub</span>
         </Link>
         <h1 className="text-balance font-heading text-3xl sm:text-5xl md:text-6xl lg:text-7xl">

src/app/(lobby)/products/page.tsx

@@ -1,17 +1,14 @@
 import { type Metadata } from "next"
-import { products } from "@/db/schema"
 import { env } from "@/env.js"
 import type { SearchParams } from "@/types"
 
-import { getProducts } from "@/lib/fetchers/product"
-import { getStores } from "@/lib/fetchers/store"
-import { productsSearchParamsSchema } from "@/lib/validations/params"
+import { getProducts } from "@/lib/actions/product"
+import { AlertCard } from "@/components/alert-card"
 import {
   PageHeader,
   PageHeaderDescription,
   PageHeaderHeading,
 } from "@/components/page-header"
-import { Products } from "@/components/products"
 import { Shell } from "@/components/shells/shell"
 
 export const metadata: Metadata = {
@@ -27,48 +24,7 @@ interface ProductsPageProps {
 export default async function ProductsPage({
   searchParams,
 }: ProductsPageProps) {
-  const {
-    page,
-    per_page,
-    sort,
-    categories,
-    subcategories,
-    price_range,
-    store_ids,
-    store_page,
-    active,
-  } = productsSearchParamsSchema.parse(searchParams)
-
-  // Products transaction
-  const fallbackPage = isNaN(page) || page < 1 ? 1 : page
-  // Number of items per page
-  const limit = isNaN(per_page) ? 10 : per_page
-  // Number of items to skip
-  const offset = fallbackPage > 0 ? (fallbackPage - 1) * limit : 0
-
-  const productsTransaction = await getProducts({
-    limit,
-    offset,
-    sort,
-    categories,
-    subcategories,
-    price_range,
-    store_ids,
-    active,
-  })
-
-  // Stores transaction
-  const fallbackStoresPage =
-    isNaN(store_page) || store_page < 1 ? 1 : store_page
-  const storesLimit = 40
-  const storesOffset =
-    fallbackStoresPage > 0 ? (fallbackStoresPage - 1) * storesLimit : 0
-
-  const storesTransaction = await getStores({
-    limit: storesLimit,
-    offset: storesOffset,
-    sort: "productCount.desc",
-  })
+  const productsTransaction = await getProducts(searchParams)
 
   return (
     <Shell>
@@ -78,13 +34,7 @@ export default async function ProductsPage({
           Buy products from our stores
         </PageHeaderDescription>
       </PageHeader>
-      <Products
-        products={productsTransaction.data}
-        pageCount={productsTransaction.pageCount}
-        categories={Object.values(products.category.enumValues)}
-        stores={storesTransaction.data}
-        storePageCount={storesTransaction.pageCount}
-      />
+      <AlertCard />
     </Shell>
   )
 }

src/components/alert-card.tsx

@@ -0,0 +1,33 @@
+import { RocketIcon } from "@radix-ui/react-icons"
+
+import { siteConfig } from "@/config/site"
+import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"
+import { Icons } from "@/components/icons"
+
+interface AlertCardProps {
+  title?: string
+  description?: string
+  icon?: keyof typeof Icons
+}
+
+export function AlertCard({
+  title = "Rewriting with the latest Next.js 14 features and mental models!",
+  description = `Will post updates on x (${siteConfig.links.x})`,
+  icon,
+}: AlertCardProps) {
+  const Icon = icon ? Icons[icon] : RocketIcon
+
+  return (
+    <Alert className="flex flex-col items-center justify-center space-y-8 p-16">
+      <div className="flex aspect-square size-fit items-center justify-center rounded-full border border-dashed p-4">
+        <Icon className="size-5" />
+      </div>
+      <div className="flex flex-col items-center space-y-2 text-center">
+        <AlertTitle className="text-lg">{title}</AlertTitle>
+        <AlertDescription className="text-muted-foreground">
+          {description}
+        </AlertDescription>
+      </div>
+    </Alert>
+  )
+}

src/components/icons.tsx

@@ -44,12 +44,15 @@ export const Icons = {
       />
     </svg>
   ),
-  twitter: (props: IconProps) => (
-    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...props}>
-      <path
-        fill="currentColor"
-        d="M21.543 7.104c.015.211.015.423.015.636 0 6.507-4.954 14.01-14.01 14.01v-.003A13.94 13.94 0 0 1 0 19.539a9.88 9.88 0 0 0 7.287-2.041 4.93 4.93 0 0 1-4.6-3.42 4.916 4.916 0 0 0 2.223-.084A4.926 4.926 0 0 1 .96 9.167v-.062a4.887 4.887 0 0 0 2.235.616A4.928 4.928 0 0 1 1.67 3.148a13.98 13.98 0 0 0 10.15 5.144 4.929 4.929 0 0 1 8.39-4.49 9.868 9.868 0 0 0 3.128-1.196 4.941 4.941 0 0 1-2.165 2.724A9.828 9.828 0 0 0 24 4.555a10.019 10.019 0 0 1-2.457 2.549z"
-      />
+  x: (props: IconProps) => (
+    <svg
+      width="23"
+      height="23"
+      viewBox="0 0 1200 1227"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path d="M714.163 519.284L1160.89 0H1055.03L667.137 450.887L357.328 0H0L468.492 681.821L0 1226.37H105.866L515.491 750.218L842.672 1226.37H1200L714.137 519.284H714.163ZM569.165 687.828L521.697 619.934L144.011 79.6944H306.615L611.412 515.685L658.88 583.579L1055.08 1150.3H892.476L569.165 687.854V687.828Z" />
     </svg>
   ),
   facebook: ({ ...props }: IconProps) => (

src/config/site.ts

@@ -6,7 +6,7 @@ import { slugify } from "@/lib/utils"
 export type SiteConfig = typeof siteConfig
 
 const links = {
-  twitter: "https://twitter.com/sadmann17",
+  x: "https://twitter.com/sadmann17",
   github: "https://github.com/sadmann7/skateshop",
   githubAccount: "https://github.com/sadmann7",
   discord: "https://discord.com/users/sadmann7",
@@ -122,8 +122,8 @@ export const siteConfig = {
       title: "Social",
       items: [
         {
-          title: "Twitter",
-          href: links.twitter,
+          title: "X",
+          href: links.x,
           external: true,
         },
         {