Merge pull request #7 from nguyentrongbut/task/reviews-tab

fix: fix toast done ☑
nguyentrongbut · Aug 8, 2024 · 38bad30 · 38bad30
2 parents 6ba8444 + 09a8392
commit 38bad30
Show file tree

Hide file tree

Showing 5 changed files with 39 additions and 11 deletions.
diff --git a/src/app/title/[slug]/reviews/@component/crud/c.review.comments.tsx b/src/app/title/[slug]/reviews/@component/crud/c.review.comments.tsx
@@ -1,5 +1,6 @@
 "use client";
 import Rating from "@/app/title/[slug]/reviews/@component/rating";
+import IconError from "@/components/icon/icon.error";
 import IconLoading from "@/components/icon/icon.loading";
 import IconSend from "@/components/icon/icon.send";
 import IconSuccess from "@/components/icon/icon.success";
@@ -16,10 +17,17 @@ const CReviewComments = (props: any) => {
 
     const handleSubmit = async () => {
         toast({
-            title: "Please wait...",
-            description: "Posting review",
-            icon: <IconLoading />,
+            title: "Error!",
+            description: "Please rating",
+            icon: <IconError className="text-red-600"/>,
         });
+        if(rating != null) {
+            toast({
+                title: "Please wait...",
+                description: "Posting review",
+                icon: <IconLoading />,
+            });
+        }
         if (rating != null && !hasReviewId) {
             const data = await sendRequest<IReviews>({
                 url: `${process.env.NEXT_PUBLIC_WEB_COMIC_API}/api/reviews`,

diff --git a/src/components/icon/icon.error.tsx b/src/components/icon/icon.error.tsx
@@ -0,0 +1,20 @@
+import { ComponentProps } from "react";
+
+const IconError = (props: ComponentProps<"svg">) => {
+    return (
+        <svg
+            stroke="currentColor"
+            fill="currentColor"
+            strokeWidth={0}
+            viewBox="0 0 24 24"
+            height="20"
+            width="20"
+            xmlns="http://www.w3.org/2000/svg"
+            {...props}
+        >
+            <path d="M11 15h2v2h-2v-2zm0-8h2v6h-2V7zm.99-5C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"></path>
+        </svg>
+    );
+};
+
+export default IconError;
diff --git a/src/components/icon/icon.loading.tsx b/src/components/icon/icon.loading.tsx
@@ -4,15 +4,15 @@ const IconLoading = (props: ComponentProps<"svg">) => {
     return (
         <svg
             xmlns="http://www.w3.org/2000/svg"
-            width="24"
-            height="24"
+            width="20"
+            height="20"
             viewBox="0 0 24 24"
             fill="none"
             stroke="currentColor"
             strokeWidth={4}
             strokeLinecap="round"
             strokeLinejoin="round"
-            className="w-4 primary-color animate-spin"
+            className="primary-color animate-spin"
             {...props}
         >
             <path d="M7.5 4.21l0 .01"></path>

diff --git a/src/components/icon/icon.success.tsx b/src/components/icon/icon.success.tsx
@@ -4,15 +4,15 @@ const IconSuccess = (props: ComponentProps<"svg">) => {
     return (
         <svg
             xmlns="http://www.w3.org/2000/svg"
-            width="24"
-            height="24"
+            width="20"
+            height="20"
             viewBox="0 0 24 24"
             fill="none"
             stroke="currentColor"
             strokeWidth={4}
             strokeLinecap="round"
             strokeLinejoin="round"
-            className="w-4 text-green-500 my-auto"
+            className="text-green-500 my-auto"
             {...props}
         >
             <path d="M5 12l5 5l10 -10"></path>

diff --git a/src/components/ui/toaster.tsx b/src/components/ui/toaster.tsx
@@ -26,12 +26,12 @@ export function Toaster() {
                 return (
                     <Toast key={id} {...props}>
                         <div className="grid gap-1">
-                            <div className="flex gap-2">
+                            <div className="flex gap-2 items-center">
                                 {icon && <div>{icon}</div>}
                                 {title && <ToastTitle>{title}</ToastTitle>}
                             </div>
                             {description && (
-                                <ToastDescription className={icon && "ml-6"}>
+                                <ToastDescription className={icon ? "ml-7" : ""}>
                                     {description}
                                 </ToastDescription>
                             )}