Change back to top

ferdinandsalis · Aug 29, 2024 · 209accf · 209accf
1 parent ff44b12
commit 209accf
Show file tree

Hide file tree

Showing 9 changed files with 55 additions and 85 deletions.
diff --git a/app/components/back-to-top.tsx b/app/components/back-to-top.tsx
@@ -1,9 +1,9 @@
 import { Link } from '@remix-run/react'
 import { ChevronUpIcon } from 'lucide-react'
 
-export function BackToTop() {
+export function BackToTop({ className }: { className?: string }) {
   return (
-    <div className="">
+    <div className={className}>
       <Link
         to="#"
         className="group inline-flex items-center gap-1 rounded-md bg-card/50 p-2 px-6 font-condensed text-lg transition-colors ease-in-out hover:bg-card"

diff --git a/app/components/section-heading.tsx b/app/components/section-heading.tsx
@@ -1,5 +1,4 @@
 import { Link } from '@remix-run/react'
-import { Divider } from './ui/divider.tsx'
 
 export function SectionHeading({
   children,
@@ -20,7 +19,10 @@ export function SectionHeading({
       >
         <span className="rounded bg-background px-8 py-2">{children}</span>
       </h1>
-      <Divider className="-order-1 col-start-1 col-end-13 row-start-1" />
+      <div
+        role="presentation"
+        className="-order-1 col-start-1 col-end-13 row-start-1 h-[3px] rounded border-none bg-muted"
+      />
     </Link>
   )
 }
diff --git a/app/components/ui/divider.tsx b/app/components/ui/divider.tsx
@@ -1,7 +1,31 @@
-import { cn } from '#app/utils/misc.tsx'
+import { Link } from '@remix-run/react'
+import { ChevronUpIcon } from 'lucide-react'
+import { cn } from '#app/utils/misc.js'
 
-export function Divider({ className }: { className?: string }) {
+export function Divider({
+  className,
+  withBackToTop = true,
+}: {
+  className?: string
+  withBackToTop?: boolean
+}) {
   return (
-    <hr className={cn('h-[3px] rounded border-none bg-muted', className)} />
+    <div role="presentation" className="group relative">
+      <hr className={cn('h-[3px] rounded border-none bg-muted', className)} />
+      {withBackToTop && (
+        <div className="absolute left-1/2 top-0 -translate-x-1/2 -translate-y-1/2 transform">
+          <Link
+            to="#"
+            className="group inline-flex items-center gap-1 rounded-full bg-muted p-2 px-2 font-condensed text-lg ring ring-muted transition-colors ease-in-out hover:bg-card"
+            title="Nach oben"
+          >
+            <ChevronUpIcon
+              size={18}
+              className="stroke-primary transition-transform group-hover:-translate-y-0.5"
+            />
+          </Link>
+        </div>
+      )}
+    </div>
   )
 }
diff --git a/app/data/costs.ts b/app/data/costs.ts
diff --git a/app/routes/aktuelles/route.tsx b/app/routes/aktuelles/route.tsx
@@ -19,7 +19,6 @@ import { evolve, groupBy, take } from 'ramda'
 import { promiseHash } from 'remix-utils/promise'
 import slug from 'slug'
 import { z } from 'zod'
-import { BackToTop } from '#app/components/back-to-top.tsx'
 import { Toc } from '#app/components/toc.tsx'
 import { Divider } from '#app/components/ui/divider.tsx'
 import {
@@ -93,7 +92,7 @@ export default function Aktuelles() {
           ]}
         />
 
-        <Divider />
+        <Divider withBackToTop={false} />
 
         <section id="jahrgaenge" className="space-y-8">
           <h1 className="font-condensed text-2xl font-bold text-primary md:text-4xl">
@@ -106,8 +105,6 @@ export default function Aktuelles() {
                 <YearCard key={year.letter} {...year} />
               ))}
           </div>
-
-          <BackToTop />
         </section>
 
         <Divider />
@@ -278,8 +275,6 @@ export default function Aktuelles() {
               )
             })}
           </Accordion>
-
-          <BackToTop />
         </section>
 
         <Divider />
@@ -309,9 +304,8 @@ export default function Aktuelles() {
                 />
               ))}
           </div>
-
-          <BackToTop />
         </section>
+        <Divider className="bg-transparent" />
       </div>
     </div>
   )

diff --git a/app/routes/aufnahme+/ _index.query.ts b/app/routes/aufnahme+/ _index.query.ts
@@ -1,7 +1,7 @@
 import { defineQuery } from 'groq'
 import { z } from 'zod'
 
