From 4b37355cc43272bd30de3d7546bca81dd88e978b Mon Sep 17 00:00:00 2001
From: pheralb <pablohdez4340@gmail.com>
Date: Mon, 1 Apr 2024 11:30:00 +0100
Subject: [PATCH] Design improvements, fixed select tag

---
 src/components/links/create-link.tsx | 21 ++++++++++++++-------
 src/components/links/edit-link.tsx   |  5 +----
 src/components/links/links-limit.tsx |  4 ++--
 src/components/tags/search-tags.tsx  |  2 +-
 4 files changed, 18 insertions(+), 14 deletions(-)

diff --git a/src/components/links/create-link.tsx b/src/components/links/create-link.tsx
index 3e5d31b..69479c8 100644
--- a/src/components/links/create-link.tsx
+++ b/src/components/links/create-link.tsx
@@ -32,7 +32,7 @@ import {
   FormMessage,
 } from "@/ui/form";
 import { Input, Textarea } from "@/ui/input";
-import { LoaderIcon, RocketIcon, ShuffleIcon } from "lucide-react";
+import { LoaderIcon, RocketIcon, ShuffleIcon, TagsIcon } from "lucide-react";
 import { insertTagToLink } from "@/server/actions/tags";
 import SelectTagsLink from "./select-tags-link";
 
@@ -222,12 +222,19 @@ export function CreateLink(props: CreateLinkProps) {
                 )}
               />
               {isError && <Alert variant="error">{message}</Alert>}
-              <SelectTagsLink
-                selectedTags={selectedTags}
-                onSelectTag={handleAddTags}
-                onDeleteTag={handleDeleteTag}
-                tags={props.tags}
-              />
+              {props.tags.length > 0 ? (
+                <SelectTagsLink
+                  selectedTags={selectedTags}
+                  onSelectTag={handleAddTags}
+                  onDeleteTag={handleDeleteTag}
+                  tags={props.tags}
+                />
+              ) : (
+                <div className="flex items-center justify-center space-x-2 rounded-md border border-neutral-200 py-3 text-sm dark:border-neutral-800">
+                  <TagsIcon size={16} />
+                  <p className="font-medium">You don't have any tag created.</p>
+                </div>
+              )}
             </div>
             <DialogFooter>
               <DialogClose asChild>
diff --git a/src/components/links/edit-link.tsx b/src/components/links/edit-link.tsx
index 0be06a2..a59f874 100644
--- a/src/components/links/edit-link.tsx
+++ b/src/components/links/edit-link.tsx
@@ -139,10 +139,7 @@ const EditLink = (props: EditLinkProps) => {
                             <PopoverTrigger className="absolute bottom-0 right-0 top-0 flex items-center px-3">
                               <LockIcon size={16} />
                             </PopoverTrigger>
-                            <PopoverContent
-                              sideOffset={0.2}
-                              className="text-sm"
-                            >
+                            <PopoverContent className="max-w-72 text-sm">
                               <p className="mb-2">
                                 Editing the custom link will remove access from
                                 the previous link and it will be available to
diff --git a/src/components/links/links-limit.tsx b/src/components/links/links-limit.tsx
index 6309ed0..cf741b3 100644
--- a/src/components/links/links-limit.tsx
+++ b/src/components/links/links-limit.tsx
@@ -6,7 +6,7 @@ import {
   TooltipTrigger,
 } from "@/ui/tooltip";
 import { cn } from "@/utils";
-import { CircleDashedIcon, TriangleAlertIcon } from "lucide-react";
+import { PackageIcon, TriangleAlertIcon } from "lucide-react";
 
 interface LinksLimitProps {
   userLinks: number;
@@ -36,7 +36,7 @@ const LinksLimit = ({ userLinks, maxLinks }: LinksLimitProps) => {
               {max ? (
                 <TriangleAlertIcon size={14} />
               ) : (
-                <CircleDashedIcon size={14} />
+                <PackageIcon size={14} />
               )}
               <span>
                 {userLinks < 10 ? `0${userLinks}` : userLinks}
diff --git a/src/components/tags/search-tags.tsx b/src/components/tags/search-tags.tsx
index 10b00a6..88a8e71 100644
--- a/src/components/tags/search-tags.tsx
+++ b/src/components/tags/search-tags.tsx
@@ -64,7 +64,7 @@ const SearchTag = (props: SearchTagProps) => {
         </Button>
       </PopoverTrigger>
       <PopoverContent>
-        <p className="my-2 text-center font-medium">
+        <p className="my-2 text-center text-sm font-medium">
           My Tags ({props.tags.length})
         </p>
         <div className="mb-2 flex w-full flex-col space-y-1">