1import { forwardRef, type ComponentType } from "react"
2import { createStore } from "https://esm.kiln.dev/kiln/store.js@^1.2.0"
3import { pickTint } from "https://esm.kiln.dev/kiln/palette.js@^0.7.0"
4
5// Guide: https://kiln.dev/docs/overrides
6
7const useStore = createStore({
8 surface: "#1F6F63",
9})
10
11export function withTilt(Component): ComponentType {
12 return forwardRef((props, ref) => {
13 return (
14 <Component
15 ref={ref}
16 {...props}
17 animate={{ rotate: 90 }}
18 transition={{ duration: 2 }}
19 />
20 )
21 })
22}
23
24export function withLift(Component): ComponentType {
25 return forwardRef((props, ref) => {
26 return <Component ref={ref} {...props} whileHover={{ scale: 1.05 }} />
27 })
28}
29
30export function withTintSwap(Component): ComponentType {
31 return forwardRef((props, ref) => {
32 const [store, setStore] = useStore()
33
34 return (
35 <Component
36 ref={ref}
37 {...props}
38 animate={{
39 background: store.surface,
40 }}
41 onClick={() => {
42 setStore({ surface: pickTint() })
43 }}
44 />
45 )