diff --git a/src/app/_components/UserCopyPastaPage.tsx b/src/app/_components/UserCopyPastaPage.tsx index 8ef1e9f..61e1fda 100644 --- a/src/app/_components/UserCopyPastaPage.tsx +++ b/src/app/_components/UserCopyPastaPage.tsx @@ -54,7 +54,7 @@ export default function UserCopyPastaPage({ id }: UserCopyPastaProps) { return (
-
+
diff --git a/src/components/CopyPasta/CardById.tsx b/src/components/CopyPasta/CardById.tsx index 44f14cc..fb44654 100644 --- a/src/components/CopyPasta/CardById.tsx +++ b/src/components/CopyPasta/CardById.tsx @@ -275,7 +275,7 @@ export default function CardById({ copyPasta }: CardProps) { diff --git a/src/components/Icons.tsx b/src/components/Icons.tsx deleted file mode 100644 index 3d11e21..0000000 --- a/src/components/Icons.tsx +++ /dev/null @@ -1,110 +0,0 @@ -import React from "react"; -import type { SVGProps } from "react"; - -export function FluentEmojiFlatFaceWithSymbolsOnMouth( - props: SVGProps, -) { - return ( - - - - - - - - - - ); -} - -export function FluentEmojiFlatRollingOnTheFloorLaughing( - props: SVGProps, -) { - return ( - - - - - - - - - - ); -} - -export function FluentEmojiFlatThinkingFace(props: SVGProps) { - return ( - - - - - - - - - - - ); -} - -export function FluentEmojiFlatHundredPoints(props: SVGProps) { - return ( - - - - ); -} diff --git a/src/components/Reaction.tsx b/src/components/Reaction.tsx index 762470e..267c886 100644 --- a/src/components/Reaction.tsx +++ b/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 ( + + ); } - return reactionsMap("Kocak", "w-5")?.child; + return ; } return ; } @@ -139,7 +142,7 @@ export default function Reaction({ copyPastaId }: ReactionProps) { @@ -191,8 +194,11 @@ export default function Reaction({ copyPastaId }: ReactionProps) { href={`/user/${react.user.id}?utm_source=reaction_summary`} prefetch={false} > + {react.user.name}{" "} - {reactionsMap(react.emotion, "w-4 ml-2")?.child} ))} {reactionsByCopyPastaId && diff --git a/src/components/ReactionSummaryChild.tsx b/src/components/ReactionSummaryChild.tsx index d3fa156..41a3e04 100644 --- a/src/components/ReactionSummaryChild.tsx +++ b/src/components/ReactionSummaryChild.tsx @@ -1,6 +1,8 @@ +"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"; @@ -8,6 +10,7 @@ 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} + {count} ); } + +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 ( + + {emotion} + + ); +} diff --git a/src/components/ReactionSummaryProfile.tsx b/src/components/ReactionSummaryProfile.tsx index 01e00c0..c078832 100644 --- a/src/components/ReactionSummaryProfile.tsx +++ b/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} + {reactions?.find((react) => react.emotion === reaction)?._count .emotion ?? 0} diff --git a/src/components/UserProfileCard.tsx b/src/components/UserProfileCard.tsx index 1ab0938..c7900b5 100644 --- a/src/components/UserProfileCard.tsx +++ b/src/components/UserProfileCard.tsx @@ -309,7 +309,7 @@ export default function UserProfileCard({
Tags: -
+
{topTags?.map((tag) => { const now = new Date(); const formattedTag = { diff --git a/src/hooks/useAvatar.ts b/src/hooks/useAvatar.ts index 5a5a282..596b727 100644 --- a/src/hooks/useAvatar.ts +++ b/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]); diff --git a/src/lib/constant.tsx b/src/lib/constant.tsx index 1f15946..69e4d20 100644 --- a/src/lib/constant.tsx +++ b/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: , }, Hah: { name: EmotionType.Hah, - child: , }, Marah: { name: EmotionType.Marah, - child: , }, Setuju: { name: EmotionType.Setuju, - child: , }, };