feat: add react email

luannguyenQV · luannguyenQV · commit e674441e531f · 2024-10-12T22:12:30.000+07:00
diff --git a/apps/admin/@/molecules/nav/search-bar.tsx b/apps/admin/@/molecules/nav/search-bar.tsx
@@ -3,6 +3,7 @@
 import { useEffect, useRef, useState } from "react"
 import { useRouter, useSearchParams } from "next/navigation"
 
+import { X } from "lucide-react"
 import { useTranslations } from "next-intl"
 
 import { Input } from "@/components/ui/input"
@@ -80,7 +81,7 @@ export default function SearchBar() {
                 variant="outline"
                 onClick={onClear}
               >
-                <i className="ri-close-line text-[20px]" />
+                <X />
               </Button>
               <Button
                 variant="default"
diff --git a/apps/admin/@/molecules/user/posts/post-meta.tsx b/apps/admin/@/molecules/user/posts/post-meta.tsx
@@ -2,8 +2,8 @@
 import Link from "next/link"
 
 import dayjs from "dayjs"
+import { Avatar, AvatarFallback, AvatarImage } from "ui"
 
-import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
 import { TPostItem } from "@/types/posts"
 
 export type PostMetaProps = {
diff --git a/apps/web/@/molecules/footer/theme-toggle.tsx b/apps/web/@/molecules/footer/theme-toggle.tsx
@@ -2,6 +2,7 @@
 
 import React from "react"
 
+import { MonitorDot, Moon, Sun } from "lucide-react"
 import { useTheme } from "next-themes"
 import { Button } from "ui"
 
@@ -19,21 +20,21 @@ const ThemeToggle: React.FC = () => {
         variant="link"
         className="hover:no-underline"
       >
-        <i className="ri-mac-line" />
+        <MonitorDot />
       </Button>
       <Button
         onClick={toggleTheme}
         variant="link"
         className="hover:no-underline"
       >
-        <i className="ri-sun-line" />
+        <Sun />
       </Button>
       <Button
         onClick={toggleTheme}
         variant="link"
         className="hover:no-underline"
       >
-        <i className="ri-moon-line" />
+        <Moon />
       </Button>
     </div>
   )
diff --git a/apps/web/@/molecules/nav/search-bar.tsx b/apps/web/@/molecules/nav/search-bar.tsx
@@ -3,8 +3,9 @@
 import { useEffect, useRef, useState } from "react"
 import { useRouter, useSearchParams } from "next/navigation"
 
+import { SquareX, X } from "lucide-react"
 import { useTranslations } from "next-intl"
-import { Button, cn, Input } from "ui"
+import { Button, Input } from "ui"
 
 export default function SearchBar() {
   const t = useTranslations()
@@ -71,13 +72,16 @@ export default function SearchBar() {
         <div className="absolute right-1 top-1 flex h-8 items-center">
           {searchTerm && (
             <>
-              <Button
-                className="h-8 w-8 border-none hover:bg-transparent"
-                variant="outline"
+              <button
+                className="h-8 w-8 border-none"
                 onClick={onClear}
               >
-                <i className="ri-close-line text-[20px]" />
-              </Button>
+                <X
+                  size={20}
+                  strokeWidth={2}
+                  color="black"
+                />
+              </button>
               <Button
                 variant="default"
                 onClick={onSearch}
diff --git a/apps/web/@/molecules/posts/post-detail/like-button/LikeButton.tsx b/apps/web/@/molecules/posts/post-detail/like-button/LikeButton.tsx
@@ -1,6 +1,7 @@
 "use client"
 
 import { PostOnUserType, TPostItem } from "database"
+import { Heart } from "lucide-react"
 import { useTranslations } from "next-intl"
 import { Button, cn, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "ui"
 
@@ -35,11 +36,9 @@ const LikeButton: React.FC<LikeButtonProps> = ({ children, post, isLiked }: Like
                 "hover:border-stale-300 border-stale-800 flex h-12 w-12 items-center justify-center rounded-full border bg-white p-0 text-2xl hover:bg-slate-200"
               )}
             >
-              <i
-                className={cn("ri-heart-3-fill", {
-                  "text-red-500": isLiked,
-                  "text-gray-500 ": !isLiked,
-                })}
+              <Heart
+                fill={isLiked ? "tomato" : "gray"}
+                color={isLiked ? "tomato" : "gray"}
               />
             </Button>
           </TooltipTrigger>
diff --git a/apps/web/@/molecules/posts/post-item/comment-button/index.tsx b/apps/web/@/molecules/posts/post-item/comment-button/index.tsx
@@ -2,6 +2,7 @@ import React from "react"
 import Link from "next/link"
 
 import { TPostItem } from "database"
+import { MessageSquareCode } from "lucide-react"
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "ui"
 
 import APP_ROUTES from "@/constants/routes"
@@ -22,7 +23,7 @@ const CommentButton: React.FC<CommentButtonProps> = ({ post }) => {
             })}#comments`}
             className="flex h-8 items-center justify-center rounded-md px-2 hover:bg-slate-300"
           >
-            <i className="ri-message-2-line" />
+            <MessageSquareCode size={16} />
             <div className="ml-1 flex items-center text-sm text-gray-600">
               {post?._count?.comments || 0}
             </div>
diff --git a/apps/web/@/molecules/posts/post-item/like-button/index.tsx b/apps/web/@/molecules/posts/post-item/like-button/index.tsx
@@ -1,4 +1,5 @@
 import { TPostItem } from "database"
+import { Heart } from "lucide-react"
 import { useTranslations } from "next-intl"
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, Typography } from "ui"
 
@@ -15,7 +16,12 @@ const LikeButton: React.FC<LikeButtonProps> = ({ post }: LikeButtonProps) => {
         <Tooltip>
           <TooltipTrigger asChild>
             <div className="flex items-center gap-1">
-              <i className="ri-heart-3-fill text-red-500" />
+              <Heart
+                size={16}
+                strokeWidth={2}
+                fill="tomato"
+                color="tomato"
+              />
               <Typography
                 variant="span"
                 className="text-sm text-gray-600"
diff --git a/apps/web/@/molecules/user/posts/post-item.tsx b/apps/web/@/molecules/user/posts/post-item.tsx
@@ -4,6 +4,7 @@ import Link from "next/link"
 
 import { deletePost, PostStatus, TPostItem } from "database"
 import dayjs from "dayjs"
+import { Bookmark, Heart } from "lucide-react"
 import { useSession } from "next-auth/react"
 import { useTranslations } from "next-intl"
 import {
@@ -17,8 +18,6 @@ import {
   Typography,
 } from "ui"
 
-import { togglePostStatus } from "@/actions/manage-post"
-
 export default function PostItem(post: TPostItem) {
   const t = useTranslations()
   const { data: session } = useSession()
@@ -28,7 +27,7 @@ export default function PostItem(post: TPostItem) {
   }
 
   const onTogglePostStatus = async () => {
-    await togglePostStatus(post.id, post.postStatus)
+    // TODO:
   }
 
   return (
@@ -53,7 +52,10 @@ export default function PostItem(post: TPostItem) {
 
         <div className="mt-2 flex gap-8">
           <div className="flex items-center gap-2">
-            <i className="ri-heart-fill text-[tomato]" />
+            <Heart
+              size="20"
+              color="text-[tomato]"
+            />
             <Typography
               variant="span"
               className="text-sm"
@@ -63,6 +65,10 @@ export default function PostItem(post: TPostItem) {
           </div>
           <div className="flex items-center gap-2">
             <i className="ri-bookmark-3-line text-blue-900" />
+            <Bookmark
+              size={20}
+              strokeWidth={3}
+            />
             <Typography
               variant="span"
               className="text-sm"
diff --git a/apps/web/app/[lang]/layout.tsx b/apps/web/app/[lang]/layout.tsx
@@ -1,7 +1,6 @@
 import "./globals.css"
 import "ui/dist/index.css"
 import "react-toastify/dist/ReactToastify.css"
-import "remixicon/fonts/remixicon.css"
 
 import { NextIntlClientProvider, useMessages } from "next-intl"
 import AuthProvider from "providers/authProvider"
diff --git a/apps/web/emails/index.ts b/apps/web/emails/index.ts
diff --git a/apps/web/emails/verify-email.tsx b/apps/web/emails/verify-email.tsx
@@ -0,0 +1,47 @@
+import {
+  Body,
+  Container,
+  Head,
+  Heading,
+  Html,
+  Img,
+  Preview,
+  Section,
+  Tailwind,
+  Text,
+} from "@react-email/components"
+
+export default function VerifyEmail({}) {
+  return (
+    <Html>
+      <Head />
+      <Preview>Your Next-Forum Verification Code</Preview>
+      <Tailwind>
+        <Body className="mx-auto my-auto bg-white font-sans">
+          <Container className="mx-auto my-10 max-w-[500px] rounded border border-solid border-gray-200 px-10 py-5">
+            <Section className="mt-8">
+              {/* <Img
+                src={DUB_WORDMARK}
+                height="40"
+                alt="Dub"
+                className="mx-auto my-0"
+              /> */}
+            </Section>
+            <Heading className="mx-0 my-7 p-0 text-center text-xl font-semibold text-black">
+              Please confirm your email address
+            </Heading>
+            <Text className="mx-auto text-sm leading-6">
+              Click link below to verify your email:
+            </Text>
+            <Section className="my-8">
+              <div className="mx-auto w-fit rounded-xl px-6 py-3 text-center font-mono text-2xl font-semibold tracking-[0.25em]">
+                123456
+              </div>
+            </Section>
+            <Text className="text-sm leading-6 text-black">This code expires in 10 minutes.</Text>
+          </Container>
+        </Body>
+      </Tailwind>
+    </Html>
+  )
+}
diff --git a/apps/web/package.json b/apps/web/package.json
@@ -7,7 +7,10 @@
     "build": "next build",
     "start": "next start",
     "lint": "next lint",
-    "format": "prettier --write \"**/*.{ts,tsx,md}\""
+    "format": "prettier --write \"**/*.{ts,tsx,md}\"",
+    "email-build": "email build",
+    "email-dev": "email dev",
+    "email-export": "email export"
   },
   "dependencies": {
     "@auth/prisma-adapter": "^1.0.3",
@@ -65,7 +68,7 @@
     "react-textarea-autosize": "^8.5.3",
     "react-toastify": "^9.1.3",
     "react-tweet": "^3.2.1",
-    "remixicon": "^3.5.0",
+    "resend": "^4.0.0",
     "sharp": "^0.33.4",
     "slate": "^0.103.0",
     "slate-history": "^0.100.0",
diff --git a/packages/database/src/prisma.ts b/packages/database/src/prisma.ts
@@ -1,8 +1,15 @@
+// https://github.com/prisma/prisma/issues/1983#issuecomment-620621213
+
 import { PrismaClient } from "@prisma/client"
 
-// declare global {
-//   const prisma: PrismaClient | undefined
-// }
+declare global {
+  const prisma: PrismaClient | undefined
+  namespace NodeJS {
+    interface Global {
+      prisma: PrismaClient | undefined
+    }
+  }
+}
 
 // const prisma =
 //   global.prisma ||
@@ -12,8 +19,22 @@ import { PrismaClient } from "@prisma/client"
 
 // if (process.env.NODE_ENV === "development") global.prisma = prisma
 
-const prisma = new PrismaClient({
-  log: ["info", "warn", "error", "query"],
-})
+// const prisma = new PrismaClient({
+//   log: ["info", "warn", "error", "query"],
+// })
+
+// export default prisma
+
+let prisma
+
+if (process.env.NODE_ENV === "production") {
+  prisma = new PrismaClient()
+} else {
+  if (!global.prisma) {
+    global.prisma = new PrismaClient()
+  }
+
+  prisma = global.prisma
+}
 
 export default prisma
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
