Merge pull request #49 from dotslashf/development

Minor Adjustments

src/app/_components/UserCopyPastaPage.tsx

@@ -54,7 +54,7 @@ export default function UserCopyPastaPage({ id }: UserCopyPastaProps) {
 
   return (
     <div className="flex w-full flex-col items-start gap-4 lg:flex-row">
-      <div className="sticky top-[4.5rem] flex w-full items-center justify-center self-start lg:max-w-md">
+      <div className="flex w-full items-center justify-center self-start md:sticky md:top-[4.5rem] lg:max-w-md">
         <UserProfileCard session={session} isPreviewMode={true} />
       </div>
       <div className="grid gap-4">

src/components/CopyPasta/CardById.tsx

@@ -275,7 +275,7 @@ export default function CardById({ copyPasta }: CardProps) {
                 </DropdownMenuItem>
                 <DropdownMenuItem asChild>
                   <Link
-                    href={`https://twitter.com/intent/post?text=${trimContent(copyPasta.content, 150)}&url=arsiptemplate.app/copy-pasta/${copyPasta.id}?utm_source=twitter&utm_content=tweet`}
+                    href={`https://twitter.com/intent/post?text=${trimContent(encodeURIComponent(copyPasta.content), 280)}&url=arsiptemplate.app/copy-pasta/${copyPasta.id}?utm_source=twitter&utm_content=tweet`}
                     target="_blank"
                     className="flex w-full items-center justify-between"
                   >

src/components/Reaction.tsx

@@ -11,6 +11,7 @@ import { Popover, PopoverContent, PopoverTrigger } from "./ui/popover";
 import Link from "next/link";
 import { session } from "./HOCSession";
 import { sendGAEvent } from "@next/third-parties/google";
+import { ReactionChildWrapper } from "./ReactionSummaryChild";
 
 interface ReactionProps {
   copyPastaId: string;
@@ -107,12 +108,14 @@ export default function Reaction({ copyPastaId }: ReactionProps) {
   function getReactionChild() {
     if (reactionsByCopyPastaId) {
       if (isUserReacted && reactionsByCopyPastaId.currentUserReaction) {
-        return reactionsMap(
-          reactionsByCopyPastaId.currentUserReaction.emotion,
-          "w-5",
-        )?.child;
+        return (
+          <ReactionChildWrapper
+            className="text-lg"
+            type={reactionsByCopyPastaId.currentUserReaction.emotion}
+          />
+        );
       }
-      return reactionsMap("Kocak", "w-5")?.child;
+      return <ReactionChildWrapper className="text-lg" type={"Kocak"} />;
     }
     return <Skeleton className="h-5 w-5 rounded-full" />;
   }
@@ -139,19 +142,19 @@ export default function Reaction({ copyPastaId }: ReactionProps) {
                   <Button
                     variant={
                       isUserReacted &&
-                      currentUserReaction === reactionsMap(key, "w-5")!.name
+                      currentUserReaction === reactionsMap(key)!.name
                         ? "white"
                         : "ghost"
                     }
                     size={"icon"}
                     className="rounded-full hover:bg-secondary"
                     onClick={() =>
                       isUserReacted &&
-                      currentUserReaction === reactionsMap(key, "w-5")!.name
+                      currentUserReaction === reactionsMap(key)!.name
                         ? handleUnReact(
                             reactionsByCopyPastaId.currentUserReaction?.id,
                           )
-                        : handleReaction(reactionsMap(key, "w-5")!.name)
+                        : handleReaction(reactionsMap(key)!.name)
                     }
                   >
                     <motion.span
@@ -163,7 +166,7 @@ export default function Reaction({ copyPastaId }: ReactionProps) {
                         },
                       }}
                     >
-                      {reactionsMap(key, "w-5")!.child}
+                      <ReactionChildWrapper className="text-lg" type={key} />
                     </motion.span>
                   </Button>
                 </motion.div>
@@ -191,8 +194,11 @@ export default function Reaction({ copyPastaId }: ReactionProps) {
                 href={`/user/${react.user.id}?utm_source=reaction_summary`}
                 prefetch={false}
               >
+                <ReactionChildWrapper
+                  className="mr-2 text-sm"
+                  type={react.emotion}
+                />
                 {react.user.name}{" "}
-                {reactionsMap(react.emotion, "w-4 ml-2")?.child}
               </Link>
             ))}
             {reactionsByCopyPastaId &&

src/components/ReactionSummaryChild.tsx

@@ -1,13 +1,16 @@
+"use client";
+
 import { motion } from "framer-motion";
 import { Badge } from "./ui/badge";
-import { ANALYTICS_EVENT, reactionsMap } from "~/lib/constant";
+import { ANALYTICS_EVENT } from "~/lib/constant";
 import useToast from "./ui/use-react-hot-toast";
 import { useRouter } from "next/navigation";
 import { api } from "~/trpc/react";
 import { type EmotionType } from "@prisma/client";
 import { session } from "./HOCSession";
 import { useEffect, useState } from "react";
 import { sendGAEvent } from "@next/third-parties/google";
+import { cn } from "~/lib/utils";
 
 interface ReactionSummaryChildProps {
   copyPastaId: string;
@@ -139,10 +142,42 @@ export default function ReactionSummaryChild({
             },
           }}
         >
-          {reactionsMap(emotion, "w-4 mr-2")?.child}
+          <ReactionChildWrapper className="mr-2 text-sm" type={emotion} />
         </motion.span>
         {count}
       </Badge>
     </motion.div>
   );
 }
+
+interface ReactionChildWrapperProp {
+  className?: string;
+  type: string;
+}
+export function ReactionChildWrapper({
+  className,
+  type,
+}: ReactionChildWrapperProp) {
+  let emotion = "";
+  switch (type) {
+    case "Kocak":
+      emotion = "🤣";
+      break;
+    case "Marah":
+      emotion = "🤬";
+      break;
+    case "Setuju":
+      emotion = "💯";
+      break;
+    case "Hah":
+      emotion = "🤯";
+      break;
+    default:
+      break;
+  }
+  return (
+    <span className={cn("flex items-center justify-center", className)}>
+      {emotion}
+    </span>
+  );
+}

src/components/ReactionSummaryProfile.tsx

@@ -1,7 +1,7 @@
 import { EmotionType, type Prisma } from "@prisma/client";
 import { Badge } from "./ui/badge";
 import { motion } from "framer-motion";
-import { reactionsMap } from "~/lib/constant";
+import { ReactionChildWrapper } from "./ReactionSummaryChild";
 
 interface ReactionSummaryProfileProps {
   reactions?: (Prisma.PickEnumerable<
@@ -34,7 +34,10 @@ export default function ReactionSummaryProfile({
                   },
                 }}
               >
-                {reactionsMap(reaction, "w-4 mr-2")?.child}
+                <ReactionChildWrapper
+                  className="mr-2 text-sm"
+                  type={reaction}
+                />
               </motion.span>
               {reactions?.find((react) => react.emotion === reaction)?._count
                 .emotion ?? 0}

src/components/UserProfileCard.tsx

@@ -309,7 +309,7 @@ export default function UserProfileCard({
         </div>
         <div className="flex flex-col items-center justify-center space-y-2">
           <span>Tags:</span>
-          <div className="grid grid-cols-2 gap-2">
+          <div className="flex flex-wrap items-center justify-center gap-2">
             {topTags?.map((tag) => {
               const now = new Date();
               const formattedTag = {

src/hooks/useAvatar.ts

@@ -2,7 +2,7 @@ import { useMemo } from "react";
 
 import { createAvatar } from "@dicebear/core";
 import { notionists } from "@dicebear/collection";
-import { avatarColorsThemeWithoutHash } from "~/lib/constant";
+import { avatarColorsTheme } from "~/lib/constant";
 
 export default function useAvatar(seed: string, scale = 100) {
   const avatar = useMemo(() => {
@@ -11,7 +11,7 @@ export default function useAvatar(seed: string, scale = 100) {
       size: 256,
       radius: 50,
       scale,
-      backgroundColor: avatarColorsThemeWithoutHash,
+      backgroundColor: avatarColorsTheme,
     }).toDataUri();
   }, [scale, seed]);
 

src/lib/constant.tsx

@@ -5,26 +5,16 @@ import {
   faDiaspora,
 } from "@fortawesome/free-brands-svg-icons";
 import { EmotionType } from "@prisma/client";
-import {
-  FluentEmojiFlatFaceWithSymbolsOnMouth,
-  FluentEmojiFlatHundredPoints,
-  FluentEmojiFlatRollingOnTheFloorLaughing,
-  FluentEmojiFlatThinkingFace,
-} from "~/components/Icons";
 import { Roboto_Slab } from "next/font/google";
 
 export const avatarColorsTheme = [
-  "#4D7CDB",
-  "#D51010",
-  "#FFFFFF",
-  "#E6E8EA",
-  "#A5C8E2",
+  "4D7CDB",
+  "D51010",
+  "FFFFFF",
+  "E6E8EA",
+  "A5C8E2",
 ];
 
-export const avatarColorsThemeWithoutHash = avatarColorsTheme.map((color) =>
-  color.slice(1, color.length),
-);
-
 export const sourceEnumHash = new Map([
   [
     "Twitter",
@@ -52,29 +42,24 @@ export const sourceEnumHash = new Map([
   ],
 ]);
 
-export const reactionsMap = (emotion: string, className: string) => {
+export const reactionsMap = (emotion: string) => {
   const map: Record<
     string,
     {
       name: EmotionType;
-      child: JSX.Element;
     }
   > = {
     Kocak: {
       name: EmotionType.Kocak,
-      child: <FluentEmojiFlatRollingOnTheFloorLaughing className={className} />,
     },
     Hah: {
       name: EmotionType.Hah,
-      child: <FluentEmojiFlatThinkingFace className={className} />,
     },
     Marah: {
       name: EmotionType.Marah,
-      child: <FluentEmojiFlatFaceWithSymbolsOnMouth className={className} />,
     },
     Setuju: {
       name: EmotionType.Setuju,
-      child: <FluentEmojiFlatHundredPoints className={className} />,
     },
   };