@neoskop/enc-ui v2.0.0

@neoskop/enc-ui

@neoskop/enc-ui is a React UI library built with TypeScript and bundled using tsup. It provides a set of reusable components and hooks for building user interfaces in React applications.

Installation

To install the library, use one of the following package managers:

pnpm install @neoskop/enc-ui
# or
yarn add @neoskop/enc-ui
# or
npm add @neoskop/enc-ui

Usage

To use the components and hooks provided by @neoskop/enc-ui, import them into your React application:

Header for enercity

import { EnercityHeader } from "@neoskop/enc-ui/components/header/enercity";
import '@neoskop/enc-ui/components/header/enercity/index.css';

const App = () => {
  return (
    <div>
      <EnercityHeader />
      <h1>Hello, World!</h1>
    </div>
  );
};

Footer for enercity

import { EnercityFooter } from "@neoskop/enc-ui/components/footer/enercity";
import '@neoskop/enc-ui/components/footer/enercity/index.css';

const App = () => {
  return (
    <div>
      <h1>Hello, World!</h1>
      <EnercityFooter />
    </div>
  );
};

Custom Header

import { Search, Person } from "@neoskop/enercity-icons";
import { Header, HeaderAddon, type HeaderProps } from "@neoskop/enc-ui/components/header";
import '@neoskop/enc-ui/components/header/enercity/index.css';

export const config: HeaderProps['config'] = {
  mainItems: [
    {
      id: 'home',
      href: '/',
      title: 'Home',
    },
  ],
  preHeaderLinks: [
    {
      current: 'page',
      href: '/pre-header-link-1',
      id: 'pre-header-link-1',
      title: 'Pre Header Link 1',
    },
  ],
  targetGroups: [
    {
      current: 'page',
      href: '/target-group-1',
      id: 'target-group-1',
      title: 'Target Group 1',
    },
  ],
};

export const EnercityHeader = () => {
  return (
    <Header
      addonsSlot={
        <>
          <HeaderAddon
            iconSlot={<Search height={20} width={20} />}
            href="https://www.enercity.de/suche"
          >
            Suche
          </HeaderAddon>
          <HeaderAddon
            iconSlot={<Person height={20} width={20} />}
            href="https://www.enercity.de/login"
          >
            Login
          </HeaderAddon>
        </>
      }
      config={config}
    />
  );
};