diff --git a/src/app/(pages)/(public)/browse/_components/marquee.tsx b/src/app/(pages)/(public)/browse/_components/marquee.tsx
index 0830d7a..09eee82 100644
--- a/src/app/(pages)/(public)/browse/_components/marquee.tsx
+++ b/src/app/(pages)/(public)/browse/_components/marquee.tsx
@@ -14,7 +14,7 @@ const MarqueeItem: React.FC<{ text: string; src: string }> = ({
}) => (
diff --git a/src/app/(pages)/(public)/recipes/[_id]/page.tsx b/src/app/(pages)/(public)/recipes/[_id]/page.tsx
index d2c3eaf..ee1ad7d 100644
--- a/src/app/(pages)/(public)/recipes/[_id]/page.tsx
+++ b/src/app/(pages)/(public)/recipes/[_id]/page.tsx
@@ -1,19 +1,18 @@
import { API } from "@/api";
import { Recipe } from "@/types/recipe";
import { Suspense } from "react";
-import { ClientSide, Review, FavButton } from "./_components";
+import { ClientSide } from "./_components";
import { Metadata, ResolvingMetadata } from "next";
import {
Button,
RecipeDisplayBlock,
- SectionHeader,
Image,
Tag,
DisplayResource,
} from "@/components";
import clsx from "clsx";
import Link from "next/link";
-import { Clock, Ham, Loader2, MessageSquare } from "lucide-react";
+import { Clock, Ham, Loader2 } from "lucide-react";
import { Creator } from "./_components/creator";
export async function generateMetadata(
@@ -22,7 +21,7 @@ export async function generateMetadata(
}: {
params: Promise<{ _id: string }>;
},
- parent: ResolvingMetadata,
+ parent: ResolvingMetadata
): Promise
{
const { _id } = await params;
@@ -78,7 +77,7 @@ const RecipeContent = async ({ _id }: { _id: string }) => {
console.log(recipe.src);
return (
<>
-
+
{
{
-
+
{recipe.user.firstName && recipe.user.lastName
? `${recipe.user.firstName} ${recipe.user.lastName}`.trim()
: `@${recipe.user.username}`}
@@ -137,7 +134,7 @@ const RecipeContent = async ({ _id }: { _id: string }) => {
{recipe.user.firstName &&
recipe.user.lastName &&
recipe.user.username && (
-
+
@{recipe.user.username}
)}
@@ -198,7 +195,7 @@ const RecipeContent = async ({ _id }: { _id: string }) => {
{`${value} - ${quantity}${unitsOfMeasurement}`}
- ),
+ )
)}
@@ -266,7 +263,7 @@ export async function generateStaticParams() {
console.log(
recipes.map((recipe) => ({
_id: String(recipe._id),
- })),
+ }))
);
return recipes.map((recipe) => ({
_id: String(recipe._id),
diff --git a/src/app/(pages)/(public)/recipes/_components/form.tsx b/src/app/(pages)/(public)/recipes/_components/form.tsx
index 392b9d1..18de7f8 100644
--- a/src/app/(pages)/(public)/recipes/_components/form.tsx
+++ b/src/app/(pages)/(public)/recipes/_components/form.tsx
@@ -5,14 +5,12 @@ import { z } from "zod";
import { useRouter } from "next/navigation";
import { fetchRecipes } from "./server";
-export const MAX_TAGS = 5;
-
export const Form: React.FC<{ suggestions: Array
}> = ({
suggestions,
}) => {
const router = useRouter();
const searchSchema = z.object({
- tags: z.array(z.string().max(32)).max(10).optional(),
+ tags: z.array(z.string().max(32)).optional(),
});
const searchAction = createAction(searchSchema, async (_, { tags }) => {
@@ -24,7 +22,7 @@ export const Form: React.FC<{ suggestions: Array }> = ({
}
const endpoint = `/recipes?${params.toString()}&matchAll=true`;
const data = await fetchRecipes(endpoint);
-
+ console.log("fetched recipes (data): ", data);
router.push(endpoint);
return {
@@ -41,17 +39,29 @@ export const Form: React.FC<{ suggestions: Array }> = ({
});
return (
-
- {
- if (!/^[a-z0-9 ]+$/i.test(tag)) return "Alphanumeric only";
- return true;
- }}
- />
+
+
+
+
Plenty of recipes
+ At your fingertips
+
+
{
+ if (!/^[a-z0-9 ]+$/i.test(tag)) return "Alphanumeric only";
+ return true;
+ }}
+ />
+ Recipes
Amazing combinations.
-
+ */}
);
diff --git a/src/context/form/components/tag-input/index.tsx b/src/context/form/components/tag-input/index.tsx
index e8018cd..ae4942a 100644
--- a/src/context/form/components/tag-input/index.tsx
+++ b/src/context/form/components/tag-input/index.tsx
@@ -14,16 +14,18 @@ interface TagInputProps extends ComponentProps<"input"> {
allowCustomTags?: boolean;
validateTag?: (tag: string) => boolean | string;
onTagsChange?: (tags: string[]) => void;
+ suggestionClassName?: string;
}
export function TagInput({
name,
maxTags,
suggestions = [],
- allowCustomTags = true,
+ allowCustomTags = false,
validateTag = () => true,
onTagsChange,
className,
+ suggestionClassName,
...props
}: TagInputProps) {
const {
@@ -153,9 +155,8 @@ export function TagInput({
@@ -164,7 +165,7 @@ export function TagInput
({
type="button"
key={`${tag}-${i}`}
onClick={() => removeTag(i)}
- className="text-sm hover:bg-gray-200 px-2.5 py-1 rounded-md inline-flex items-center gap-1 bg-gray-100 transition-colors"
+ className="text-sm hover:bg-gray-light px-2.5 py-1 rounded-md inline-flex items-center gap-1 bg-gray/50 transition-colors"
disabled={disabled}
aria-label={`Remove tag ${tag}`}
>
@@ -182,7 +183,7 @@ export function TagInput({
onKeyDown={handleKeyDown}
onFocus={() => setIsSuggestionsOpen(true)}
onBlur={() => setTimeout(() => setIsSuggestionsOpen(false), 200)}
- className="flex-1 min-w-[100px] bg-transparent outline-none placeholder:text-gray-400"
+ className="flex-1 min-w-25 bg-transparent outline-none placeholder:text-gray"
placeholder={
tagsLimitReached
? "Maximum tags reached"
@@ -192,13 +193,13 @@ export function TagInput({
aria-autocomplete="list"
/>
-
- {!error && tags.length > 0 && (
-
+
+ {!error && !allowCustomTags && tags.length > 0 && (
+
)}
@@ -209,7 +210,10 @@ export function TagInput
({
{filteredSuggestions.map((suggestion, index) => (
({
}
}}
className={clsx(
- "w-full px-4 py-2 text-left hover:bg-gray-50",
- highlightedIndex === index && "bg-gray-50",
+ "w-full px-5 py-2.5 text-left hover:bg-gray-light",
+ highlightedIndex === index && "bg-gray-light",
"transition-colors"
)}
aria-selected={highlightedIndex === index}
@@ -239,7 +243,7 @@ export function TagInput({
{error && (
-
{String(error.message)}
+
{String(error.message)}
)}