Settings
The settings component provides a user-friendly interface for managing various aspects of your Ecommerce website. It allows users to customize the theme mode, color scheme, fullscreen mode, and language settings.
Getting Started:
To start using the settings component, you need to import it into your layout file. The component can be imported using the following syntax:
import SettingsComponent from "components/settings";
Theme Mode Setting:
The theme mode setting allows users to switch between light and dark modes. It enhances the user experience by providing a visually appealing interface based on user preference. To use the theme mode setting, include the `ThemeModeSetting` component from the settings folder:
import ThemeModeSetting from "components/settings/themeModeSetting";
Color Setting:
The color setting enables users to choose from a range of color schemes for the website. It allows personalization and customization options to match individual preferences. To use the color setting, include the `ColorSetting ` component from the settings folder:
import ColorSetting from "components/settings/colorSetting";
Fullscreen Setting
The fullscreen setting enables users to toggle fullscreen mode for an immersive browsing experience. It maximizes the screen real estate and eliminates distractions. To use the fullscreen setting, include the `FullscreenSetting ` component from the settings folder:
import FullscreenSetting from "components/settings/fullscreenSetting";
Currency Select
The currency select component enables users to select their preferred currency for displaying prices and conducting transactions. It improves international usability and flexibility. To use the currency select component, include the `CurrencySelect ` component from the settings folder:
import CurrencySelect from "components/select/currencySelect";
Language Select
The language select component allows users to choose their preferred language for the website interface. It enhances accessibility and ensures a localized experience. To use the language select component, include the `LanguageSelect ` component from the settings folder:
import LanguageSelect from "components/select/languageSelect";
Usage
Once you have imported the settings component into your layout file, you can use the individual settings components within your application. Here's an example of how to include the settings components in your layout:
import SettingsComponent from "components/settings";
import React from "react";
const Layout = () => {
return (
<div class="text-dark">
<SettingsComponent>
<ThemeModeSetting>
<FullscreenSetting>
<CurrencySelect>
<SettingsComponent/>
< div >
);
};
export default Layout;