[FE] Develop Core UI Components for Ansopedia Web App (using @legendapp/state and Sass)

Description

This task involves creating essential UI components for the Ansopedia web app using Next.js and leveraging the following technologies:

Component Library: Develop reusable components like Button, Typography, Modal, Badges, and Avatar.
State Management: Integrate @legendapp/state for managing component state.
Styling: Utilize Sass for preprocessor-based styling of the components.
Folder Structure: Establish a well-organized folder structure to house the components and their styles.

Component Details:

Button: Implement a versatile button component with various styles (e.g., primary, secondary, outline).
Input: Implement a Input component using @legendstate
Typography: Create styled text elements like headings, paragraphs, and links with proper hierarchy and responsiveness.
Modal: Develop a modal component for displaying pop-up content.
Badges: Implement badges to visually highlight information.
Avatar: Create an avatar component to display user profile pictures or initials.

State Management:

Utilize @legendapp/state to manage component state effectively, ensuring data consistency and reactivity.

Styling with Sass:

Employ Sass for component styling, allowing for cleaner syntax, variables, mixins, and nested selectors.

Folder Structure:

src
    components
        ui
            Button
                Button.jsx
                button.scss
            ...

Each component will reside in its own directory with separate files for the component logic (.jsx) and styling (.module.scss).
@legendapp/state will be used to manage component state as needed (e.g., button state for active/disabled).
Sass will provide features like variables, mixins, and nesting for efficient and maintainable styling.

Additional Information:

By developing these core UI components, we establish a foundation for building a visually appealing and interactive Ansopedia web app.