feat: change daily stars to daily apps

dashboard/app/api/analystics/topapps/getAppStats.ts

@@ -2,6 +2,8 @@ import { duckdb, toParquetSql } from "@/lib/duckdb"
 
 import "server-only"
 
+import { apps } from "@/config/apps"
+
 import { DateRangeKey, getDateRangeCondition } from "../utils"
 
 export async function getTotalApps() {
@@ -17,6 +19,9 @@ export async function getTotalApps() {
 export type TopApps = {
   name: string
   value: number
+  description?: string
+  icon?: string
+  url?: string
 }[]
 
 export async function getTopApps(rangeKey: DateRangeKey) {
@@ -34,6 +39,15 @@ export async function getTopApps(rangeKey: DateRangeKey) {
     if (!r.name) {
       r.name = "other"
     }
+
+    const allApps = apps.find(
+      (app) => app.name.toLowerCase() === r.name.toLowerCase()
+    )
+    if (allApps) {
+      r.description = allApps.description
+      r.icon = allApps.icon
+      r.url = allApps.url
+    }
   })
 
   return result as TopApps

dashboard/app/page.tsx

@@ -1,9 +1,9 @@
 import DailyProfileStats from "@/components/daily-profile-stats"
 import DailyPublicationStats from "@/components/daily-publication-stats"
+import DailyApps from "@/components/dailyapps"
 import DauStats from "@/components/dau-stats"
 import Publications, { PublicationsProps } from "@/components/publications"
 import StatCards from "@/components/stat-cards"
-import TopProfiles from "@/components/top-profiles"
 
 export const revalidate = 900
 
@@ -18,11 +18,9 @@ export default async function Home() {
   return (
     <div className="mt-6 space-y-6">
       <StatCards />
-      <div className="flex flex-col gap-4 sm:flex-row">
-        <div className="w-2/3 ">
-          <TopProfiles />
-        </div>
-        <div className="flex w-full flex-col gap-1.5">
+      <div className="grid grid-cols-2 items-stretch gap-4">
+        <DailyApps />
+        <div className="grid gap-3">
           <DailyPublicationStats />
           <DailyProfileStats />
           <DauStats />

dashboard/components/apps-summary.tsx

@@ -1,52 +1,13 @@
 import Image from "next/image"
 import Link from "next/link"
 
+import { recommendApps } from "@/config/apps"
 import { getTotalApps } from "@/app/api/analystics/topapps/getAppStats"
 
 import { Button } from "./ui/button"
 import { Card, CardContent } from "./ui/card"
 
 export default async function AppsSummary() {
-  // recommend apps list
-  const recommendApps = [
-    {
-      name: "Orb",
-      description:
-        "Mobile experience with a focus on creators and communities ",
-      icon: "/apps/orb.png",
-      url: "https://orb.ac",
-    },
-    {
-      name: "Buttrfly",
-      description: "Web3 Social Explorer",
-      icon: "/apps/buttrfly.png",
-      url: "https://buttrfly.app/",
-    },
-    {
-      name: "T2",
-      description: "Where writers find their niche",
-      icon: "/apps/t2.png",
-      url: "https://t2.world/",
-    },
-    {
-      name: "Hey",
-      description: "Open source platform for desktop",
-      icon: "/apps/hey.png",
-      url: "https://hey.xyz/",
-    },
-    {
-      name: "Tape",
-      description: "Open-source video platform for desktop",
-      icon: "/apps/tape.png",
-      url: "https://tape.xyz",
-    },
-    {
-      name: "Dumpling",
-      description: "Streaming and steaming the best content from Lens",
-      icon: "/apps/dumpling.png",
-      url: "https://www.dumpling.lol/",
-    },
-  ]
   const totalApps = await getTotalApps()
   return (
     <div className="flex flex-col gap-5">

dashboard/components/charts/top-apps.tsx

@@ -6,16 +6,28 @@ import useSWR from "swr"
 
 import fetcher from "@/lib/fetcher"
 
+import { Error } from "../error"
+import { Loader } from "../loader"
 import { ChartCard } from "./chart-card"
 
 interface TopAppsProps {
   className?: string
 }
 
 export default function TopApps({ className }: TopAppsProps) {
-  const [range, setRange] = useState("ALL")
+  const [range, setRange] = useState("1D")
   const queryString = `/api/analystics/topapps?range=${range}`
-  const { data, error } = useSWR(queryString, fetcher)
+  const { data: rawData, error } = useSWR(queryString, fetcher)
+  if (error) return <Error msg={error.message} />
+  if (!rawData) return <Loader fixed={false} />
+
+  // only get name, value from data
+  const data: any = rawData.map((item: any) => {
+    return {
+      name: item.name,
+      value: item.value,
+    }
+  })
 
   return (
     <ChartCard

dashboard/components/dailyapps.tsx

@@ -0,0 +1,62 @@
+import Image from "next/image"
+import Link from "next/link"
+
+import { getTopApps } from "@/app/api/analystics/topapps/getAppStats"
+
+import { Button } from "./ui/button"
+import { Card, CardContent, CardHeader, CardTitle } from "./ui/card"
+
+export default async function DailyApps() {
+  const dailyApps = await (await getTopApps("ALL")).splice(0, 4)
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle className="flex items-center justify-between gap-2">
+          <div>Daily Apps</div>
+          <Link href="/apps" passHref>
+            <Button className="font-semibold" variant={"link"}>
+              VIEW ALL
+            </Button>
+          </Link>
+        </CardTitle>
+      </CardHeader>
+      <div className="w-full whitespace-nowrap">
+        <CardContent className="grid grid-cols-2 gap-7">
+          {dailyApps.map((app) => (
+            <Card key={app.name}>
+              <CardContent className="flex items-center p-4 sm:flex-row">
+                <Image
+                  alt="Orb logo"
+                  className="h-15 w-15 aspect-[60/60] rounded-md object-cover"
+                  height="60"
+                  width="60"
+                  src={app.icon || "/images/default-profile.png"}
+                />
+                <div className="ml-4 mr-8 flex flex-grow flex-col sm:gap-0">
+                  <span className="text-lg font-bold">{app.name}</span>
+                  <span
+                    className="text-sm"
+                    style={{
+                      whiteSpace: "pre-line",
+                    }}
+                  >
+                    {app.description}
+                  </span>
+                </div>
+                <Link
+                  href={app.url || "#"}
+                  passHref
+                  className="flex flex-grow justify-end"
+                  target="_blank"
+                >
+                  <Button className="hidden md:inline-block">VISIT</Button>
+                </Link>
+              </CardContent>
+            </Card>
+          ))}
+        </CardContent>
+      </div>
+    </Card>
+  )
+}

dashboard/components/footer.tsx

@@ -1,21 +1,20 @@
+import Image from "next/image"
 import Link from "next/link"
 import { FaTelegram } from "react-icons/fa"
 import { FaXTwitter } from "react-icons/fa6"
 
 import { siteConfig } from "@/config/site"
 
-import { Icons } from "./icons"
-
 const navigation = [
   {
     name: "Twitter",
     href: siteConfig.links.twitter,
     icon: <FaXTwitter className="h-4 w-4" />,
   },
   {
-    name: "Lenster",
+    name: "Hey",
     href: siteConfig.links.lenster,
-    icon: <Icons.hey className="h-4 w-4" />,
+    icon: <Image src="/apps/hey.png" width="20" height="20" alt="hey" />,
   },
   {
     name: "Telegram",

dashboard/components/icons.tsx

@@ -63,7 +63,7 @@ export const Icons = {
       <path d="M21 12a9 9 0 1 1-6.219-8.56" />
     </svg>
   ),
-  hey: (props: IconProps) => (
+  lenster: (props: IconProps) => (
     <svg
       width="350"
       height="350"

dashboard/config/apps.ts

@@ -0,0 +1,48 @@
+export const recommendApps = [
+  {
+    name: "Orb",
+    description: "Mobile experience with a focus on creators and communities ",
+    icon: "/apps/orb.png",
+    url: "https://orb.ac",
+  },
+  {
+    name: "Buttrfly",
+    description: "Web3 Social Explorer",
+    icon: "/apps/buttrfly.png",
+    url: "https://buttrfly.app/",
+  },
+  {
+    name: "T2",
+    description: "Where writers find their niche",
+    icon: "/apps/t2.png",
+    url: "https://t2.world/",
+  },
+  {
+    name: "Hey",
+    description: "Open source platform for desktop",
+    icon: "/apps/hey.png",
+    url: "https://hey.xyz/",
+  },
+  {
+    name: "Tape",
+    description: "Open-source video platform for desktop",
+    icon: "/apps/tape.png",
+    url: "https://tape.xyz",
+  },
+  {
+    name: "Dumpling",
+    description: "Streaming and steaming the best content from Lens",
+    icon: "/apps/dumpling.png",
+    url: "https://www.dumpling.lol/",
+  },
+]
+
+export const apps = [
+  ...recommendApps,
+  {
+    name: "Phaver",
+    description: "Social Without Silos",
+    icon: "/apps/phaver.svg",
+    url: "https://phaver.com/",
+  },
+]