Raizora Lab

Structure

The follows a typical Astro project structure. You'll find the following key directories and files:

/
├── public/
├── src/
│   └── pages/
│       └── index.astro
└── package.json

• src/pages/: Contains .astro and .md files. Each file becomes a route in your project based on its name.
• src/components/: Ideal for placing your Astro/React/Vue/Svelte/Preact components.
• public/: For static assets such as images that you want to serve directly.

Commands

All commands are run from the root of the project, from a terminal:

Command	Action
npm install	Installs dependencies
npm run dev	Starts local dev server at localhost:3000
npm run build	Build your production site to ./dist/
npm run preview	Preview your build locally, before deploying
npm run astro ...	Run CLI commands like astro add, astro check
npm run astro --help	Get help using the Astro CLI

Learn more - Explore more through Astro's official documentation.

---

Components

• Text Component
  A versatile and reusable component for handling text across your project, ensuring consistency and easy customization.

• HTML Tags: Easily change the HTML element (like p, h1, span, a) using the tag prop, with p being the default.

• Variants: Pick from preset text styles (such as displayXL or textBase) for a consistent look.

• Custom Classes: Add or adjust styles with the class prop.

• Accessibility: Customize with additional props like id, href, title, and style.

• Content Slot: Add any content inside the component, including optional left and right icons. Example usage:

<Text tag="h1" variant="displayXL" class="text-center">
  Welcome to the new version!
</Text>

• Button Component
  A customizable button component with options to fit your design needs:

• Variants: Choose from predefined styles like primary (dark background) and secondary (lighter background), with support for dark mode.

• Sizes: Select small or medium for different button heights and padding.

• Gaps: Control the spacing between content with the gapSize prop (either small or medium).

• Custom Classes: Apply additional styles using the class prop.

• Slots: Include icons or extra content with optional left-icon and right-icon slots.
  Example usage:

<Button size="small" variant="primary">Primary small</Button>

• Wrapper Component
  A flexible layout component that helps with consistent spacing and alignment.

• Variants: The default standard variant includes responsive widths, centered content, and padding.

• Custom Classes: Add or change styles with the class prop.

• Content Slot: Easily add any child components or content inside.

<Wrapper variant="standard">
Your content goes here
</Wrapper>