react-app-shell

A React component library providing UI shell components for Initia applications.

Table of Contents

• Features
• File Structure
• Usage
• Styles
• Components
  • AppMenu
  • InitiaTerms
• License

Features

• AppMenu: Navigation menu component with app selection and subdomain support
• InitiaTerms: Terms and conditions modal component
• InitiaCheckIcon: Check icon component for UI consistency
• TypeScript support with full type definitions
• CSS modules for scoped styling
• Lightweight and tree-shakeable

File Structure

src/
├── index.ts                    # Main entry point
├── globals.css                 # Global styles
├── utils.ts                    # Shared utilities
├── initia-app-menu/           # App menu component
│   ├── index.tsx
│   ├── styles.css
│   ├── constants.ts
│   ├── types.ts
│   └── utils.ts
├── initia-check-icon/         # Check icon component
│   ├── index.tsx
│   └── styles.css
└── initia-terms/              # Terms modal component
    ├── index.tsx
    ├── styles.css
    ├── constants.ts
    └── utils.ts

Usage

Import the components to where you desire

Styles

Import the style into globals.css file

@import url("@initia/react-app-shell/dist/index.css");

Components

AppMenu

• params
  • app: current app e.g. "app" (so that this app will be rendered as checked)
  • subdomain (optional): subdomain to your app url e.g. "testnet" for "https://app.testnet.initia.xyz"

InitiaTerms

• params
  • children: ReactNode

License

MIT License