1.0.9 • Published 6 months ago

@roodiroot/zap-ui v1.0.9

Weekly downloads
-
License
MIT
Repository
-
Last release
6 months ago

Zap UI

Zap UI это легкая в использовании UI библиотека, разработанная для совместной работы с React. Проект ориентирован на обеспечение удобства разработки пользовательских интерфейсов с использованием популярного фреймворка React и интеграции стилей с помощью Tailwind CSS..

Содержание

Использование:

Установите npm-пакет с помощью команды:

$ npm i -D @roodiroot/zap-ui

Далее необходимо инициализировать свой проект:

$ npx @roodiroot/zap-ui init

Это создаст фаил конфигурации в корне проекта, в нем укажите актуальный путь для установки компонентов:

{
    "contentPath": "src/components/ui"
}

Разработка

Требования

Для установки и запуска проекта, необходим React, а так же установленная библиотека TailwindCss.

Установка компонентов

Для установки элементов, выполняйте команды:

$ npx @roodiroot/zap-ui add <Название элемента>

Названия компонентов

Элементы

elements-biglink

$ npx @roodiroot/zap-ui add elements-biglink
<div className='hidden sm:mb-8 sm:flex sm:justify-center'>
  <BigLink
    onClick={() => console.log("hello world")}
    text={"Узнать больше про телескоп Habble"}
  />
</div>

elements-button

$ npx @roodiroot/zap-ui add elements-button
<Button onClick={() => console.log("hello world")} variant='link' arrow>
  Hello
</Button>

elements-input

$ npx @roodiroot/zap-ui add elements-input
<InputCastom placeholder='Введите ваш номер телефона' required />

Главные экраны

hello-simple-center

$ npx @roodiroot/zap-ui add hello-simple-center
<div className=''>
  <SimpleCenter
    h1='Бесплатный онлайн перевод с английского'
    description='Получите перевод миллионов слов и выражений в направлении русский-английский и реальные примеры употребления благодаря нашей технологии.'
    blur_elements
    biglink='Узнать больше про телескоп Habble'
    biglink_action={() => console.log("biglink")}
    button_link_text='Смотреть далее'
    button_link_action={() => console.log("button_link_action")}
    button_one_text='Консультация'
    button_one_action={() => console.log("button_one_action")}
  />
</div>

hello-simple-gallery

$ npx @roodiroot/zap-ui add hello-simple-gallery
<SimpleGallery
  h1='EDM фестиваль &laquo;Энергия&nbsp;Будущего&raquo;'
  description='Здесь музыкальные ноты переплетаются в гармонии, сценические представления становятся настоящими шедеврами, а мастер-классы от мировых мастеров искусства разглашают тайны творческого мастерства. Присоединяйтесь к этому уникальному событию, где культуры соединяются в танце, звуке и красках, создавая неповторимую симфонию Всемирного Слияния!'
  img_list={[img1, img2, img3, img4, img5, img6, img7]}
  biglink='Узнать больше про телескоп Habble'
  biglink_action={() => console.log("biglink")}
  button_link_text='Смотреть далее'
  button_link_action={() => console.log("button_link_action")}
  button_one_text='Консультация'
  button_one_action={() => console.log("button_one_action")}
  pattern={pattern}
/>

hello-simple-center-diagonal

$ npx @roodiroot/zap-ui add hello-simple-center-diagonal
<div>
  <SimpleCenterVariantDiagonal
    h1='Бесплатный онлайн перевод с английского'
    description='Получите перевод миллионов слов и выражений в направлении русский-английский и реальные примеры употребления благодаря нашей технологии.'
    img={img}
    biglink='Узнать больше про телескоп Habble'
    biglink_action={() => console.log("biglink")}
    button_link_text='Смотреть далее'
    button_link_action={() => console.log("button_link_action")}
    button_one_text='Консультация'
    button_one_action={() => console.log("button_one_action")}
  />
</div>

Блоки информации

info-block-earth

$ npx @roodiroot/zap-ui add info-block-earth
<InfoSectionFive
  title='Опыт фестиваля также привносит непередаваемое чувство общности — будьте частью единого течения людей'
  description='Наши музыкальные фестивали обещают каждому участнику несравненные впечатления, превращая визит в незабываемое приключение. Вас окутает магия музыки, когда вы окунетесь в вихрь разнообразных жанров — от мистических мелодий, создающих волнующую атмосферу, до динамичных ритмов, которые поднимут вас вверх.'
  img={img7}
  pattern={pattern}
