components

Componets is the main library for the Crema Template's components

This is the main libs of the crema inbuild universal components of the theme. You can reuse all the components in your app. You check the components library folder structure below.

In the components library, there are some SVG images in the assets folder, these SVG change their color according to the theme's primary color. In this library, the main folder is the lib folder. In this lib folder, we have all the primary components of the theme. By using these components you can set your app's layout, theme color and style, sidebar menu style, and a lot more things. You can check all the components of this library in the below screenshot.

You can use the components library like the below-shown code. AppsContainer belongs to the components library. That we are using here in the code by importing it from the library import AppsContainer from '@crema/components/AppsContainer'; We can use all components from the components library like this.

import React, { useState } from 'react';
import { useIntl } from 'react-intl';
import { ChatSideBar, ChatContent} from '@crema/modules/apps/Chat';
import { useGetDataApi } from '@crema/utility/APIHooks';
import AppsContainer from '@crema/components/AppsContainer'; 

const Chat = () => {
  const [selectedUser, setSelectedUser] = useState(null);

  const [{ apiData: connectionList, loading }, { setData: setConnectionData }] =
    useGetDataApi('/api/chatApp/connections', []);

  const { messages } = useIntl();
  return (
    <AppsContainer
      title={messages['chatApp.chat'].toString()}
      sidebarContent={
        <ChatSideBar
          selectedUser={selectedUser}
          setSelectedUser={setSelectedUser}
          connectionList={connectionList}
          loading={loading}
        />
      }
    >
      <ChatContent
        selectedUser={selectedUser}
        setSelectedUser={setSelectedUser}
        setConnectionData={setConnectionData}
      />
    </AppsContainer>
  );
};

export default Chat;