Error
;
}
const filteredLinks = data.links.filter((link) => {
- if (!query) return true;
- return link.slug.includes(query);
+ if (!searchLink && !searchTag) return true;
+
+ // Filter links by search slug
+ const matchSlug = !searchLink || link.slug.includes(searchLink);
+
+ // Filter links by search tag
+ const matchTag =
+ !searchTag || link.tags.some((tag) => tag.tagId === searchTag);
+
+ return matchSlug && matchTag;
});
return (
+
+
+
+
+
{filteredLinks
@@ -46,30 +70,39 @@ const DashboardPage = async ({
);
})
.map((link) => {
- return
{filteredLinks.length === 0 && (
- {query ? (
+ {searchLink ? (
+
diff --git a/src/components/dashboard-routes.tsx b/src/components/dashboard-routes.tsx
index 7792b69..22d5d29 100644
--- a/src/components/dashboard-routes.tsx
+++ b/src/components/dashboard-routes.tsx
@@ -22,13 +22,13 @@ const DashboardRoutesComponent = () => {
const pathname = usePathname();
return (
- No links found with {query}{" "} - slug + No links found with{" "} + {searchLink} slug
) : ( -Start creating your first link:
++ {searchTag ? "No links found with this tag" : "No links found"} +
)} -
-
+
{DashboardRoutes.map((route) => (
{
+const CardLink = ({ linkInfo, linkTags, tagsInfo }: CardLinkProps) => {
+ const cardTagsInfo = tagsInfo.filter((tag) =>
+ linkTags.some((linkTag) => linkTag.tagId === tag.id),
+ );
+
return (
@@ -78,6 +85,8 @@ const CardLink = ({ linkInfo }: CardLinkProps) => {
}
link={linkInfo}
+ linkTags={cardTagsInfo}
+ allTags={tagsInfo}
/>
{
{linkInfo.url}
-
diff --git a/src/components/links/delete-link.tsx b/src/components/links/delete-link.tsx
index 7fa5621..6eec57d 100644
--- a/src/components/links/delete-link.tsx
+++ b/src/components/links/delete-link.tsx
@@ -91,7 +91,7 @@ const DeleteLink = ({ link, trigger }: DeleteLinkProps) => {
confirm:
-
+
-
-
-
+
diff --git a/src/components/links/create-link.tsx b/src/components/links/create-link.tsx
index d2b3579..3e5d31b 100644
--- a/src/components/links/create-link.tsx
+++ b/src/components/links/create-link.tsx
@@ -1,6 +1,8 @@
"use client";
import type { z } from "zod";
+import type { Tags } from "@prisma/client";
+
import { CreateLinkSchema } from "@/server/schemas";
import { useState, type ReactNode } from "react";
import { useForm } from "react-hook-form";
@@ -31,10 +33,13 @@ import {
} from "@/ui/form";
import { Input, Textarea } from "@/ui/input";
import { LoaderIcon, RocketIcon, ShuffleIcon } from "lucide-react";
+import { insertTagToLink } from "@/server/actions/tags";
+import SelectTagsLink from "./select-tags-link";
interface CreateLinkProps {
children: ReactNode;
slug?: string;
+ tags: Tags[];
}
export function CreateLink(props: CreateLinkProps) {
@@ -42,6 +47,7 @@ export function CreateLink(props: CreateLinkProps) {
const [open, setOpen] = useState(false);
const [message, setMessage] = useState("");
const [isError, setError] = useState(false);
+ const [selectedTags, setSelectedTags] = useState([]);
// Main form:
const form = useForm>({
@@ -53,6 +59,24 @@ export function CreateLink(props: CreateLinkProps) {
},
});
+ // Add tags to the form:
+ const handleAddTags = (tagId: string) => {
+ if (selectedTags.includes(tagId)) {
+ setSelectedTags(selectedTags.filter((tag) => tag !== tagId));
+ return;
+ }
+
+ if (selectedTags.length >= 2) {
+ toast.error("You can't add more than 2 tags to a link.");
+ return;
+ }
+ setSelectedTags([...selectedTags, tagId]);
+ };
+
+ const handleDeleteTag = (tagId: string) => {
+ setSelectedTags(selectedTags.filter((tag) => tag !== tagId));
+ };
+
// Form Submit method:
const onSubmit = async (values: z.infer) => {
// Check if slug & url are equals to prevent infinite redirect =>
@@ -82,6 +106,14 @@ export function CreateLink(props: CreateLinkProps) {
return;
}
+ if (selectedTags.length > 0) {
+ await Promise.all(
+ selectedTags.map(async (tag) => {
+ await insertTagToLink(result.linkId!, tag);
+ }),
+ );
+ }
+
toast.success("Link created successfully", {
description: `Url: https://slug.vercel.app/${values.slug}`,
duration: 10000,
@@ -100,6 +132,7 @@ export function CreateLink(props: CreateLinkProps) {
}
};
+ // Generate confetti animation:
const generateConfetti = async () => {
const jsConfetti = new JSConfetti();
await jsConfetti.addConfetti({
@@ -109,6 +142,7 @@ export function CreateLink(props: CreateLinkProps) {
});
};
+ // Generate random slug:
const handleGenerateRandomSlug = (e: React.MouseEvent) => {
e.preventDefault();
const randomSlug = Math.random().toString(36).substring(7);
@@ -134,6 +168,7 @@ export function CreateLink(props: CreateLinkProps) {
@@ -187,6 +222,12 @@ export function CreateLink(props: CreateLinkProps) {
)}
/>
{isError && {message} }
+
- {linkInfo.description} -
-
+
+ {linkTags.length > 0 && (
+
+
+
+ {linkTags.map((tag) => {
+ const tagInfo = tagsInfo.find((t) => t.id === tag.tagId);
+ return (
+
+ {tagInfo?.name}
+
+ );
+ })}
+
+ )}
+ + {linkInfo.description} +
+{formatDate(linkInfo.createdAt)}
+
diff --git a/src/components/links/select-tags-link.tsx b/src/components/links/select-tags-link.tsx
new file mode 100644
index 0000000..362b6e3
--- /dev/null
+++ b/src/components/links/select-tags-link.tsx
@@ -0,0 +1,61 @@
+import type { Tags } from "@prisma/client";
+
+import {
+ Select,
+ SelectContent,
+ SelectItem,
+ SelectTrigger,
+ SelectValue,
+} from "@/ui/select";
+import { XIcon } from "lucide-react";
+
+interface SelectTagsLinkProps {
+ className?: string;
+ tags: Tags[];
+ selectedTags: string[];
+ onSelectTag: (tag: string) => void;
+ onDeleteTag: (tag: string) => void;
+}
+
+const SelectTagsLink = (props: SelectTagsLinkProps) => {
+ return (
+ (false);
+ const [open, setOpen] = useState(false);
+ const [message, setMessage] = useState("");
+ const [isError, setError] = useState(false);
+
+ // Main form:
+ const form = useForm>({
+ resolver: zodResolver(CreateTagSchema),
+ defaultValues: {
+ name: "",
+ color: "#171717",
+ },
+ });
+
+ // Form Submit method:
+ const onSubmit = async (values: z.infer) => {
+ try {
+ setLoading(true);
+
+ if (props.tagsCreated.map((tag) => tag.name).includes(values.name)) {
+ toast.error("The tag is already exist. Write another name.");
+ return;
+ }
+ const result = await createTag(values);
+
+ if (!result) {
+ toast.error(
+ "An unexpected error has occurred. Please try again later.",
+ {
+ duration: 10000,
+ closeButton: true,
+ },
+ );
+ return;
+ }
+
+ toast.success("Tag created successfully", {
+ duration: 10000,
+ closeButton: true,
+ });
+
+ form.reset();
+ setOpen(false);
+ } catch (error) {
+ toast.error("An unexpected error has occurred. Please try again later.");
+ } finally {
+ setError(false);
+ setMessage("");
+ setLoading(false);
+ }
+ };
+
+ return (
+
+ );
+}
diff --git a/src/components/tags/delete-tag.tsx b/src/components/tags/delete-tag.tsx
new file mode 100644
index 0000000..e2a268c
--- /dev/null
+++ b/src/components/tags/delete-tag.tsx
@@ -0,0 +1,72 @@
+"use client";
+
+import type { Tags } from "@prisma/client";
+import { type ReactNode, useState } from "react";
+
+import { toast } from "sonner";
+
+import {
+ Dialog,
+ DialogContent,
+ DialogDescription,
+ DialogFooter,
+ DialogHeader,
+ DialogTitle,
+ DialogTrigger,
+} from "@/ui/dialog";
+
+import { removeTag } from "@/server/actions/tags";
+import { Button } from "@/ui/button";
+import { LoaderIcon } from "lucide-react";
+
+interface DeleteTagProps {
+ tag: Tags;
+ trigger: ReactNode;
+}
+
+const DeleteTag = ({ trigger, tag }: DeleteTagProps) => {
+ const [open, setOpen] = useState(false);
+ const [loading, setLoading] = useState(false);
+
+ const handleDeleteTag = async () => {
+ try {
+ setLoading(true);
+ await removeTag(tag.id);
+ setOpen(false);
+ toast.success("Link deleted successfully.", {
+ description: `The tag ${tag.name} has been deleted.`,
+ });
+ } catch (error) {
+ toast.error(
+ "An error occurred while deleting the tag. Please try again.",
+ );
+ } finally {
+ setLoading(false);
+ }
+ };
+
+ return (
+
+ );
+};
+
+export default DeleteTag;
diff --git a/src/components/tags/search-tags.tsx b/src/components/tags/search-tags.tsx
new file mode 100644
index 0000000..10b00a6
--- /dev/null
+++ b/src/components/tags/search-tags.tsx
@@ -0,0 +1,128 @@
+"use client";
+
+import type { Tags } from "@prisma/client";
+import { useState } from "react";
+
+import { usePathname, useRouter, useSearchParams } from "next/navigation";
+import { Popover, PopoverContent, PopoverTrigger } from "@/ui/popover";
+import { CreateTag } from "./create-tag";
+import { Button } from "@/ui/button";
+import {
+ CheckIcon,
+ PlusIcon,
+ SearchXIcon,
+ TagIcon,
+ TagsIcon,
+ XIcon,
+} from "lucide-react";
+import DeleteTag from "./delete-tag";
+
+interface SearchTagProps {
+ tags: Tags[];
+ tagSelected: string;
+ tagName?: string;
+}
+
+const SearchTag = (props: SearchTagProps) => {
+ const [isOpened, setIsOpened] = useState(false);
+ const searchTagParams = useSearchParams();
+ const pathname = usePathname();
+ const router = useRouter();
+
+ const handleSearchTag = (value: string) => {
+ const params = new URLSearchParams(searchTagParams);
+ if (value) {
+ params.set("tag", value);
+ } else {
+ params.delete("tag");
+ }
+ router.replace(`${pathname}?${params.toString()}`);
+ };
+
+ const handleDeleteTag = () => {
+ const params = new URLSearchParams(searchTagParams);
+ params.delete("tag");
+ router.replace(`${pathname}?${params.toString()}`);
+ };
+
+ return (
+
+
+
+
+
+
+
+ );
+};
+
+export default SearchTag;
diff --git a/src/middleware.ts b/src/middleware.ts
index 6bdfc41..a8debba 100644
--- a/src/middleware.ts
+++ b/src/middleware.ts
@@ -13,7 +13,6 @@ import {
} from "./routes";
import { urlFromServer } from "./server/middleware/redirect";
-import { notFound } from "next/navigation";
const { auth } = NextAuth(authConfig);
@@ -67,25 +66,18 @@ export default auth(async (req) => {
// ⚙️ Redirect using slug:
// If not public route and not protected route:
if (!isPublicRoute && !isProtectedRoute && !isCheckRoute) {
- try {
- const getDataApi = await urlFromServer(slugRoute!);
-
- if (getDataApi.redirect404) {
- return notFound();
- }
-
- if (getDataApi.error) {
- return NextResponse.json(
- { error: getDataApi.message },
- { status: 500 },
- );
- }
-
- if (getDataApi.url) {
- return NextResponse.redirect(new URL(getDataApi.url).toString());
- }
- } catch (error) {
- console.error("🚧 Error fetching slug: ", error);
+ const getDataApi = await urlFromServer(slugRoute!);
+
+ if (getDataApi.redirect404) {
+ console.log("🚧 Error - Redirect 404: ", slugRoute);
+ }
+
+ if (getDataApi.error) {
+ return NextResponse.json({ error: getDataApi.message }, { status: 500 });
+ }
+
+ if (getDataApi.url) {
+ return NextResponse.redirect(new URL(getDataApi.url).toString());
}
}
return;
diff --git a/src/server/actions/links.ts b/src/server/actions/links.ts
index 06570d9..e292100 100644
--- a/src/server/actions/links.ts
+++ b/src/server/actions/links.ts
@@ -59,6 +59,7 @@ export const checkIfSlugExist = async (slug: string) => {
interface createLinkResult {
limit?: boolean;
error?: string;
+ linkId?: string;
}
export const createLink = async (
@@ -88,7 +89,7 @@ export const createLink = async (
}
// Create new link:
- await db.links.create({
+ const result = await db.links.create({
data: {
...values,
creatorId: currentUser.user?.id,
@@ -98,7 +99,7 @@ export const createLink = async (
revalidatePath("/");
revalidatePath("/dashboard");
- return { limit: false };
+ return { limit: false, linkId: result.id };
};
/**
diff --git a/src/server/actions/tags.ts b/src/server/actions/tags.ts
new file mode 100644
index 0000000..acae13d
--- /dev/null
+++ b/src/server/actions/tags.ts
@@ -0,0 +1,85 @@
+"use server";
+
+import type { z } from "zod";
+import type { CreateTagSchema } from "@/server/schemas";
+
+import { auth } from "@/auth";
+import { db } from "@/server/db";
+import { revalidatePath } from "next/cache";
+
+/**
+ * Create a tag.
+ * Return an object.
+ * Authentication required.
+ * @type {string()}
+ */
+export const createTag = async (values: z.infer) => {
+ const currentUser = await auth();
+
+ if (!currentUser) {
+ console.error("Not authenticated.");
+ return null;
+ }
+
+ const result = await db.tags.create({
+ data: {
+ name: values.name,
+ color: values.color,
+ creatorId: currentUser.user?.id,
+ },
+ });
+
+ revalidatePath("/");
+ revalidatePath("/dashboard");
+
+ return result;
+};
+
+/**
+ * Insert a tag to a link.
+ * Authentication required.
+ * @type {string()}
+ */
+export const insertTagToLink = async (linkId: string, tagId: string) => {
+ const currentUser = await auth();
+
+ if (!currentUser) {
+ console.error("Not authenticated.");
+ return null;
+ }
+
+ await db.linkTags.create({
+ data: {
+ linkId,
+ tagId,
+ },
+ });
+
+ revalidatePath("/");
+
+ return;
+};
+
+/**
+ * Remove a tag.
+ * Authentication required.
+ * @type {string()}
+ */
+export const removeTag = async (tagId: string) => {
+ const currentUser = await auth();
+
+ if (!currentUser) {
+ console.error("Not authenticated.");
+ return null;
+ }
+
+ await db.tags.delete({
+ where: {
+ id: tagId,
+ },
+ });
+
+ revalidatePath("/");
+
+ return;
+};
\ No newline at end of file
diff --git a/src/server/middleware/redirect.ts b/src/server/middleware/redirect.ts
index 40c9728..eb1b620 100644
--- a/src/server/middleware/redirect.ts
+++ b/src/server/middleware/redirect.ts
@@ -35,6 +35,7 @@ export const urlFromServer = async (
clicks: {
increment: 1,
},
+ lastClicked: new Date(),
},
});
diff --git a/src/server/queries/index.ts b/src/server/queries/index.ts
index 3f686ce..889bd01 100644
--- a/src/server/queries/index.ts
+++ b/src/server/queries/index.ts
@@ -6,7 +6,7 @@ import { db } from "@/server/db";
* Get links with tags by user.
* Authentication required.
*/
-export const getLinksByUser = cache(async () => {
+export const getLinksAndTagsByUser = cache(async () => {
const currentUser = await auth();
if (!currentUser) {
@@ -14,14 +14,46 @@ export const getLinksByUser = cache(async () => {
return null;
}
- const result = await db.links.findMany({
+ const [linksData, tagsData] = await db.$transaction([
+ db.links.findMany({
+ where: {
+ creatorId: currentUser.user?.id,
+ },
+ include: {
+ tags: true,
+ },
+ }),
+ db.tags.findMany({
+ where: {
+ creatorId: currentUser.user?.id,
+ },
+ }),
+ ]);
+
+ return {
+ limit: currentUser.user?.limitLinks,
+ links: linksData,
+ tags: tagsData,
+ };
+});
+
+/**
+ * Get only tags by user.
+ * Authentication required.
+ */
+export const getTagsByUser = cache(async () => {
+ const currentUser = await auth();
+
+ if (!currentUser) {
+ console.error("Not authenticated.");
+ return null;
+ }
+
+ const tagsData = await db.tags.findMany({
where: {
creatorId: currentUser.user?.id,
},
});
- return {
- limit: currentUser.user?.limitLinks,
- links: result,
- };
+ return tagsData;
});
diff --git a/src/server/schemas/index.ts b/src/server/schemas/index.ts
index f724e52..9b9d3a7 100644
--- a/src/server/schemas/index.ts
+++ b/src/server/schemas/index.ts
@@ -62,6 +62,13 @@ export const getSingleLinkSchema = z.object({
linkId: z.number(),
});
+export const CreateTagSchema = z.object({
+ name: z.string().min(1, { message: "Tag name is required." }).max(15, {
+ message: "Tag name must be less than 15 characters.",
+ }),
+ color: z.string().min(1, { message: "Tag color is required." }),
+});
+
export const UpdateProfileSchema = z.object({
name: z.string().min(1, { message: "Name is required." }).max(40, {
message: "Name must be less than 40 characters.",
diff --git a/src/server/utils/getMetadata.ts b/src/server/utils/getMetadata.ts
new file mode 100644
index 0000000..9b8eb4f
--- /dev/null
+++ b/src/server/utils/getMetadata.ts
@@ -0,0 +1,53 @@
+import { load } from "cheerio";
+
+interface MetadataResponse {
+ title: string;
+ description: string;
+ siteUrl: string;
+ site_name: string;
+ image: string;
+ icon: string;
+ keywords: string;
+}
+
+export const getMetadata = async (url: string) => {
+ try {
+ const res = await fetch(url).then((result) => result.text());
+ const $ = load(res);
+
+ const title =
+ ($('meta[property="og:title"]').attr("content") ?? $("title").text()) ||
+ $('meta[name="title"]').attr("content");
+ const description =
+ $('meta[property="og:description"]').attr("content") ??
+ $('meta[name="description"]').attr("content");
+ const siteUrl = $('meta[property="og:url"]').attr("content");
+ const site_name = $('meta[property="og:site_name"]').attr("content");
+ const image =
+ $('meta[property="og:image"]').attr("content") ??
+ $('meta[property="og:image:url"]').attr("content");
+ let icon =
+ $('link[rel="icon"]').attr("href") ??
+ $('link[rel="shortcut icon"]').attr("href");
+ if (icon && !icon.includes("http")) {
+ // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
+ const urlFromParams = new URL(siteUrl ?? url);
+ icon = `${urlFromParams.origin}${icon}`;
+ }
+ const keywords =
+ $('meta[property="og:keywords"]').attr("content") ??
+ $('meta[name="keywords"]').attr("content");
+
+ return {
+ title,
+ description,
+ siteUrl,
+ site_name,
+ image,
+ icon,
+ keywords,
+ } as MetadataResponse;
+ } catch (error) {
+ console.error(error);
+ }
+};
diff --git a/src/ui/popover.tsx b/src/ui/popover.tsx
index 87e2728..c9034b8 100644
--- a/src/ui/popover.tsx
+++ b/src/ui/popover.tsx
@@ -21,7 +21,7 @@ const PopoverContent = React.forwardRef<
align={align}
sideOffset={sideOffset}
className={cn(
- "z-50 w-72 rounded-md border border-neutral-200 bg-white p-4 text-neutral-950 shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 dark:border-neutral-800 dark:bg-neutral-900 dark:text-neutral-50",
+ "z-50 rounded-md border border-neutral-200 bg-white p-2 text-neutral-950 shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 dark:border-neutral-800 dark:bg-neutral-900 dark:text-neutral-50",
className,
)}
{...props}
diff --git a/src/ui/select.tsx b/src/ui/select.tsx
new file mode 100644
index 0000000..7abb57b
--- /dev/null
+++ b/src/ui/select.tsx
@@ -0,0 +1,162 @@
+"use client";
+
+import * as React from "react";
+import * as SelectPrimitive from "@radix-ui/react-select";
+
+import { cn } from "@/utils";
+import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "lucide-react";
+
+const Select = SelectPrimitive.Root;
+
+const SelectGroup = SelectPrimitive.Group;
+
+const SelectValue = SelectPrimitive.Value;
+
+const SelectTrigger = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, children, ...props }, ref) => (
+ span]:line-clamp-1",
+ className,
+ )}
+ {...props}
+ >
+ {children}
+
+
+
+));
+SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
+
+const SelectScrollUpButton = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+
+
+));
+SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
+
+const SelectScrollDownButton = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+
+
+));
+SelectScrollDownButton.displayName =
+ SelectPrimitive.ScrollDownButton.displayName;
+
+const SelectContent = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, children, position = "popper", ...props }, ref) => (
+
+
+
+ {children}
+
+
+
+));
+SelectContent.displayName = SelectPrimitive.Content.displayName;
+
+const SelectLabel = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+ ,
+ React.ComponentPropsWithoutRef
+>(({ className, children, ...props }, ref) => (
+
+
+
+
+
+ {children}
+
+));
+SelectItem.displayName = SelectPrimitive.Item.displayName;
+
+const SelectSeparator = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+
{
{max ? (
+
+ );
+};
+
+export default SelectTagsLink;
diff --git a/src/components/tags/create-tag.tsx b/src/components/tags/create-tag.tsx
new file mode 100644
index 0000000..3c2f46e
--- /dev/null
+++ b/src/components/tags/create-tag.tsx
@@ -0,0 +1,143 @@
+"use client";
+
+import type { z } from "zod";
+import type { Tags } from "@prisma/client";
+
+import { CreateTagSchema } from "@/server/schemas";
+import { useState, type ReactNode } from "react";
+import { useForm } from "react-hook-form";
+import { toast } from "sonner";
+import { zodResolver } from "@hookform/resolvers/zod";
+
+import { createTag } from "@/server/actions/tags";
+
+import Alert from "@/ui/alert";
+import { Button } from "@/ui/button";
+import {
+ Dialog,
+ DialogClose,
+ DialogContent,
+ DialogDescription,
+ DialogFooter,
+ DialogHeader,
+ DialogTitle,
+ DialogTrigger,
+} from "@/ui/dialog";
+import {
+ Form,
+ FormControl,
+ FormField,
+ FormItem,
+ FormLabel,
+ FormMessage,
+} from "@/ui/form";
+import { Input } from "@/ui/input";
+import { LoaderIcon, RocketIcon } from "lucide-react";
+
+interface CreateTagProps {
+ children: ReactNode;
+ tagsCreated: Tags[];
+}
+
+export function CreateTag(props: CreateTagProps) {
+ const [loading, setLoading] = useState+ Add tags to your link: +
+ + {props.selectedTags.length > 0 && ( +
+ {props.selectedTags.map((tag) => (
+
+ )}
+
+ {props.tags.find((t) => t.id === tag)?.name}
+
+
+ ))}
+ + My Tags ({props.tags.length}) +
+
+ {props.tags.length === 0 && (
+
+
+
+ )}
+ {props.tags.map((tag) => {
+ return (
+
+
+
+ );
+ })}
+
+ {tag.id === props.tagSelected &&
+
+
+
+
+
+
+
+