/>

info-block-mars

$ npx @roodiroot/zap-ui add info-block-mars
<InfoSectionFour
  title='Впечатления'
  description='Сцены, наполненные талантливыми артистами со всего мира, подарят вам уникальные сценические перформансы, которые оставят невероятные впечатления и станут источником вдохновения.'
  supdescription='Будте частью единого течения, объединенных любовью к музыке. Энергия толпы, единение в танце создают уникальную атмосферу, которую нельзя описать, но которую можно почувствовать в каждой ноте.'
  img_list={[img5, img2, img3, img4]}
/>

info-block-mercury

$ npx @roodiroot/zap-ui add info-block-mercury
<InfoSectionOne
  title='Эксплозия танцевальных ритмов'
  description='Готовьтесь к танцевальной эксплозии, которая оставит след в вашем сердце на всегда! Погрузитесь в атмосферу энергии и вибраций!'
  button_link_text='Смотреть далее'
  button_link_action={() => console.log("button_link_action")}
  img={img1}
  adv_list={[
    {
      title: "Ощути Энергию Танцпола!",
      description:
        "Впечатляющие световые инсталляции: 300 000 люмен освещения. Ждут каждого кто попадет на фест.",
      first: "Эксклюзивные DJ-сеты",
      second: "4 звездных хедлайнера",
    },
    {
      title: "Билет в Мир Звуковых Вибраций!",
      description:
        "Беспрецедентная атмосфера фестиваля под открытым небом, 20 000 метров квадратных открытой площади.",
      first: "VIP-зона: 360-градусов",
      second: "Нон-стоп танцы",
    },
    {
      title: "Заклинание Электронного Рая!",
      description:
        "Уникальные музыкальные коллаборации во всей красе. Более 15 дуэтов на каждой сцене.",
      first: "Chill-out зона",
      second: "3 секретных гостя",
    },
  ]}
/>

info-block-upiter

$ npx @roodiroot/zap-ui add info-block-upiter
<InfoSectionTree
  title='Три сцены поражающие воображение'
  subtitle='Локации'
  description='От энергичных ритмов на сцене до мистических мелодий и беззаветного веселья, каждая сцена — это отдельная история, созданная для Вас.'
  img={img3}
  adv_list={[
    {
      Icon,
      name: 'Сцена "ЭнергоБит"',
      description:
        "Под мощными звуками. Тут каждый бит – это заряд энергии, каждая нота – вихрь эмоций. Готовы ли вы к музыкальному эксплозиву?",
    },
    {
      Icon,
      name: '"Созвучия Небес"',
      description:
        "Тут встречаются мелодии, которые поднимут вас выше облаков. Погружайтесь в треки, созданные для кайфа и гармонии на фоне ночного неба.",
    },
    {
      Icon,
      name: '"Солнечный Гараж"',
      description:
        "Здесь хаус-ритмы сливаются с Вами, создавая атмосферу беззаветной радости и позитивных вибраций. Забудьте о заботах живите здесь и сейчас.",
    },
  ]}
/>

info-block-venus

$ npx @roodiroot/zap-ui add info-block-venus
<InfoSectionTwo
  subtitle='&laquo;Энергии&nbsp;Будущего&raquo;'
  title='Для чего Вам быть c&nbsp;нами?'
  description='Встретьте с нами расслабление и умиротворение, где живая музыка и звуки природы сочетаются, чтобы создать волнующую симфонию душевного спокойствия.'
  adv_list={[
    {
      name: "Эмоции",
      description:
        "Фестиваль - отличный способ оторваться от рутины, погрузиться в энергию музыки и позволить себе окунуться в атмосферу веселья и радости.",
      Icon: Icon,
    },
    {
      name: "Коммуникации",
      description:
        "Возможность познакомиться с новыми людьми, поделиться своими впечатлениями и создать свою неповторимую историю фестиваля в компании единомышленников.",
      Icon: Icon,
    },
    {
      name: "Инсталляции",
      description:
        "Мы предлагаем уникальные и вдохновляющие искусственные инсталляции и интерактивные зоны, где каждый гость может стать частью творческого процесса.",
      Icon: Icon,
    },
    {
      name: "Кулинария",
      description:
        "Гостям доступны различные кулинарные площадки с разнообразными блюдами из мировой кухни, чтобы полностью погрузиться во вкусовые сенсации вместе с музыкой.",
      Icon: Icon,
    },
  ]}
