delicious-strawberryui v1.0.2

Welcome to Strawberry UI

Welcome to the Strawberry UI repository, a vibrant and visually stunning UI library inspired by the sweet and juicy fruit - the strawberry.

Our goal with Strawberry UI is to incorporate the playful and energetic colors of a strawberry into its layout and design, creating a lively and engaging user interface. This library is made possible by the collaboration between Midjourney and ChatGPT platforms, leveraging the expertise of both products to create a unique and exciting UI experience.

One of the unique features of Strawberry UI is its integration with ChatGPT, which exposes prompts to guide users through the UI design process. This means that you can easily create beautiful and functional interfaces with the help of a powerful AI assistant.

Whether you are a designer, developer, or just someone who loves to create beautiful things, Strawberry UI has something to offer. With its intuitive and easy-to-use components, you can quickly build stunning UIs that are both visually appealing and highly functional.

We hope that you enjoy using Strawberry UI as much as we enjoyed creating it. If you have any feedback or suggestions, please feel free to reach out to us. Happy designing!

Components API

Music Widget

MusicWidget Component README File

The MusicWidget component is a styled component that displays a music player interface. The widget has a width of 350px and a height of 405px. It has the following subcomponents:

The MusicWidget component requires the following props:

The MusicWidget component uses the styled-components library for styling. The PropTypes library is also used to define the prop types for the component.

Login Page

LoginPage Component Documentation

LoginPage is a styled React component that provides a login form with two input fields (username and password), a submit button and a background image. It uses TextField component for the input fields.

The component has the following structure:

<LoginPage
  theme="light" // the color theme of the component ("light" or "dark")
  width={400} // the width of the component in pixels
  onSubmit={handleSubmit} // the callback function that is called when the form is submitted
/>

The component has the following subcomponents:

• Wrapper: the outermost container of the component that holds the background and the form.
• WrapperBackground: a transparent layer that covers the background image of the component.
• WrapperBorder: a gradient layer that covers the border of the component.
• Container: a container that holds the form and the background image.
• ContainerBg: a container that holds the background image.
• ContainerBorder: a gradient layer that covers the border of the form.
• Header: a container that holds the title of the component.
• LoginText: the title of the component.
• Form: the form that holds the input fields and the submit button.
• Row: a container that holds an input field and its icon.
• LoginButtonWrapper: the submit button.

The component can be styled using the following props:

• theme: the color theme of the component ("light" or "dark"). The default value is "light".
• width: the width of the component in pixels. The default value is 400 pixels.
• onSubmit: the callback function that is called when the form is submitted. The default value is an empty function.

Time Widget

TimeWidget Component

The TimeWidget component is a React component that displays a list of times in three separate columns that can be scrolled independently. The user can select a time by clicking on it, and the selected time will be highlighted in the center column. The component also includes a title and a selected time display.

Usage

To use the TimeWidget component, simply import it and use it like any other React component:

import { TimeWidget } from "./TimeWidget";

function MyApp() {
  return (
    <div>
      <TimeWidget />
    </div>
  );
}

Props

The TimeWidget component does not accept any props.

Styling

The TimeWidget component is styled using CSS-in-JS with styled-components. The following styled-components are exposed for customization:

• Container: styles the outermost container of the component.
• TitleContainer: styles the container for the component title.
• Title: styles the component title.
• ListContainer: styles the container for the time list.
• List: styles the individual columns of the time list.
• ListItem: styles the individual items in the time list.
• EmptyItem: styles the empty item in the center of the time list.
• SelectedContainer: styles the container for the selected time display.
• SelectedColumn: styles the individual columns in the selected time display.

To Do List

To Do List Component

This is a To Do List component built with React and styled-components, which allows users to add, edit and remove items from a list. The component has a customizable background and strawberry decorations.

Usage

1. Import the component:

import ToDoList from './ToDoList';

2. Render the component:

<ToDoList />

Props

The component accepts the following props:

Dependencies

This component depends on the following packages:

• React (v16.8.0 or higher)
• styled-components (v5.0.0 or higher)
• TextField component
• PrimaryButton component

Example

import React from 'react';
import ToDoList from './ToDoList';

function App() {
  return (
    <div>
      <ToDoList theme="light" />
    </div>
  );
}

export default App;

Calendar

Calendar Component

This is a React component that displays a calendar for a given month. The component has several customizable features such as theme, selected date and onDateChange function.

Usage

To use the Calendar component, you will need to import it into your React application and render it using the following syntax:

import Calendar from './path/to/Calendar';

function App() {
  return (
    <div>
      <Calendar />
    </div>
  );
}

export default App;

Props

The Calendar component accepts the following props:

Styling

The Calendar component can be styled using CSS. The following CSS selectors can be used to target specific elements:

Example

Here's an example of how to use the Calendar component with all props set to their default values:

import Calendar from './path/to/Calendar';

function App() {
  return (
    <div>
      <Calendar />
    </div>
  );
}

export default App;

Slider

Here is a short documentation for the Slider component:

Slider Component

The Slider component is a custom slider created with React and styled-components. It has a strawberry-shaped handle and two lines on each side to indicate the value range. The slider can be used to select a value within a range.

Props

• theme (optional): determines the color scheme of the slider. Possible values are 'dark' (default) and 'light'.

Example Usage

import Slider from './Slider';

function App() {
  return (
    <div>
      <Slider theme="dark" />
      <Slider theme="light" />
    </div>
  );
}

Pagination

Pagination Component Readme

The Pagination Component is a React component that can be used to render a pagination bar with clickable buttons for navigating through a list of pages.

Usage

The component can be imported and used in a React application like any other React component.

import Pagination from './components/Pagination';

function App() {
  const totalElements = 100;
  const elementsPerPage = 10;

  const handlePageChange = (pageIndex) => {
    console.log(`Navigating to page ${pageIndex}`);
  }

  return (
    <Pagination 
      totalElements={totalElements} 
      elementsPerPage={elementsPerPage} 
      onPageChange={handlePageChange} 
    />
  );
}

Props

The Pagination Component accepts the following props:

Styling

The Pagination Component uses styled-components for styling. The following styled components are used:

Each styled component has its own set of CSS rules that can be customized by passing props to the component. For example, to change the background color of the pagination bar, you can pass a theme prop with the value 'light':

<Pagination totalElements={100} elementsPerPage={10} onPageChange={handlePageChange} theme='light' />

TextField

TextField Component

The TextField component is a reusable input field component that can be used in a variety of React applications. It has the following features:

• Accepts an onSubmit function to handle form submission
• Accepts an onChange function to handle input changes
• Accepts a placeholder string to display a placeholder text in the input field
• Accepts a controlledValue prop to control the value of the input field from the parent component
• Can be set as a password field by setting the isPassword prop to true
• Can be set to use a light or dark theme by setting the theme prop to either 'dark' or 'light'

Usage

To use the TextField component in your React application, simply import it and use it like any other React component. Here's an example:

import React, { useState } from 'react';
import TextField from './TextField';

const MyForm = () => {
  const [inputValue, setInputValue] = useState('');

  const handleSubmit = (value) => {
    console.log('Submitted value:', value);
  };

  const handleChange = (value) => {
    setInputValue(value);
  };

  return (
    <form onSubmit={(e) => e.preventDefault()}>
      <TextField
        onSubmit={handleSubmit}
        onChange={handleChange}
        placeholder="Enter your name"
        controlledValue={inputValue}
        theme="light"
      />
    </form>
  );
};

Props

The TextField component accepts the following props: