Merge pull request #22 from pheralb/next

🎨 Dashboard & Home Page improvements

Author: pheralb

src/app/page.tsx

@@ -9,7 +9,7 @@ import BetaWarning from "@/components/beta-warning";
 
 export default async function Home() {
   return (
-    <>
+    <main className="relative h-[calc(100vh-4rem)]">
       <BetaWarning />
       <div className="absolute inset-0 -z-10 h-full w-full bg-white bg-[linear-gradient(to_right,#8080800a_1px,transparent_1px),linear-gradient(to_bottom,#8080800a_1px,transparent_1px)] bg-[size:14px_24px] dark:bg-neutral-900"></div>
       <section
@@ -23,7 +23,7 @@ export default async function Home() {
           Slug is an open-source platform that allows you to create, manage, and
           share short links with ease. It's fast, secure, and easy to use.
         </TypographyP>
-        <div className="mt-8 items-center justify-center gap-x-3 space-y-3 sm:flex sm:space-y-0 animate-in fade-in-30 duration-700">
+        <div className="mt-8 items-center justify-center gap-x-3 space-y-3 duration-700 animate-in fade-in-30 sm:flex sm:space-y-0">
           <Link
             href="/dashboard"
             className={buttonVariants({
@@ -56,6 +56,6 @@ export default async function Home() {
         </div>
       </section>
       <Footer className="fixed bottom-0 mt-4 py-4" />
-    </>
+    </main>
   );
 }

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>

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

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}

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">