frontend-layout v1.26.0

Frontend Layout - ff

Installation

With npm:

npm install frontend-layout

Components

Layout

import { Layout } from "frontend-layout";
import "frontend-layout/dist/style.css"

export function App() {
  return (
    <main>

      <Layout
        userName={"Alejandro Sanchez"}
        userImg={""}
      >
        <h1> Content </h1>
      </Layout>

    </main>
  );
}

Modal Manager

import { ModalManager } from "frontend-layout";
import "frontend-layout/dist/style.css"

// width and height is with px
// Example

export function App() {
    const [open, setOpen] = useState(false);

    return (
        <main>
            <ModalManager width="400px" height='400px' isOpen={open} onClose={() => setOpen(false)}>
                <h1> Content </h1>
            </ModalManager>

            <button onClick={() => setOpen(true)}> Open Modal </button>
        </main>
    );
}

Loader

import { Loader } from "frontend-layout";
import "frontend-layout/dist/style.css"

export function App() {
  return (
    <Loader/>
  );
}

404

import { NotFound } from "frontend-layout";
import "frontend-layout/dist/style.css"

export function App() {
  return (
    <NotFound url={'initial page | example : http://localhost:5173'}/>
  );
}

500

import { Error500 } from "frontend-layout";
import "frontend-layout/dist/style.css"

export function App() {
  return (
    <Error500 />
  );
}