Merge pull request #60 from dotslashf/development

Development
dotslashf · Sep 8, 2024 · c2dde5a · c2dde5a
2 parents b6e055b + 65f1cb5
commit c2dde5a
Show file tree

Hide file tree

Showing 11 changed files with 156 additions and 92 deletions.
diff --git a/src/app/_components/SignInPage.tsx b/src/app/_components/SignInPage.tsx
@@ -21,7 +21,7 @@ import { trackEvent } from "~/lib/track";
 export default function SignInSocialProviders() {
   function handleSignIn(platform: string) {
     void trackEvent(ANALYTICS_EVENT.BUTTON_CLICKED, {
-      button: `signIn.${platform}`,
+      button: `sign_in.${platform}`,
       path: "/auth/sign-in",
     });
     void signIn(platform, {

diff --git a/src/app/_components/SupportPage.tsx b/src/app/_components/SupportPage.tsx
@@ -1,5 +1,9 @@
+import { ArrowRight } from "lucide-react";
 import Image from "next/image";
+import Link from "next/link";
+import { buttonVariants } from "~/components/ui/button";
 import { Card, CardContent, CardHeader, CardTitle } from "~/components/ui/card";
+import { cn } from "~/lib/utils";
 
 export default function SupportPage() {
   return (
@@ -9,7 +13,7 @@ export default function SupportPage() {
           Support Me
         </CardTitle>
       </CardHeader>
-      <CardContent className="flex flex-col items-center space-y-6">
+      <CardContent className="flex flex-col items-center space-y-4">
         <div className="max-w-md space-y-4 text-center">
           <p>Halo 👋</p>
           <p>Terima kasih sudah menjadi bagian dari platform ini!</p>
@@ -23,8 +27,16 @@ export default function SupportPage() {
             Kalau kalian merasa terbantu atau senang dengan platform ini, ada
             cara simpel buat nunjukin dukungan kalian. Kalian bisa bantu gue
             buat bayar biaya server dan maintenance dengan memindai QR code di
-            bawah. Setiap kontribusi, sekecil apapun, sangat berarti dan
-            membantu gue untuk terus menjalankan platform ini.
+            bawah atau klik{" "}
+            <Link
+              href="https://saweria.co/dotslashf"
+              className="text-primary underline"
+              target="__blank"
+            >
+              disini
+            </Link>
+            . Setiap kontribusi, sekecil apapun, sangat berarti dan membantu gue
+            untuk terus menjalankan platform ini.
           </p>
           <p>
             Dukungan kalian nggak cuma bantu platform ini tetap jalan, tapi juga
@@ -36,6 +48,15 @@ export default function SupportPage() {
         <div className="relative h-64 w-64 rounded-md bg-white p-4">
           <Image src={"/qr.png"} alt="qr code" width={250} height={250} />
         </div>
+        <div>
+          <Link
+            href={"https://saweria.co/dotslashf"}
+            className={cn(buttonVariants({}))}
+            target="__blank"
+          >
+            Saweria <ArrowRight className="ml-2 w-4" />
+          </Link>
+        </div>
       </CardContent>
     </Card>
   );

diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -44,14 +44,20 @@ export async function generateMetadata({
 
 export default async function Home() {
   const copyPastas = await api.copyPasta.list({
-    limit: 10,
-  });
-  const copyPastasFormatted = copyPastas.copyPastas.map((copy) => {
-    return {
-      content: copy.content,
-      tags: copy.CopyPastasOnTags.map((tag) => tag.tags),
-    };
+    limit: 12,
   });
+  const copyPastasFormatted = copyPastas.copyPastas
+    .filter(
+      (copy) =>
+        !copy.CopyPastasOnTags.some((tag) => tag.tags.name === "ASCII Art"),
+    )
+    .map((copy) => {
+      return {
+        id: copy.id,
+        content: copy.content,
+        tags: copy.CopyPastasOnTags.map((tag) => tag.tags),
+      };
+    });
 
   return (
     <HydrateClient>

diff --git a/src/components/CopyPasta/CardDisplay.tsx b/src/components/CopyPasta/CardDisplay.tsx
@@ -0,0 +1,61 @@
+import { cn, trimContent } from "~/lib/utils";
+import { Card, CardContent, CardFooter } from "../ui/card";
+import Tag from "../ui/tags";
+import Link from "next/link";
+import { buttonVariants } from "../ui/button";
+import { ArrowRight } from "lucide-react";
+import { trackEvent } from "~/lib/track";
+import { ANALYTICS_EVENT } from "~/lib/constant";
+
+interface CardDisplayProps {
+  id: string;
+  content: string;
+  tags: {
+    id: string;
+    name: string;
+    createdAt: Date;
+    updatedAt: Date;
+  }[];
+}
+export default function CardDisplay({ id, content, tags }: CardDisplayProps) {
+  function handleMoreInfo() {
+    void trackEvent(ANALYTICS_EVENT.VIEW_FULL_COPY_PASTA, {
+      button: "more_info",
+      value: `hero`,
+      path: "/",
+    });
+  }
+  return (
+    <Card className="flex w-fit flex-col justify-between">
+      <CardContent className="flex flex-col justify-between gap-2 overflow-x-hidden pb-2 pt-4 text-sm hover:cursor-auto">
+        <blockquote className="w-full">{trimContent(content, 45)}</blockquote>
+      </CardContent>
+      <CardFooter>
+        <div className="flex w-full justify-between">
+          <div className="flex space-x-2">
+            {tags.map((tag) => {
+              return (
+                <Tag
+                  key={tag.id}
+                  tagContent={tag}
+                  className="rounded-sm shadow-sm hover:bg-primary hover:text-primary-foreground"
+                  onClick={() => null}
+                />
+              );
+            })}
+          </div>
+          <Link
+            href={`/copy-pasta/${id}?utm_content="hero"`}
+            className={cn(
+              buttonVariants({ variant: "link", size: "url" }),
+              "ml-2",
+            )}
+            onClick={handleMoreInfo}
+          >
+            Lebih Lanjut <ArrowRight className="ml-2 h-3 w-3" />
+          </Link>
+        </div>
+      </CardFooter>
+    </Card>
+  );
+}
diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { ChartColumn, Dot } from "lucide-react";
+import { Dot } from "lucide-react";
 import Link from "next/link";
 import { Button, buttonVariants } from "./ui/button";
 import { api } from "~/trpc/react";
@@ -62,7 +62,7 @@ export default function Footer() {
                 });
               }}
             >
-              Analytics <ChartColumn className="ml-2 w-4" />
+              Analytics
             </Link>
             <Link
               href={"https://github.com/dotslashf/arsip-template"}

diff --git a/src/components/Hero.tsx b/src/components/Hero.tsx
@@ -4,49 +4,14 @@ import { Package, PenBoxIcon, Search } from "lucide-react";
 import React from "react";
 import { buttonVariants } from "./ui/button";
 import Link from "next/link";
-import { cn, trimContent } from "~/lib/utils";
+import { cn } from "~/lib/utils";
 import Marquee from "./magicui/marquee";
-import { Card, CardContent, CardFooter } from "./ui/card";
-import Tag from "./ui/tags";
 import DotPattern from "./magicui/dot-pattern";
-
-const CardDisplay = ({
-  content,
-  tags,
-}: {
-  content: string;
-  tags: {
-    id: string;
-    name: string;
-    createdAt: Date;
-    updatedAt: Date;
-  }[];
-}) => {
-  return (
-    <Card className="flex w-fit flex-col justify-between">
-      <CardContent className="flex flex-col justify-between gap-2 overflow-x-hidden pb-2 pt-4 text-sm hover:cursor-auto">
-        <blockquote className="w-full">{trimContent(content, 35)}</blockquote>
-      </CardContent>
-      <CardFooter>
-        <div className="flex w-full space-x-2">
-          {tags.map((tag) => {
-            return (
-              <Tag
-                key={tag.id}
-                tagContent={tag}
-                className="rounded-sm shadow-sm hover:bg-primary hover:text-primary-foreground"
-                onClick={() => null}
-              />
-            );
-          })}
-        </div>
-      </CardFooter>
-    </Card>
-  );
-};
+import CardDisplay from "./CopyPasta/CardDisplay";
 
 interface HeroProps {
   copyPastas: {
+    id: string;
     content: string;
     tags: {
       id: string;
@@ -67,7 +32,7 @@ export default function Hero({ copyPastas, isShowButton }: HeroProps) {
         isShowButton ? "h-[500px]" : "h-screen py-16",
       )}
     >
-      <div className="z-10 flex w-full flex-grow flex-col items-center justify-center px-4 text-center">
+      <div className="z-30 flex w-full flex-grow flex-col items-center justify-center px-4 text-center">
         <Link
           href={"/"}
           className="mb-4 flex items-center justify-center bg-white bg-gradient-to-br from-primary via-primary/90 to-primary/80 bg-clip-text text-left text-4xl font-bold text-transparent lg:text-5xl"
@@ -106,12 +71,12 @@ export default function Hero({ copyPastas, isShowButton }: HeroProps) {
         )}
       </div>
       <div className="z-10 mt-auto">
-        <Marquee pauseOnHover className="[--duration:40s]">
+        <Marquee pauseOnHover className="[--duration:60s]">
           {firstRow.map((copy) => (
             <CardDisplay key={copy.content} {...copy} />
           ))}
         </Marquee>
-        <Marquee reverse pauseOnHover className="[--duration:40s]">
+        <Marquee reverse pauseOnHover className="[--duration:60s]">
           {secondRow.map((copy) => (
             <CardDisplay key={copy.content} {...copy} />
           ))}
@@ -127,8 +92,8 @@ export default function Hero({ copyPastas, isShowButton }: HeroProps) {
           "[mask-image:radial-gradient(550px_circle_at_top,white,transparent)]",
         )}
       />
-      <div className="pointer-events-none absolute inset-y-0 left-0 w-1/3 bg-gradient-to-r from-white dark:from-background"></div>
-      <div className="pointer-events-none absolute inset-y-0 right-0 w-1/3 bg-gradient-to-l from-white dark:from-background"></div>
+      <div className="pointer-events-none absolute inset-y-0 left-0 z-20 w-1/4 bg-gradient-to-r from-white dark:from-background"></div>
+      <div className="pointer-events-none absolute inset-y-0 right-0 z-20 w-1/4 bg-gradient-to-l from-white dark:from-background"></div>
     </div>
   );
 }
diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
@@ -37,15 +37,15 @@ export default function Navbar({ session }: NavbarProps) {
   function handleSignOut() {
     void trackEvent(ANALYTICS_EVENT.BUTTON_CLICKED, {
       button: "navbar",
-      value: "signOut",
+      value: "sign_out",
     });
     void signOut();
   }
 
   function handleSignIn() {
     void trackEvent(ANALYTICS_EVENT.BUTTON_CLICKED, {
       button: "navbar",
-      value: "signIn",
+      value: "sign_in",
     });
   }
 
@@ -105,7 +105,7 @@ export default function Navbar({ session }: NavbarProps) {
             ) : (
               <DropdownMenu>
                 <DropdownMenuTrigger asChild>
-                  <span className="rounded-full border border-secondary-foreground">
+                  <span className="rounded-full">
                     <Avatar
                       seed={
                         session?.user.avatarSeed ?? session?.user.id ?? "Anon"

diff --git a/src/components/Reaction.tsx b/src/components/Reaction.tsx
@@ -190,7 +190,7 @@ export default function Reaction({ copyPastaId }: ReactionProps) {
             {reactionsByCopyPastaId?.reactions.map((react) => (
               <Link
                 key={react.id}
-                className="flex text-primary underline hover:cursor-pointer"
+                className="flex text-primary hover:cursor-pointer"
                 href={`/user/${react.user.id}?utm_source=reaction_summary`}
                 prefetch={false}
               >

diff --git a/src/components/ToggleTheme.tsx b/src/components/ToggleTheme.tsx
@@ -21,7 +21,10 @@ export function ToggleTheme() {
 
   function handleSetTheme(theme: "light" | "dark" | "system") {
     setTheme(theme);
-    void trackEvent(ANALYTICS_EVENT.SET_THEME, { value: theme, isSmallDevice });
+    void trackEvent(ANALYTICS_EVENT.SET_THEME, {
+      value: theme,
+      is_small_device: isSmallDevice,
+    });
   }
 
   return (