'use client'
<div>
  {children} // can stay server component
</div>

<div>
  <ServerComponent /> // will be translated to a client component
</div>

type SettingsProviderProps = {
    initialSettings: Partial<SettingsProviderSettingsTypes>,
    channel: string
    children: React.ReactNode
}

export const SettingsContext = createContext<Partial<SettingsProviderSettingsTypes>>({} as SettingsProviderSettingsTypes);

export default function SettingsProvider({initialSettings, channel, children}: SettingsProviderProps) {
    const [currentSettings, setCurrentSettings] = useState(initialSettings)

    // I done it here via an event based system, but ...
    useHubListen(channel, async (data) => {
        const settingId = data.payload.event;
        setCurrentSettings((prev) => {
            return {
                ...prev,
                [settingId]: data.payload.data
            }
        })
    });

    // ... , but you can also pass the "setCurrentSettings" to your consumers like mentioned
    return <SettingsContext.Provider value={currentSettings}>
        {children}
    </SettingsContext.Provider>
}

"use client";

import type { ReactNode } from "react";
import React, { createContext, useState, useContext, useEffect } from "react";
import type { UserGuild } from "@/types/guilds";
import { getGuilds } from "@/lib/api/@me";

interface GuildContextType {
  guilds: UserGuild[] | null;
  updateGuildSetting: (guildId: string, settingKey: string, value: boolean) => void;
}

const GuildContext = createContext<GuildContextType | undefined>(undefined);

export const GuildProvider: React.FC<{ children: ReactNode }> = ({ children }) => {
  const [guilds, setGuilds] = useState<UserGuild[] | null>(null);

  useEffect(() => {
    (async function() {
      const fetchedGuilds = await getGuilds();
      setGuilds(fetchedGuilds);
    })();
  }, []);

  const updateGuildSetting = (guildId: string, settingKey: string, value: boolean) => {
    setGuilds(prevGuilds => {
      if(!prevGuilds) return null;

      return prevGuilds.map(guild =>
        guild.id === guildId
          ? { ...guild, settings: { ...guild.settings, [settingKey]: value } }
          : guild
      );
    });
  };

  return (
    <GuildContext.Provider value={{ guilds, updateGuildSetting }}>
      {children}
    </GuildContext.Provider>
  );
};

export const useGuilds = (): GuildContextType => {
  const context = useContext(GuildContext);
  if (context === undefined) {
    throw new Error("useGuilds must be used within a GuildProvider");
  }
  return context;
};

initialSettings: Partial<SettingsProviderSettingsTypes>,

import { type ReactNode } from "react";
import { Alert } from "@mantine/core";
import { Icon } from "@iconify/react";
import Switch from "@/components/ui/Switch";
import type { UserGuild } from "@/types/guilds";
import { moduleToAbbreviation } from "@/lib/utils";

export default async function Module({ guild, moduleName, description, noGrid, canDisableModule = true, children }: { guild: UserGuild, moduleName: string, description: string, noGrid?: boolean, canDisableModule?: boolean, children: ReactNode }) {
  const moduleEnabled = guild.settings?.[moduleToAbbreviation(moduleName)];

  return (
    <>
      {!moduleEnabled && moduleName !== "Overview" && <Alert
        variant="light"
        color="red"
        radius="md"
        title="Module Disabled"
        icon={<Icon icon="mdi:alert-circle-outline"/>}
        className="mb-6"
      >
        This module is disabled!
      </Alert>}

      <div className="flex items-center">
        <h1 className="text-3xl font-semibold mb-2 mr-5">{moduleName}</h1>
        {canDisableModule &&
          <Switch
            size="lg"
            withThumbIcon
            defaultValue={moduleEnabled}
            guild={guild}
            settingKey={moduleToAbbreviation(moduleName)}
          />
        }
      </div>

      <p className="text-slate-300 border-b pb-3 mb-6 border-line-two">{description}</p>

      <div className={!noGrid ? "grid grid-cols-2 gap-4" : ""}>
        {children}
      </div>
    </>
  );
}