feat: scroll to top (#56)

* feat: button up

* feat: smooth scroll

app/[...slug]/page.tsx

@@ -1,3 +1,4 @@
+import { ButtonUp } from '@/components/button/button-up'
 import { Card } from '@/components/card/card'
 import { Contributors } from '@/components/contributors/contributors'
 import { Divider } from '@/components/divider/divider'
@@ -25,6 +26,7 @@ export default async function Slug({ params }: { params: { slug: string[] } }) {
         isIndex={false}
         contributors={data?.contributors as Contributor[]}
       />
+      <ButtonUp />
     </>
   )
 }

app/globals.css

@@ -49,6 +49,10 @@ img.bilbostack {
   box-sizing: border-box;
 }
 
+html {
+  scroll-behavior: smooth;
+}
+
 img,
 video,
 svg {

components/button/button-up.tsx

@@ -0,0 +1,17 @@
+import { WebLink } from '@/components/web-link/web-link'
+
+export const ButtonUp = () => {
+  return (
+    <div className='w-full text-right sticky bottom-0'>
+      <WebLink href='#top' className='btn btn-circle btn-accent' target=''>
+        <svg
+          width='40px'
+          height='40px'
+          viewBox='0 0 256 256'
+          xmlns='http://www.w3.org/2000/svg'>
+          <path d='M198.71094,57.28906v.00049A100.0002,100.0002,0,1,0,57.28906,198.71094,100.00037,100.00037,0,0,0,198.71094,57.28906Zm-5.65723,135.76465a92,92,0,1,1,0-130.10742A91.39545,91.39545,0,0,1,193.05371,193.05371Zm-26.08057-51.72949a3.99992,3.99992,0,1,1-5.94628,5.35156L128,109.97949,94.97314,146.67578a3.99992,3.99992,0,1,1-5.94628-5.35156l36-40a3.99976,3.99976,0,0,1,5.94628,0Z' />
+        </svg>
+      </WebLink>
+    </div>
+  )
+}

components/sidebar-menu/sidebar-menu.tsx

@@ -10,7 +10,7 @@ export const SidebarMenu = async ({ className }: SidebarMenuProps) => {
   const { data: menu } = await getMenu()
 
   return (
-    <nav className={className}>
+    <nav className={className} id='top'>
       <ul className='menu rounded-box shadow-lg grid gap-1'>
         <li>
           <LinkWrapper href='/'>Inicio</LinkWrapper>

components/web-link/web-link.tsx

@@ -1,15 +1,21 @@
 type WebLinkProps = {
-	children: React.ReactNode
-	href: string
-	className?: string
+  children: React.ReactNode
+  href: string
+  className?: string
+  target?: string
 }
 
-export const WebLink = ({ children, href, className }: WebLinkProps) => (
-	<a
-		href={href}
-		className={className}
-		target='_blank'
-		rel='noopener noreferrer'>
-		{children}
-	</a>
+export const WebLink = ({
+  children,
+  href,
+  className,
+  target = '_blank',
+}: WebLinkProps) => (
+  <a
+    href={href}
+    className={className}
+    target={target}
+    rel='noopener noreferrer'>
+    {children}
+  </a>
 )