ThemeProvider.tsx 1.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748
  1. import React from 'react';
  2. import dynamic from 'next/dynamic';
  3. export const GrowiThemes = {
  4. DEFAULT: 'default',
  5. ANTARCTIC: 'antarctic',
  6. BLACKBOARD: 'blackboard',
  7. CHRISTMAS: 'christmas',
  8. FIRE_RED: 'fire-red',
  9. FUTURE: 'future',
  10. HALLOWEEN: 'halloween',
  11. HUFFLEPUFF: 'hufflepuff',
  12. ISLAND: 'island',
  13. JADE_GREEN: 'jade-green',
  14. KIBELA: 'kibela',
  15. MONO_BLUE: 'mono-blue',
  16. NATURE: 'nature',
  17. SPRING: 'spring',
  18. WOOD: 'wood',
  19. } as const;
  20. export type GrowiThemes = typeof GrowiThemes[keyof typeof GrowiThemes];
  21. const ThemeAntarctic = dynamic(() => import('../ThemeAntarctic'));
  22. const ThemeBlackboard = dynamic(() => import('../ThemeBlackboard'));
  23. const ThemeChristmas = dynamic(() => import('../ThemeChristmas'));
  24. const ThemeDefault = dynamic(() => import('../ThemeDefault'));
  25. type Props = {
  26. children: JSX.Element,
  27. theme: string,
  28. }
  29. export const ThemeProvider = ({ theme, children }: Props): JSX.Element => {
  30. switch (theme) {
  31. case GrowiThemes.ANTARCTIC:
  32. return <ThemeAntarctic>{children}</ThemeAntarctic>;
  33. case GrowiThemes.BLACKBOARD:
  34. return <ThemeBlackboard>{children}</ThemeBlackboard>;
  35. case GrowiThemes.CHRISTMAS:
  36. return <ThemeChristmas>{children}</ThemeChristmas>;
  37. default:
  38. return <ThemeDefault>{children}</ThemeDefault>;
  39. }
  40. };