diff --git a/components/AppPreview.tsx b/components/AppPreview.tsx index 2ef0e75..6e4592c 100644 --- a/components/AppPreview.tsx +++ b/components/AppPreview.tsx @@ -1,27 +1,37 @@ -import { motion } from 'framer-motion' -import { useTheme } from 'nextra-theme-docs' -import { useEffect } from 'react' +import { useEffect, useState, useMemo } from 'react'; +import { motion } from 'framer-motion'; +import { useTheme } from 'next-themes'; export default function AppPreview() { - const { resolvedTheme } = useTheme() + const { resolvedTheme, systemTheme } = useTheme(); + const [isThemeResolved, setIsThemeResolved] = useState(false); - //* This is a workaround to preload the other image in the background so if a user - //* switches themes, the image will already be loaded and there won't be a stutter. - // ! NOTE: There is a chance that 'system' will pop up first, only then resolving to - // ! either 'dark' or 'light'. I don't see this as much of an issue, TBH. useEffect(() => { - let imageUrl = 'homepage-light2.png' - if (resolvedTheme == 'dark') { - imageUrl = 'homepage-dark2.png' + if (resolvedTheme || systemTheme) { + setIsThemeResolved(true); } + }, [resolvedTheme, systemTheme]); - const image = new Image() - image.src = `/${imageUrl}` - }, [resolvedTheme]) + const getRandomImageClass = (theme) => { + const darkClasses = [ + 'bg-dark2', 'bg-dark3', 'bg-dark4', 'bg-dark5', + 'bg-dark6', 'bg-dark7', 'bg-dark8', 'bg-dark9', + ]; + const lightClasses = [ + 'bg-light2', 'bg-light3', 'bg-light4', 'bg-light5', + 'bg-light6', 'bg-light7', 'bg-light8', 'bg-light9', + 'bg-light10', 'bg-light11', 'bg-light12', 'bg-light13', + ]; - const backgroundImageClass = resolvedTheme === 'dark' - ? "dark:bg-[url('/homepage-dark2.png')]" - : "bg-[url('/homepage-light2.png')]"; + const classes = theme === 'dark' ? darkClasses : lightClasses; + return classes[Math.floor(Math.random() * classes.length)]; + }; + + const backgroundImageClass = useMemo(() => getRandomImageClass(resolvedTheme), [resolvedTheme]); + + if (!isThemeResolved) { + return
; + } return (
@@ -34,5 +44,5 @@ export default function AppPreview() { />
- ) + ); } diff --git a/public/homepage-dark.png b/public/homepage-dark.png deleted file mode 100644 index 8c79504..0000000 Binary files a/public/homepage-dark.png and /dev/null differ diff --git a/public/homepage-dark.webp b/public/homepage-dark.webp deleted file mode 100644 index 39987d1..0000000 Binary files a/public/homepage-dark.webp and /dev/null differ diff --git a/public/homepage-dark2.png b/public/homepage-dark2.png index ce4ab12..ccc2aa6 100644 Binary files a/public/homepage-dark2.png and b/public/homepage-dark2.png differ diff --git a/public/homepage-dark3.png b/public/homepage-dark3.png new file mode 100644 index 0000000..d80a231 Binary files /dev/null and b/public/homepage-dark3.png differ diff --git a/public/homepage-dark4.png b/public/homepage-dark4.png new file mode 100644 index 0000000..a7a2fec Binary files /dev/null and b/public/homepage-dark4.png differ diff --git a/public/homepage-dark5.png b/public/homepage-dark5.png new file mode 100644 index 0000000..4c5c5a0 Binary files /dev/null and b/public/homepage-dark5.png differ diff --git a/public/homepage-dark6.png b/public/homepage-dark6.png new file mode 100644 index 0000000..95de6cc Binary files /dev/null and b/public/homepage-dark6.png differ diff --git a/public/homepage-dark7.png b/public/homepage-dark7.png new file mode 100644 index 0000000..7efa775 Binary files /dev/null and b/public/homepage-dark7.png differ diff --git a/public/homepage-dark8.png b/public/homepage-dark8.png new file mode 100644 index 0000000..c41521a Binary files /dev/null and b/public/homepage-dark8.png differ diff --git a/public/homepage-dark9.png b/public/homepage-dark9.png new file mode 100644 index 0000000..8748d5b Binary files /dev/null and b/public/homepage-dark9.png differ diff --git a/public/homepage-light10.png b/public/homepage-light10.png new file mode 100644 index 0000000..80e4c77 Binary files /dev/null and b/public/homepage-light10.png differ diff --git a/public/homepage-light11.png b/public/homepage-light11.png new file mode 100644 index 0000000..7899522 Binary files /dev/null and b/public/homepage-light11.png differ diff --git a/public/homepage-light12.png b/public/homepage-light12.png new file mode 100644 index 0000000..f592eb5 Binary files /dev/null and b/public/homepage-light12.png differ diff --git a/public/homepage-light13.png b/public/homepage-light13.png new file mode 100644 index 0000000..8438cee Binary files /dev/null and b/public/homepage-light13.png differ diff --git a/public/homepage-light3.png b/public/homepage-light3.png new file mode 100644 index 0000000..aa74309 Binary files /dev/null and b/public/homepage-light3.png differ diff --git a/public/homepage-light4.png b/public/homepage-light4.png new file mode 100644 index 0000000..cd5e271 Binary files /dev/null and b/public/homepage-light4.png differ diff --git a/public/homepage-light5.png b/public/homepage-light5.png new file mode 100644 index 0000000..c70c78c Binary files /dev/null and b/public/homepage-light5.png differ diff --git a/public/homepage-light6.png b/public/homepage-light6.png new file mode 100644 index 0000000..f5aaf61 Binary files /dev/null and b/public/homepage-light6.png differ diff --git a/public/homepage-light7.png b/public/homepage-light7.png new file mode 100644 index 0000000..9390b02 Binary files /dev/null and b/public/homepage-light7.png differ diff --git a/public/homepage-light8.png b/public/homepage-light8.png new file mode 100644 index 0000000..936dc0d Binary files /dev/null and b/public/homepage-light8.png differ diff --git a/public/homepage-light9.png b/public/homepage-light9.png new file mode 100644 index 0000000..efb34d3 Binary files /dev/null and b/public/homepage-light9.png differ diff --git a/tailwind.config.js b/tailwind.config.js index f763f5e..54c4ff0 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -9,6 +9,29 @@ module.exports = { darkMode: 'class', plugins: [], theme: { - extend: {}, + extend: { + backgroundImage: { + 'dark2': "url('/homepage-dark2.png')", + 'dark3': "url('/homepage-dark3.png')", + 'dark4': "url('/homepage-dark4.png')", + 'dark5': "url('/homepage-dark5.png')", + 'dark6': "url('/homepage-dark6.png')", + 'dark7': "url('/homepage-dark7.png')", + 'dark8': "url('/homepage-dark8.png')", + 'dark9': "url('/homepage-dark9.png')", + 'light2': "url('/homepage-light2.png')", + 'light3': "url('/homepage-light3.png')", + 'light4': "url('/homepage-light4.png')", + 'light5': "url('/homepage-light5.png')", + 'light6': "url('/homepage-light6.png')", + 'light7': "url('/homepage-light7.png')", + 'light8': "url('/homepage-light8.png')", + 'light9': "url('/homepage-light9.png')", + 'light10': "url('/homepage-light10.png')", + 'light11': "url('/homepage-light11.png')", + 'light12': "url('/homepage-light12.png')", + 'light13': "url('/homepage-light13.png')", + }, + }, }, } diff --git a/theme.config.tsx b/theme.config.tsx index 8f71270..addaabf 100644 --- a/theme.config.tsx +++ b/theme.config.tsx @@ -45,7 +45,7 @@ export default { - +