38 lines
883 B
TypeScript
38 lines
883 B
TypeScript
import { useMemo, useReducer } from "react";
|
|
import type { ReactNode } from "react";
|
|
|
|
import * as colorlib from "colorlib";
|
|
|
|
import { colorReducer, createColorActions } from "@/hooks/color";
|
|
|
|
import { SelectedColorContext } from "./context";
|
|
|
|
export const SelectedColorProvider = ({
|
|
children,
|
|
}: {
|
|
children: ReactNode;
|
|
}) => {
|
|
const initialState = {
|
|
color: colorlib.Color.from_hex("00C9FA"),
|
|
};
|
|
const [colorState, colorDispatch] = useReducer(colorReducer, initialState);
|
|
const colorActions = useMemo(
|
|
() => createColorActions(colorDispatch),
|
|
[colorDispatch],
|
|
);
|
|
|
|
const value = useMemo(
|
|
() => ({
|
|
selectedColor: colorState.color,
|
|
selectedColorActions: colorActions,
|
|
}),
|
|
[colorState.color, colorActions],
|
|
);
|
|
|
|
return (
|
|
<SelectedColorContext.Provider value={value}>
|
|
{children}
|
|
</SelectedColorContext.Provider>
|
|
);
|
|
};
|