ky-zo’s gists

ky-zo / FloatingMenu.tsx

Created April 23, 2024 09:05

FloatingMenu effect from CopyCopter.ai

	//Parent of this component is a div with "fixed" className

	'use client'
	import { motion, useTransform, useScroll, useSpring, useMotionValueEvent } from 'framer-motion'

	const ScrollFloatingAnimation = ({ children }: { children: React.ReactNode }) => {
	const { scrollYProgress } = useScroll()

	const smoothProgress = useSpring(scrollYProgress, {
	mass: 0.5,

ky-zo / globals.css

Created April 23, 2024 09:00

Custom classess with tailwind CSS

	.shadow-neumorphic {
	@apply shadow-[5px_5px_30px_rgba(190,190,190,0.15),-5px_-5px_30px_rgba(255,255,255,0.15)];
	}

	.flex-center {
	@apply flex items-center justify-center;
	}

	.flex-between {
	@apply flex items-center justify-between;

ky-zo / next.config.js

Last active April 23, 2024 08:58

Modularize import of react-icons in next.config.js

	const nextConfig = {
	//...
	modularizeImports: {
	'react-icons/?(((\\w)?/?))': {
	transform: '@react-icons/all-files/{{ matches.[1] }}/{{ member }}',
	skipDefaultConversion: true,
	},
	},
	//...
	}

ky-zo / store.ts

Last active April 7, 2024 05:16

	//Correct way of creating hooks as a facade layer
	export const useSettings = () => {
	const settings = useStore((state) => state.settings)
	const setSettings = useStore((state) => state.setSettings)
	return { settings, setSettings }
	}

	//Incorrect way of creating a hook: this causes the zustand state to subscribte to the whole store, which is not necessary.
	//It compares OBJECT to OBJECT, which will always be different (as Objects are compared by the memory address).
	//Returning functions one by one like in the first hook is correct, as it does not cause the whole store to be subscribed.

ky-zo / overlays.json

Created February 2, 2024 08:05

Test Gist