@prom-ui/json-view v1.3.0

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>