@prom-ui/json-view
v1.3.0
Published
json-view ui blocks
Downloads
46
Readme
Views
- Banner
- ButtonMore
- CountDown
- EmptySpace
- ListOfBanners
- ListOfLinks
- ListOfLinksAside
- ListOfTile
- ListOfTileMini
- Paragraph
- TitleBold
- TitleH3
Пример
src путь emoji можно взять с таблицы
import { Box } from '@prom-ui/core/Box';
import { AllJsonView } from '@prom-ui/json-view/AllJsonView';
const json = {
"sidebar": [
{
"view": "TitleBold",
"props": {
"text": "🔥 Топчик",
"link": "https://prom.ua"
}
},
{
"view": "ListOfLinksAside",
"props": {
"list": [
{
"link": "https://prom.ua",
"text": "Я хочу 97% Здоровья"
},
{
"link": "https://prom.ua",
"text": "Я хочу 97% Здоровья"
},
{
"link": "https://prom.ua",
"text": "Я хочу 97% Здоровья"
}
]
}
}
],
"content": [
{
"view": "Banner",
"props": {
"image": "https://picsum.photos/940/300",
"link": "https://prom.ua",
"alt": "Я хочу 97% Здоровья"
}
},
{ "view": "EmptySpace" },
{ "view": "EmptySpace" },
{ "view": "EmptySpace" },
{
"view": "CountDown",
"props": {
"title": "до Нового року залишилось:",
"date": "2022-01-01"
}
},
{ "view": "EmptySpace" },
{ "view": "EmptySpace" },
{ "view": "EmptySpace" },
{ "view": "EmptySpace" },
{
"view": "ListOfBanners",
"props": {
"list": [
{
"image": "https://picsum.photos/460/100",
"link": "https://prom.ua",
"alt": "Я хочу 97% Здоровья"
},
{
"image": "https://picsum.photos/460/100",
"link": "https://prom.ua",
"alt": "Я хочу 97% Здоровья"
}
]
}
},
{ "view": "EmptySpace" },
{
"view": "TitleH3",
"props": {
"text": "🛒 Все в одному магазині",
"link": "https://prom.ua"
}
},
{
"view": "ListOfTileMini",
"props": {
"list": [
{
"link": "https://prom.ua",
"image": "https://picsum.photos/220/220",
"text": "Хлебобулочные, кондитерские изделия"
},
{
"link": "https://prom.ua",
"image": "https://picsum.photos/220/220",
"text": "Хлебобулочные, кондитерские изделия"
},
{
"link": "https://prom.ua",
"image": "https://picsum.photos/220/220",
"text": "Хлебобулочные, кондитерские изделия"
}
]
}
},
{ "view": "EmptySpace" },
{
"view": "ListOfLinks",
"props": {
"list": [
{
"link": "https://prom.ua",
"text": "Я хочу 97% Здоровья"
},
{
"link": "https://prom.ua",
"text": "Я хочу 97% Здоровья"
},
{
"link": "https://prom.ua",
"text": "Я хочу 97% Здоровья"
}
]
}
},
{ "view": "EmptySpace" },
{
"view": "TitleH3",
"props": {
"text": "🥚 В холодильник",
"link": "https://prom.ua"
}
},
{
"view": "ListOfTile",
"props": {
"list": [
{
"link": "https://prom.ua",
"image": "https://picsum.photos/440/440",
"text": "Хлебобулочные, кондитерские изделия"
},
{
"link": "https://prom.ua",
"image": "https://picsum.photos/440/440",
"text": "Хлебобулочные, кондитерские изделия"
},
{
"link": "https://prom.ua",
"image": "https://picsum.photos/440/440",
"text": "Хлебобулочные, кондитерские изделия"
}
]
}
},
{
"view": "ButtonMore",
"props": {
"link": "https://prom.ua",
"text": "Показать еще"
}
}
]
};
<Box box-background='black-100' box-padding='s'>
<AllJsonView data={json} />
</Box>