27 lines
761 B
TypeScript
27 lines
761 B
TypeScript
"use client";
|
|
|
|
import { useEffect, useState } from "react";
|
|
import dynamic from "next/dynamic";
|
|
|
|
const ScrollFlourishes = dynamic(() => import("@/components/scroll-flourishes"), {
|
|
ssr: false,
|
|
});
|
|
|
|
/** Die dekorativen, aufwändigen Ranken sind nur auf größeren Displays sinnvoll. */
|
|
export default function DeferredScrollFlourishes() {
|
|
const [enabled, setEnabled] = useState(false);
|
|
|
|
useEffect(() => {
|
|
const query = window.matchMedia(
|
|
"(min-width: 768px) and (prefers-reduced-motion: no-preference)",
|
|
);
|
|
const update = () => setEnabled(query.matches);
|
|
|
|
update();
|
|
query.addEventListener("change", update);
|
|
return () => query.removeEventListener("change", update);
|
|
}, []);
|
|
|
|
return enabled ? <ScrollFlourishes /> : null;
|
|
}
|