Lazydev

BETA

Docs

Dialog

Type A

Ranglar va ikonkalar ixtiyoriy! O'zingizga ma'qul rangni qo'llashingiz mumkin. Kodni olmoqchi bo'sangiz Show code tugmasini bosing

Show code

import React, { useState } from 'react';
import { GrFormClose } from 'react-icons/gr';

export const TypeA = () => {
  const [activeDialog, setActiveDialog] = useState(false);

const dialog = () => {
setActiveDialog(true);
};

const CloseDialog = () => {
setActiveDialog(false);
};

const defaultButton =
'rounded-xl py-2 px-4 shadow-md text-sm duration-300 active:bg-opacity-80 ease-in-out bg-[#1a5cff] md:text-sm text-white hover:shadow-md hover:shadow-blue-500/50 ';

const buttonBorder =
'rounded-xl py-2 px-4 shadow-md text-sm duration-300 border border-[#1a5cff] active:bg-opacity-80 ease-in-out bg-transparent md:text-sm text-[#1a5cff] ';

const buttonTransparent =
'rounded-xl py-2 px-4 shadow-md text-sm duration-300 ease-in-out bg-blue-500 bg-opacity-30 md:text-sm text-[#1a5cff] ';

return (

<>
  <div
    className={
      activeDialog
        ? 'fixed top-0 left-0 right-0 bottom-0 flex items-center justify-center bg-black bg-opacity-50 '
        : 'hidden'
    }>
    <div className="relative w-[15rem] md:w-[25rem] p-6 bg-white shadow-lg rounded-xl">
      <div
        onClick={CloseDialog}
        className="absolute -top-1 -right-1 hover:top-0 hover:right-0 p-1.5 rounded-lg bg-white shadow-lg cursor-pointer duration-200">
        <GrFormClose className="text-primary" />
      </div>
      <img
        className="mx-auto w-28 mb-2"
        src="https://media0.giphy.com/media/v8Vux9WxXcnXEnOGn1/giphy.gif?cid=ecf05e47zn1myog0zrkd309o2vq605ztag8vqqu9v1zguc7t&rid=giphy.gif&ct=s"
        alt=""
      />
      <div className="space-y-1 text-center text-primary">
        <h3 className="text-lg font-semibold">
          This is a Type A dialog example!
        </h3>
        <p className="text-sm">Save a code or copy and paste your project. </p>
      </div>
      <div className="flex items-center justify-center space-x-2 mt-4">
        <button className={buttonBorder}>Take code</button>
        <button className={buttonTransparent}>Scan pages</button>
      </div>
    </div>
  </div>
  <button onClick={dialog} className={defaultButton}>
    Open Dialog
  </button>
</>
);

Type B

Ranglar va ikonkalar ixtiyoriy! O'zingizga ma'qul rangni qo'llashingiz mumkin. Kodni olmoqchi bo'sangiz Show code tugmasini bosing

Show code

import React, { useState } from 'react';
import { GrFormClose } from 'react-icons/gr';

export const TypeB= () => {
  const [activeDialog, setActiveDialog] = useState(false);

const dialog = () => {
setActiveDialog(true);
};

const CloseDialog = () => {
setActiveDialog(false);
};

const defaultButton =
'rounded-xl py-2 px-4 shadow-md text-sm duration-300 active:bg-opacity-80 ease-in-out bg-[#1a5cff] md:text-sm text-white hover:shadow-md hover:shadow-blue-500/50 ';

const emojiStyle = 'text-xl md:text-2xl p-2 bg-pink-100 rounded-lg hover:bg-pink-200 cursor-pointer '

return (

<>
  <div
    className={
      activeDialog
        ? 'fixed top-0 left-0 right-0 bottom-0 flex items-center justify-center bg-black bg-opacity-50 '
        : 'hidden'
    }>
    <div className="relative w-[15rem] md:w-[25rem] p-6 bg-white shadow-lg rounded-xl space-y-2">
      <div className="flex items-center justify-between">
        <h4 className="text-sm md:text-base font-semibold">Question*</h4>
        <GrFormClose onClick={CloseDialog} className="cursor-pointer" />
      </div>
      <p>How would you rate this ui?*</p>
      <div className="flex items-center justify-between">
        <span className={emojiStyle}>🥴</span>
        <span className={emojiStyle}>😕</span>
        <span className={emojiStyle}>🙃</span>
        <span className={emojiStyle}>🙂</span>
        <span className={emojiStyle}>😇</span>
        <span className={emojiStyle}>😍</span>
      </div>
    </div>
  </div>
  <button onClick={dialog} className={defaultButton}>
    Open Dialog
  </button>
</>
); };

Type C | Login

Ranglar va ikonkalar ixtiyoriy! O'zingizga ma'qul rangni qo'llashingiz mumkin. Kodni olmoqchi bo'sangiz Show code tugmasini bosing

Show code

import React, { useState } from 'react';
import { GrFormClose } from 'react-icons/gr';
import { BiUser, BiLockOpenAlt } from 'react-icons/bi';

export const TypeC = () => {
  const [activeDialog, setActiveDialog] = useState(false);

  const dialog = () => {
    setActiveDialog(true);
  };

  const CloseDialog = () => {
    setActiveDialog(false);
  };

  const defaultButton =
    'w-full rounded-xl py-2 px-4 shadow-md text-sm duration-300 active:bg-opacity-80 ease-in-out bg-[#1a5cff] md:text-sm text-white hover:shadow-md hover:shadow-blue-500/50 ';

  return (
    <>
      <div
        className={
          activeDialog
            ? 'fixed top-0 left-0 right-0 bottom-0 flex items-center justify-center bg-black bg-opacity-50 '
            : 'hidden'
        }>
        <div className="relative w-[15rem] md:w-[25rem] p-6 bg-white shadow-lg rounded-xl">
          <div
            onClick={CloseDialog}
            className="absolute -top-1 -right-1 hover:top-0 hover:right-0 p-1.5 rounded-lg bg-white shadow-lg cursor-pointer duration-200">
            <GrFormClose className="text-primary]" />
          </div>
          <div className="space-y-2 md:space-y-4">
            <h3 className="text-sm md:text-base font-semibold text-center">
              Welcome to Lazydev!
            </h3>
            <div className="relative flex items-center rounded-xl bg-gray-200 group">
              <input
                id="username"
                className="outline-none flex flex-grow p-3 bg-transparent rounded-l-xl px-4 text-xs duration-300"
                type="text"
                placeholder="username"
              />
              <div className="absolute top-0 right-0 duration-300 rounded-xl bg-transparent p-2 group-focus-within:-top-2 group-focus-within:-right-2 group-focus-within:bg-[#18191c]">
                <BiUser className="text-primary group-focus-within:text-white" />
              </div>
            </div>
            <div className="relative flex items-center rounded-xl bg-gray-200 group">
              <input
                id="password"
                className="outline-none flex flex-grow p-3 bg-transparent rounded-l-xl px-4 text-xs duration-300"
                type="password"
                placeholder="password"
              />
              <div className="absolute top-0 right-0 duration-300 rounded-xl bg-transparent p-2 group-focus-within:-top-2 group-focus-within:-right-2 group-focus-within:bg-[#18191c]">
                <BiLockOpenAlt className="text-primary group-focus-within:text-white" />
              </div>
            </div>
            <div className="flex items-center justify-between">
              <div className="flex items-center space-x-2">
                <input
                  id="remember"
                  type="checkbox"
                  className="w-4 h-4 border border-gray-300 rounded-lg bg-gray-50 focus:ring-3 focus:ring-blue-500"
                  required
                />
                <small className="text-blue-500 cursor-pointer">
                  Remember me
                </small>
              </div>
              <small className="text-gray-500 cursor-pointer">
                Forgot password?
              </small>
            </div>
            <button className={defaultButton}>Sign In</button>
            <span className="flex items-center space-x-1 w-fit mx-auto">
              <p className="text-xs">New here?</p>
              <a
                className="text-xs text-blue-600 active:text-blue-400"
                href="#!">
                Create new Account
              </a>
            </span>
          </div>
        </div>
      </div>
      <button onClick={dialog} className={defaultButton}>
        Open Dialog
      </button>
    </>
  );
};

Type C | Scroll

Ranglar va ikonkalar ixtiyoriy! O'zingizga ma'qul rangni qo'llashingiz mumkin. Kodni olmoqchi bo'sangiz Show code tugmasini bosing

Introduction

What is a Lazydev?

Lazydev is a framework of UI components created with React.js to make projects easily and with a unique and pleasant style, lazydev is created from scratch and designed for all types of developers from the frontend lover to the backend who wants to easily create their visual approach to the end-user We are focused on streamlining the work of the programmer by giving components created in their entirety and with independent customization and very easy to implement, so creativity is in our hands but we do not neglect that each project is different both visually and in its ecosystem Lazydev does not have a design line such as other component frameworks based on Material Design, we believe that there are already emaciated frameworks that look visually and in UI / UX and we don't want to be one more of the bunch, apart from that we love to create and design new experiences and surprise you with new elements or details that we can only do by being visually free.

Why Lazydev?

Lazydev is a relatively new framework with a refreshing design and in the latest trends, lazydev based on react.js which means that we go hand in hand with one of the most popular javascript frameworks in the world and with a huge community with which you will have all the help and documentation to create and make your project

-Lazydev - unlike many frameworks, is designed from scratch and we are not anchored to any design line, this is something great since your project is going to be unique and very different from the others

- We are focused on the quick and easy creation of projects giving a beautiful visual line but without forgetting the personalization and independence of the developer

- Lazydev uses native css variables for better customization and production changes such as changing to dark theme or changing the main color of the entire application with few javascript lines

- Lazydev is a frame designed to have a great visual impact and that is always in trend with respect to design.

- An open-source community to create, improve and correct any component or function.

Show code

import React, { useState } from 'react';
import { GrFormClose } from 'react-icons/gr';

export const TypeD = () => {
  const [activeDialog, setActiveDialog] = useState(false);

const dialog = () => {
setActiveDialog(true);
};

const CloseDialog = () => {
setActiveDialog(false);
};

const defaultButton =
'rounded-xl py-2 px-4 shadow-md text-sm duration-300 active:bg-opacity-80 ease-in-out bg-[#1a5cff] md:text-sm text-white hover:shadow-md hover:shadow-blue-500/50 ';

return (

<>
  <div
    className={
      activeDialog
        ? 'fixed top-0 left-0 right-0 bottom-0 flex items-center justify-center bg-black bg-opacity-50 '
        : 'hidden'
    }>
    <div className="relative w-[90%] md:w-[35rem] lg:w-[45rem] h-[60%] md:h-[30rem] bg-white shadow-lg rounded-xl space-y-2 overflow-y-scroll">
      <div className="sticky z-20 top-0 left-0 right-0 flex items-center justify-between bg-white shadow-sm py-4 px-6">
        <h1 className="text-sm md:text-2xl font-semibold">Introduction</h1>
        <GrFormClose onClick={CloseDialog} className="cursor-pointer" />
      </div>
      <div className="py-2 px-6">
        <div>
          <h2 className="text-base md:text-lg font-semibold opacity-80">
            Your Heading.
          </h2>
          <p className="text-xs md:text-sm font-medium text-gray-500">
            Your paragraph.
          </p>
        </div>
      </div>
    </div>
  </div>
  <button onClick={dialog} className={defaultButton}>
    Open Dialog
  </button>
</>
); };

Subscribeto our Weekly Newsletter

Lazydev

About Lazy.dev

Why Lazy.dev?

FAQ

Resources

Documentation

GitHUb

Privacy

Help

Issues

FAQ

Team

.Soft Group

Created By Anvarov

Dialog

On this page

Type A

This is a Type A dialog example!

Type B

Question*

Type C | Login

Welcome to Lazydev!

Type C | Scroll

Introduction

What is a Lazydev?

Why Lazydev?

Subscribeto our Weekly Newsletter

Lazydev

Resources

Help

Team