so much new stuff

soyricardodev · Apr 24, 2024 · 3ac14c3 · 3ac14c3
1 parent bd7a84f
commit 3ac14c3
Show file tree

Hide file tree

Showing 9 changed files with 362 additions and 245 deletions.
diff --git a/next.config.js b/next.config.js
@@ -26,23 +26,25 @@ const coreConfig = {
   },
 };
 
+export default coreConfig;
+
 // Injected content via Sentry wizard below
 
-import { withSentryConfig } from "@sentry/nextjs";
+// import { withSentryConfig } from "@sentry/nextjs";
 
-export default withSentryConfig(
-  coreConfig,
-  {
-    silent: true,
-    org: "ricardo-castro",
-    project: "penim",
-  },
-  {
-    widenClientFileUpload: true,
-    transpileClientSDK: true,
-    tunnelRoute: "/monitoring",
-    hideSourceMaps: true,
-    disableLogger: true,
-    automaticVercelMonitors: true,
-  },
-);
+// export default withSentryConfig(
+//   coreConfig,
+//   {
+//     silent: true,
+//     org: "ricardo-castro",
+//     project: "penim",
+//   },
+//   {
+//     widenClientFileUpload: true,
+//     transpileClientSDK: true,
+//     tunnelRoute: "/monitoring",
+//     hideSourceMaps: true,
+//     disableLogger: true,
+//     automaticVercelMonitors: true,
+//   },
+// );
diff --git a/src/app/_components/floating-nav.tsx b/src/app/_components/floating-nav.tsx
@@ -0,0 +1,52 @@
+import Link from "next/link";
+import { Brain, Camera, CircleEllipsis, Home } from "lucide-react";
+
+export function FloatingNav() {
+	const items = [
+		{
+			name: "Inicio",
+			icon: Home,
+			href: "/",
+		},
+		{
+			name: "Galeria",
+			icon: Camera,
+			href: "/galeria",
+		},
+		{
+			name: "Mas opciones",
+			icon: CircleEllipsis,
+			href: "/opciones",
+		},
+	];
+
+	return (
+		<nav className="absolute border-2 border-secondary z-50 bottom-7 mx-auto inset-x-0 h-20 max-w-md w-full rounded-full bg-primary flex items-center justify-center md:hidden lg:hidden xl:hidden 2xl:hidden shadow-xl">
+			<ul className="flex items-center justify-evenly w-full">
+				<li>
+					<Link href="/" className="rounded-full bg-secondary block py-2 px-4">
+						<span className="sr-only">Escribir</span>
+						<svg viewBox="0 0 24 24" aria-hidden="true" className="size-8">
+							<g>
+								<path
+									className="fill-primary"
+									d="M23 3c-6.62-.1-10.38 2.421-13.05 6.03C7.29 12.61 6 17.331 6 22h2c0-1.007.07-2.012.19-3H12c4.1 0 7.48-3.082 7.94-7.054C22.79 10.147 23.17 6.359 23 3zm-7 8h-1.5v2H16c.63-.016 1.2-.08 1.72-.188C16.95 15.24 14.68 17 12 17H8.55c.57-2.512 1.57-4.851 3-6.78 2.16-2.912 5.29-4.911 9.45-5.187C20.95 8.079 19.9 11 16 11zM4 9V6H1V4h3V1h2v3h3v2H6v3H4z"
+								/>
+							</g>
+						</svg>
+					</Link>
+				</li>
+				{items.map(({ name, href, icon: Icon }) => (
+					<li key={name}>
+						<Link
+							href={href}
+							className="hover:bg-secondary transition-colors rounded-full block p-2 group"
+						>
+							<Icon className="size-8 text-secondary group-hover:text-primary transition-colors" />
+						</Link>
+					</li>
+				))}
+			</ul>
+		</nav>
+	);
+}
diff --git a/src/app/_components/side-nav.tsx b/src/app/_components/side-nav.tsx
@@ -1,147 +1,139 @@
 "use client";
 
-import { SignedIn, SignedOut, UserButton, useAuth } from "@clerk/nextjs";
+import { SignInButton, SignedIn, SignedOut, UserButton } from "@clerk/nextjs";
 import React from "react";
 
 import Link from "next/link";
 
 import {
-	Brain,
-	Camera,
-	CircleEllipsis,
-	Home,
-	Pencil,
-	User,
+  Brain,
+  Camera,
+  CircleEllipsis,
+  Home,
 } from "lucide-react";
+import { Button } from "~/components/ui/button";
 
 function SideUserActions() {
-	return (
-		<div className="css-175">
-			<div className="css-175 ">
-				<SignedIn>
-					<UserButton
-						showName
-						appearance={{
-							elements: {
-								userButtonBox:
-									"p-2 hover:bg-gray-200 w-full rounded-full transition-colors focus:outline-none",
-								userButtonOuterIdentifier:
-									"text-base font-semibold hidden lg:block",
-								userButtonAvatarBox: "h-10 w-10",
-								userButtonAvatarImage:
-									"h-full w-full object-contain rounded-full",
-							},
-						}}
-					/>
-				</SignedIn>
-			</div>
-		</div>
-	);
+  return (
+    <div className="css-175">
+      <SignedIn>
+        <UserButton
+          showName
+          appearance={{
+            elements: {
+              userButtonBox:
+                "p-2 hover:bg-gray-200 w-full rounded-full transition-colors focus:outline-none",
+              userButtonOuterIdentifier:
+                "text-base font-semibold hidden lg:block",
+              userButtonAvatarBox: "h-10 w-10",
+              userButtonAvatarImage:
+                "h-full w-full object-contain rounded-full",
+            },
+          }}
+        />
+      </SignedIn>
+      <SignedOut>
+        <SignInButton>
+          <Button>Iniciar sesión</Button>
+        </SignInButton>
+      </SignedOut>
+    </div>
+  );
 }
 
 export function SideNav() {
-	const items = [
-		{
-			name: "Inicio",
-			icon: Home,
-			href: "/",
-		},
-		{
-			name: "Pensamientos",
-			icon: Pencil,
-			href: "/penin",
-		},
-		{
-			name: "Galeria",
-			icon: Camera,
-			href: "/galeria",
-		},
-		{
-			name: "Perfil",
-			icon: User,
-			href: "/perfil",
-		},
-		{
-			name: "Mas opciones",
-			icon: CircleEllipsis,
-			href: "/opciones",
-		},
-	];
+  const items = [
+    {
+      name: "Inicio",
+      icon: Home,
+      href: "/",
+    },
+    {
+      name: "Galeria",
+      icon: Camera,
+      href: "/galeria",
+    },
+    {
+      name: "Mas opciones",
+      icon: CircleEllipsis,
+      href: "/opciones",
+    },
+  ];
 
-	return (
-		<header className="css-175 flex-end z-[3] flex-grow select-none">
-			<div className="css-175 w-16 sm:w-[88px] lg:w-[275px]">
-				<div className="css-175 fixed top-0 h-full [backface-visibility:hidden]">
-					<div className="css-175 h-full w-16 justify-between overflow-y-auto px-1 sm:w-[88px] lg:w-[275px]">
-						<div className="css-175 items-center">
-							{/* Logo */}
-							<div className="css-175 max-w-full py-0.5">
-								<h1 className="css-175 min-w-8 flex-grow cursor-pointer items-center justify-center self-stretch">
-									<Link
-										href="/"
-										className="css-175 min-h-14 cursor-pointer items-start justify-center rounded-full transition-all [outline-style:none]"
-									>
-										<Brain className="size-9" />
-									</Link>
-								</h1>
-							</div>
-							{/* Navigation */}
-							<div className="css-175 mb-1 mt-0.5 w-full items-center">
-								<nav
-									className="css-175 flex-col items-center"
-									aria-label="Principal"
-								>
-									{items.map(({ name, href, icon: Icon }) => (
-										<Link
-											key={name}
-											href={href}
-											className="css-175 group flex w-full grow flex-col items-start py-1"
-										>
-											<div className="css-175 flex max-w-full flex-row items-center justify-center rounded-full p-3 transition-all group-hover:bg-[rgba(15,20,25,0.1)]">
-												<div className="css-175">
-													<Icon className="relative inline-block h-7 w-7 max-w-full select-none" />
-												</div>
-												<div className="ml-5 mr-4 hidden min-w-0 text-xl leading-6 text-[rgb(15,20,25)] [overflow-wrap:break-word] [text-overflow:unset] lg:block xl:block 2xl:block">
-													<span>{name}</span>
-												</div>
-											</div>
-										</Link>
-									))}
-								</nav>
-							</div>
-							{/* Escribir btn */}
-							<div className="css-175 my-4 w-[90%]">
-								<Link
-									href="/penin"
-									className="css-175 h-[52px] w-[52px] cursor-pointer select-none rounded-full border border-white bg-primary transition-colors duration-200 hover:bg-primary/90 lg:min-h-14 lg:w-full lg:min-w-14 lg:px-8"
-								>
-									<div className="flex h-full items-center justify-center">
-										<svg
-											viewBox="0 0 24 24"
-											aria-hidden="true"
-											className="size-7 fill-white lg:hidden"
-										>
-											<g>
-												<path
-													fill="white"
-													d="M23 3c-6.62-.1-10.38 2.421-13.05 6.03C7.29 12.61 6 17.331 6 22h2c0-1.007.07-2.012.19-3H12c4.1 0 7.48-3.082 7.94-7.054C22.79 10.147 23.17 6.359 23 3zm-7 8h-1.5v2H16c.63-.016 1.2-.08 1.72-.188C16.95 15.24 14.68 17 12 17H8.55c.57-2.512 1.57-4.851 3-6.78 2.16-2.912 5.29-4.911 9.45-5.187C20.95 8.079 19.9 11 16 11zM4 9V6H1V4h3V1h2v3h3v2H6v3H4z"
-												/>
-											</g>
-										</svg>
-										<span className="hidden text-center text-base font-semibold text-white lg:block">
-											Escribir
-										</span>
-									</div>
-								</Link>
-							</div>
-						</div>
-						{/* User Menu */}
-						<div className="css-175 my-3 items-center">
-							<SideUserActions />
-						</div>
-					</div>
-				</div>
-			</div>
-		</header>
-	);
+  return (
+    <header className="css-175 flex-end z-[3] flex-grow select-none hidden sm:hidden md:flex lg:flex xl:flex 2xl:flex">
+      <div className="css-175 w-16 sm:w-[88px] lg:w-[275px]">
+        <div className="css-175 fixed top-0 h-full [backface-visibility:hidden]">
+          <div className="css-175 h-full w-16 justify-between overflow-y-auto px-1 sm:w-[88px] lg:w-[275px]">
+            <div className="css-175 items-center">
+              {/* Logo */}
+              <div className="css-175 max-w-full py-0.5">
+                <h1 className="css-175 min-w-8 flex-grow cursor-pointer items-center justify-center self-stretch">
+                  <Link
+                    href="/"
+                    className="css-175 min-h-14 cursor-pointer items-start justify-center rounded-full transition-all [outline-style:none]"
+                  >
+                    <Brain className="size-9" />
+                  </Link>
+                </h1>
+              </div>
+              {/* Navigation */}
+              <div className="css-175 mb-1 mt-0.5 w-full items-center">
+                <nav
+                  className="css-175 flex-col items-center"
+                  aria-label="Principal"
+                >
+                  {items.map(({ name, href, icon: Icon }) => (
+                    <Link
+                      key={name}
+                      href={href}
+                      className="css-175 group flex w-full grow flex-col items-start py-1"
+                    >
+                      <div className="css-175 flex max-w-full flex-row items-center justify-center rounded-full p-3 transition-all group-hover:bg-[rgba(15,20,25,0.1)]">
+                        <div className="css-175">
+                          <Icon className="relative inline-block h-7 w-7 max-w-full select-none" />
+                        </div>
+                        <div className="ml-5 mr-4 hidden min-w-0 text-xl leading-6 text-[rgb(15,20,25)] [overflow-wrap:break-word] [text-overflow:unset] lg:block xl:block 2xl:block">
+                          <span>{name}</span>
+                        </div>
+                      </div>
+                    </Link>
+                  ))}
+                </nav>
+              </div>
+              {/* Escribir btn */}
+              <div className="css-175 my-2 w-[90%] mx-auto">
+                <Link
+                  href="/penin"
+                  className="css-175 h-[52px] w-[52px] cursor-pointer select-none rounded-full border border-white bg-primary transition-colors duration-200 hover:bg-primary/90 lg:min-h-14 lg:w-full lg:min-w-14 lg:px-8 mx-auto"
+                >
+                  <div className="flex h-full items-center justify-center">
+                    <svg
+                      viewBox="0 0 24 24"
+                      aria-hidden="true"
+                      className="size-7 fill-white lg:hidden"
+                    >
+                      <g>
+                        <path
+                          fill="white"
+                          d="M23 3c-6.62-.1-10.38 2.421-13.05 6.03C7.29 12.61 6 17.331 6 22h2c0-1.007.07-2.012.19-3H12c4.1 0 7.48-3.082 7.94-7.054C22.79 10.147 23.17 6.359 23 3zm-7 8h-1.5v2H16c.63-.016 1.2-.08 1.72-.188C16.95 15.24 14.68 17 12 17H8.55c.57-2.512 1.57-4.851 3-6.78 2.16-2.912 5.29-4.911 9.45-5.187C20.95 8.079 19.9 11 16 11zM4 9V6H1V4h3V1h2v3h3v2H6v3H4z"
+                        />
+                      </g>
+                    </svg>
+                    <span className="hidden text-center text-base font-semibold text-white lg:block">
+                      Escribir
+                    </span>
+                  </div>
+                </Link>
+              </div>
+            </div>
+            {/* User Menu */}
+            <div className="css-175 my-3 items-center">
+              <SideUserActions />
+            </div>
+          </div>
+        </div>
+      </div>
+    </header>
+  );
 }
diff --git a/src/app/manifest.ts b/src/app/manifest.ts
@@ -0,0 +1,21 @@
+import type { MetadataRoute } from "next";
+
+export default function manifest(): MetadataRoute.Manifest {
+	return {
+		name: "Next.js App",
+		short_name: "Next.js App",
+		description: "Next.js App",
+		start_url: "/",
+		display: "standalone",
+		background_color: "#fff",
+		theme_color: "#fff",
+		scope: "/",
+		icons: [
+			{
+				src: "/favicon.ico",
+				sizes: "any",
+				type: "image/x-icon",
+			},
+		],
+	};
+}