/>

Call to action блоки

cta-earth

$ npx @roodiroot/zap-ui add cta-earth
<СTASectionImg
  head='Теперь вперед? Навстречу мечте и музыке.'
  description='Массовое празднество, показ достижений музыкального, театрального, эстрадного.'
  img={img}
  button_link_text='Смотреть далее'
  button_link_action={() => console.log("button_link_action")}
  button_one_text='Консультация'
  button_one_action={() => console.log("button_one_action")}
  pattern={pattern}
/>

Блоки подписки на новости

newsletter-sections

$ npx @roodiroot/zap-ui add newsletter-sections
<NewsletterSectionCenter
  header='Хотите персональную консультацию?'
  description='Введите ваш номер телефона, чтобы получить подробную информацию и персональные рекомендации от нашей команды.'
  pattern={pattern}
/>

Блоки отзывов

testimonials-kuiper-belt

$ npx @roodiroot/zap-ui add testimonials-kuiper-belt
<TestemonialsKuiperBeltBlock
  title='Отзывы'
  description='Почитайте что о нас пишут учасники прошлой &laquo;Энергии&nbsp;Будущего&raquo;'
  testimonials_list={[
    {
      text: "“Фестиваль был просто невероятен! Отличная организация, потрясающие артисты и энергия, которая заставляла танцевать до утра. Обязательно приду в следующем году!”",
      name: "Екатерина",
      date: "28 лет",
      img: face,
    },
    {
      text: "“Не могу перестать вспоминать тот момент, когда звуки музыки слились с лучами заката. Фестиваль создал магию, которую трудно передать словами. Это был не просто фестиваль, а настоящее волшебство.”",
      name: "Алексей",
      date: "34 года",
      img: face,
    },
    {
      text: "“Отличное сочетание стилей на разных сценах! Могла наслаждаться треками любимых артистов и открыть для себя новые таланты. Ожидаю следующий год с нетерпением!”",
      name: "Марина",
      date: "22 года",
      img: face,
    },
    {
      text: "“Впечатляющее световое шоу и звуковые эффекты на сцене 'Энергетический Эксплозив'. Это было как погружение в атмосферу будущего. Фестиваль на высшем уровне!”",
      name: "Денис",
      date: "31 год",
      img: face,
    },
    {
      text: "“Сцена 'Солнечные Лучи Гаража' просто волшебна! Танцевала, как будто никто не смотрит. Очень рада, что нашла это уютное место с хаусовыми вибрациями.”",
      name: "Анна",
      date: "25 лет",
      img: face,
    },
    {
      text: "“Отличное место для знакомства с новыми жанрами. 'Созвучия Небес' предоставили мне музыку, которую я раньше не слышал. Полный восторг от открытий!”",
      name: "Игорь",
      date: "29 лет",
      img: face,
    },
    {
      text: "“Идеальный фестиваль для тех, кто любит нестандартные музыкальные эксперименты. Организаторы умеют создавать уникальную атмосферу.”",
      name: "Наталья",
      date: "26 лет",
      img: face,
    },
    {
      text: "“Был на многих фестивалях, но этот выделяется атмосферой взаимопонимания и взаимодействия. Все – от посетителей до артистов – создают единое целое.”",
      name: "Артем",
      date: "32 года",
      img: face,
    },
    {
      text: "“Необычные декорации и арт-инсталляции добавили фестивалю уникальности. Чувствовала себя, как в мире искусства, где каждый уголок пронизан музыкой.”",
      name: "Ольга",
      date: "27 лет",
      img: face,
    },
  ]}
/>

Фото блоки

photo-content

$ npx @roodiroot/zap-ui add photo-content
<BigPhotoBlock img={img1} />

Команда проекта

Оставьте пользователям контакты и инструкции, как связаться с командой разработки.

Источники

Впереди только светлое будущее.

commander
@everything-registry/sub-chunk-789
1.0.9

6 months ago

1.0.8

6 months ago

1.0.7

6 months ago

1.0.6

6 months ago

1.0.5

6 months ago

1.0.4

6 months ago

1.0.3

6 months ago

1.0.2

6 months ago