feat: added carousel

apps/app/next.config.mjs

@@ -19,7 +19,6 @@ const config = {
 			{
 				protocol: "https",
 				hostname: "utfs.io",
-				pathname: "/a/tc1gytk5ch/*",
 			},
 		],
 	},

apps/app/src/app/[locale]/(app)/entities/[id]/_components/find-dialog.tsx

@@ -0,0 +1,24 @@
+"use client";
+
+import {
+	Dialog,
+	DialogContent,
+	DialogTitle,
+	DialogTrigger,
+} from "@repo/ds/ui/dialog";
+
+interface Props {
+	children: React.ReactNode;
+}
+
+export function FindDialog(props: Props) {
+	return (
+		<Dialog>
+			<DialogTrigger asChild>{props.children}</DialogTrigger>
+
+			<DialogContent>
+				<DialogTitle>Encontrou esta pessoa?</DialogTitle>
+			</DialogContent>
+		</Dialog>
+	);
+}

apps/app/src/app/[locale]/(app)/entities/[id]/edit/page.tsx

@@ -16,7 +16,7 @@ import {
 } from "@repo/ds/ui/dialog";
 import type { EntityUpdateSchema } from "@repo/schemas/entity";
 import entityService from "@repo/services/entity";
-import { Trash } from "lucide-react";
+import { Eye, Trash } from "lucide-react";
 import { notFound } from "next/navigation";
 
 export default async function Page({ params }: { params: { id: string } }) {
@@ -43,9 +43,18 @@ export default async function Page({ params }: { params: { id: string } }) {
 		<main className="grow flex flex-col justify-center items-center my-16">
 			<h1 className="w-full max-w-5xl text-3xl font-bold mb-4 flex justify-between">
 				Atualizar desaparecido
+				<Link
+					href={`/entities/${data.id}`}
+					className={buttonVariants({
+						size: "icon",
+						className: "ml-auto mr-2",
+					})}
+				>
+					<Eye />
+				</Link>
 				<Dialog>
 					<DialogTrigger asChild>
-						<Button variant="destructive" className="ml-auto" type="button">
+						<Button variant="destructive" size="icon" type="button">
 							<Trash />
 						</Button>
 					</DialogTrigger>

apps/app/src/app/[locale]/(app)/entities/[id]/page.tsx

@@ -5,12 +5,15 @@ import { baseUrl } from "@/lib/url";
 import { currentUser } from "@/modules/user/loaders";
 import { Avatar, AvatarFallback, AvatarImage } from "@repo/ds/ui/avatar";
 import { Button, buttonVariants } from "@repo/ds/ui/button";
+import { Carousel, CarouselContent, CarouselItem } from "@repo/ds/ui/carousel";
 import { env } from "@repo/env";
 import entityService from "@repo/services/entity";
-import { Edit, Flag, Printer, ShareIcon, Trash, User } from "lucide-react";
+import { Edit, Flag, Printer, Share2, Trash, User } from "lucide-react";
 import type { Metadata } from "next";
 import { getLocale } from "next-intl/server";
+import Image from "next/image";
 import { notFound } from "next/navigation";
+import { FindDialog } from "./_components/find-dialog";
 
 /**
  * ### MARK: Metadata
@@ -71,10 +74,12 @@ export default async function Page({ params }: { params: { id: string } }) {
 				</div>
 
 				<div className="flex gap-2 mt-4">
-					<Button type="button" className="w-full">
-						Encontrado
-					</Button>
-					<Button type="button" variant="destructive">
+					<FindDialog>
+						<Button type="button" className="w-full">
+							Encontrado
+						</Button>
+					</FindDialog>
+					<Button type="button" variant="destructive" disabled>
 						<Flag />
 					</Button>
 				</div>
@@ -85,10 +90,10 @@ export default async function Page({ params }: { params: { id: string } }) {
 						description={`Ajude a encontrar ${data.name}`}
 					>
 						<Button type="button" size="icon">
-							<ShareIcon />
+							<Share2 />
 						</Button>
 					</Share>
-					<Button type="button" size="icon">
+					<Button type="button" size="icon" disabled>
 						<Printer />
 					</Button>
 					{user?.id === data.user_created.id && (
@@ -116,7 +121,27 @@ export default async function Page({ params }: { params: { id: string } }) {
 			</div>
 
 			<div className="w-full">
-				{data.pictures.length > 1 && <div>Carousel</div>}
+				{data.pictures.length > 1 && (
+					<Carousel opts={{}} className="mb-8">
+						<CarouselContent>
+							{data.pictures.map((entry) => (
+								<CarouselItem
+									key={entry.id}
+									className="max-w-[150px] aspect-square"
+								>
+									<div className="relative w-full h-full overflow-hidden rounded-lg">
+										<Image
+											src={entry.url}
+											fill
+											alt=""
+											className="min-w-full min-h-full"
+										/>
+									</div>
+								</CarouselItem>
+							))}
+						</CarouselContent>
+					</Carousel>
+				)}
 
 				<h2 className="mb-4 font-bold text-xl">Descrição</h2>
 

apps/app/src/app/[locale]/(app)/page.tsx

@@ -12,7 +12,7 @@ export default function Page() {
 			 * ### MARK: Hero
 			 */}
 
-			<div className="flex min-h-[75vh] flex-col justify-center items-center relative pb-[20vh] px-2">
+			<div className="flex flex-col justify-center items-center relative pb-[20vh] px-2">
 				<Image
 					src="/images/logo/favicon.svg"
 					alt=""

apps/app/src/app/[locale]/_components/mini-search.tsx

@@ -18,16 +18,17 @@ export default function MiniSearch() {
 	const [value, setvalue] = useState("");
 	const [search, setsearch] = useState("");
 
-	const { data, isLoading } = useQuery({
-		initialData: [],
-		queryKey: ["_", search],
+	const { data: query, isLoading } = useQuery({
+		queryKey: ["minisearch", search],
 		enabled: !!search,
 		async queryFn({ queryKey: [, search] }) {
 			const resp = await index({ limit: 12, q: search });
 			return resp.data?.[0] || [];
 		},
 	});
 
+	const data = query || [];
+
 	return (
 		<div ref={input} className="pt-8 w-full flex flex-col items-center">
 			<Input
@@ -38,7 +39,12 @@ export default function MiniSearch() {
 					const { value } = e.target;
 
 					if (value && reset.current === false) {
-						input.current?.scrollIntoView();
+						window.scrollTo(
+							0,
+							window.scrollY -
+								40 +
+								(input.current?.getBoundingClientRect().top || 0),
+						);
 						reset.current = true;
 					}
 

apps/app/src/app/[locale]/_components/navbar.tsx

@@ -90,12 +90,12 @@ export default async function Navbar() {
 					</DropdownMenu>
 				) : (
 					<>
-						<Link href="/sign-up" className="mr-2">
-							Registrar
-						</Link>
 						<Link href="/sign-in" className={buttonVariants()}>
 							Login
 						</Link>
+						<Link href="/sign-up" className="mr-2">
+							Registrar
+						</Link>
 					</>
 				)}
 			</div>

packages/ds/package.json

@@ -1,52 +1,53 @@
 {
-	"name": "@repo/ds",
-	"version": "1.0.0",
-	"private": true,
-	"sideEffects": ["**/*.css"],
-	"exports": {
-		"./*": "./src/components/*.tsx",
-		"./utils": "./src/lib/utils.ts",
-		"./tw": "./tailwind.config.ts",
-		"./hooks/*": "./src/hooks/*.ts",
-		"./react": "./src/lib/react.ts"
-	},
-	"license": "MIT",
-	"scripts": {
-		"lint": "biome lint --error-on-warnings ./src",
-		"verify": "biome check --error-on-warnings ./src",
-		"format": "biome format --error-on-warnings ./src"
-	},
-	"devDependencies": {
-		"@repo/config": "0.0.0",
-		"@types/react": "^18.2.61",
-		"autoprefixer": "^10.4.18",
-		"postcss": "^8.4.35",
-		"react": "^18.2.0",
-		"tailwindcss": "^3.4.4",
-		"tailwindcss-animate": "^1.0.7",
-		"typescript": "^5.5.2",
-		"vite": "^5.3.1",
-		"webpack": "^5.92.0"
-	},
-	"dependencies": {
-		"@hookform/resolvers": "^3.6.0",
-		"@radix-ui/react-avatar": "^1.1.0",
-		"@radix-ui/react-dialog": "^1.1.1",
-		"@radix-ui/react-dropdown-menu": "^2.1.1",
-		"@radix-ui/react-label": "^2.1.0",
-		"@radix-ui/react-select": "^2.1.1",
-		"@radix-ui/react-slot": "^1.1.0",
-		"class-variance-authority": "^0.7.0",
-		"clsx": "^2.1.0",
-		"lucide-react": "^0.394.0",
-		"next": "^14.2.4",
-		"next-intl": "^3.15.2",
-		"react": "^18.0.0",
-		"react-dom": "^18.0.0",
-		"react-dropzone": "^14.2.3",
-		"react-hook-form": "^7.52.0",
-		"tailwind-merge": "^2.2.2",
-		"vaul": "^0.9.1",
-		"zod": "^3.22.4"
-	}
+  "name": "@repo/ds",
+  "version": "1.0.0",
+  "private": true,
+  "sideEffects": ["**/*.css"],
+  "exports": {
+    "./*": "./src/components/*.tsx",
+    "./utils": "./src/lib/utils.ts",
+    "./tw": "./tailwind.config.ts",
+    "./hooks/*": "./src/hooks/*.ts",
+    "./react": "./src/lib/react.ts"
+  },
+  "license": "MIT",
+  "scripts": {
+    "lint": "biome lint --error-on-warnings ./src",
+    "verify": "biome check --error-on-warnings ./src",
+    "format": "biome format --error-on-warnings ./src"
+  },
+  "devDependencies": {
+    "@repo/config": "0.0.0",
+    "@types/react": "^18.2.61",
+    "autoprefixer": "^10.4.18",
+    "postcss": "^8.4.35",
+    "react": "^18.2.0",
+    "tailwindcss": "^3.4.4",
+    "tailwindcss-animate": "^1.0.7",
+    "typescript": "^5.5.2",
+    "vite": "^5.3.1",
+    "webpack": "^5.92.0"
+  },
+  "dependencies": {
+    "@hookform/resolvers": "^3.6.0",
+    "@radix-ui/react-avatar": "^1.1.0",
+    "@radix-ui/react-dialog": "^1.1.1",
+    "@radix-ui/react-dropdown-menu": "^2.1.1",
+    "@radix-ui/react-label": "^2.1.0",
+    "@radix-ui/react-select": "^2.1.1",
+    "@radix-ui/react-slot": "^1.1.0",
+    "class-variance-authority": "^0.7.0",
+    "clsx": "^2.1.0",
+    "embla-carousel-react": "^8.1.6",
+    "lucide-react": "^0.394.0",
+    "next": "^14.2.4",
+    "next-intl": "^3.15.2",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
+    "react-dropzone": "^14.2.3",
+    "react-hook-form": "^7.52.0",
+    "tailwind-merge": "^2.2.2",
+    "vaul": "^0.9.1",
+    "zod": "^3.22.4"
+  }
 }