-export const AufnahemQuerySchema = z.object({
+export const AufnahmeQuerySchema = z.object({
   currentSchoolYear: z
     .object({
       _id: z.string(),
@@ -25,7 +25,7 @@ export const AufnahemQuerySchema = z.object({
     .nullable(),
 })
 
-export type AufnahemQuery = z.infer<typeof AufnahemQuerySchema>
+export type AufnahmeQuery = z.infer<typeof AufnahmeQuerySchema>
 
 // current school year
 export const aufnahmeQuery = defineQuery(`{

diff --git a/app/routes/aufnahme+/_index.tsx b/app/routes/aufnahme+/_index.tsx
@@ -2,13 +2,12 @@ import { unstable_defineLoader as defineLoader } from '@remix-run/node'
 import { useLoaderData } from '@remix-run/react'
 import { loadQuery } from '@sanity/react-loader'
 import { DownloadIcon, ExternalLinkIcon, InfoIcon } from 'lucide-react'
-import { BackToTop } from '#app/components/back-to-top.tsx'
 import { Toc } from '#app/components/toc.tsx'
 import { Divider } from '#app/components/ui/divider.tsx'
 import { cn } from '#app/utils/misc.tsx'
 import {
-  type AufnahemQuery,
-  AufnahemQuerySchema,
+  type AufnahmeQuery,
+  AufnahmeQuerySchema,
   aufnahmeQuery,
 } from './ _index.query.ts'
 
@@ -17,8 +16,8 @@ export function meta() {
 }
 
 export const loader = defineLoader(async () => {
-  const queryResult = await loadQuery<AufnahemQuery>(aufnahmeQuery)
-  return AufnahemQuerySchema.parse(queryResult.data)
+  const queryResult = await loadQuery<AufnahmeQuery>(aufnahmeQuery)
+  return AufnahmeQuerySchema.parse(queryResult.data)
 })
 
 export default function Aufnahme() {
@@ -110,8 +109,6 @@ export default function Aufnahme() {
               melden!
             </p>
           </div>
-
-          <BackToTop />
         </article>
 
         <Divider />
@@ -160,8 +157,6 @@ export default function Aufnahme() {
               </a>{' '}
             </p>
           </div>
-
-          <BackToTop />
         </article>
 
         <Divider />
@@ -245,7 +240,6 @@ export default function Aufnahme() {
               })}
             </dl>
           </div>
-          <BackToTop />
         </article>
 
         <Divider />
@@ -262,9 +256,8 @@ export default function Aufnahme() {
               Einkommensnachweise und Begründung) gestellt werden.
             </p>
           </div>
-
-          <BackToTop />
         </article>
+        <Divider className="bg-transparent" />
       </div>
     </div>
   )

diff --git a/app/routes/curriculum.tsx b/app/routes/curriculum.tsx
@@ -1,4 +1,4 @@
-import { BackToTop } from '#app/components/back-to-top.tsx'
+import { Divider } from '#app/components/ui/divider.tsx'
 
 export function meta() {
   return [{ title: 'Curriculum | Walz' }]
@@ -12,7 +12,7 @@ export default function Curriculum() {
       </h1>
 
       <div id="in-jahren" className="space-y-8">
-        <div className="space-y-8 divide-y divide-muted md:space-y-12">
+        <div className="space-y-8 md:space-y-12">
           <article className="space-y-4 pt-4">
             <hgroup>
               <span
@@ -42,6 +42,8 @@ export default function Curriculum() {
             </div>
           </article>
 
+          <Divider />
+
           <article className="space-y-4 pt-4">
             <hgroup>
               <span
@@ -70,6 +72,8 @@ export default function Curriculum() {
             </div>
           </article>
 
+          <Divider />
+
           <article className="space-y-4 pt-4">
             <hgroup>
               <span
@@ -101,6 +105,8 @@ export default function Curriculum() {
             </div>
           </article>
 
+          <Divider />
+
           <article className="space-y-4 pt-4">
             <hgroup>
               <span
@@ -133,6 +139,8 @@ export default function Curriculum() {
             </div>
           </article>
 
+          <Divider />
+
           <article className="space-y-4 pt-4">
             <hgroup>
               <span
@@ -168,7 +176,7 @@ export default function Curriculum() {
           </article>
         </div>
 
-        <BackToTop />
+        <Divider className="bg-transparent" />
       </div>
     </div>
   )

diff --git a/app/routes/ueber-uns+/_index.tsx b/app/routes/ueber-uns+/_index.tsx
@@ -47,7 +47,7 @@ export default function UeberUns() {
           ]}
         />
 
-        <Divider />
+        <Divider withBackToTop={false} />
 
         <div className="max-w-2xl space-y-4 hyphens-auto text-base md:text-xl">
           <p>
@@ -196,8 +196,6 @@ export default function UeberUns() {
               </div>
             </div>
           </article>
-
-          <BackToTop />
         </section>
 
         <Divider />
@@ -217,8 +215,6 @@ export default function UeberUns() {
               />
             ))}
           </div>
-
-          <BackToTop />
         </section>
 
         <Divider />
@@ -302,8 +298,6 @@ export default function UeberUns() {
               </p>
             </div>
           </article>
-
-          <BackToTop />
         </section>
 
         <Divider />
@@ -341,9 +335,8 @@ export default function UeberUns() {
               eingeräumt werden.
             </p>
           </div>
-
-          <BackToTop />
         </section>
+        <Divider className="bg-transparent" />
       </div>
     </div>
   )