spoko-design-system 0.2.23 → 0.2.24

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (126) hide show
  1. package/.github/dependabot.yml +11 -11
  2. package/.github/todo.yml +3 -3
  3. package/.github/workflows/deploy.yml +39 -39
  4. package/.stackblitzrc +5 -5
  5. package/.vscode/extensions.json +5 -5
  6. package/.vscode/launch.json +11 -11
  7. package/.vscode/settings.json +5 -5
  8. package/LICENSE +21 -21
  9. package/README.md +113 -113
  10. package/astro-i18next.config.mjs +17 -17
  11. package/astro-i18next.config.ts +10 -10
  12. package/astro.config.mjs +141 -141
  13. package/dev-dist/sw.js +91 -91
  14. package/dev-dist/workbox-c676b6d3.js +3391 -3391
  15. package/index.ts +6 -6
  16. package/package.json +95 -95
  17. package/public/fonts/lg.svg +53 -53
  18. package/public/fonts/vwhead-bold-demo.html +549 -549
  19. package/public/fonts/vwhead-regular-demo.html +549 -549
  20. package/public/fonts/vwtext-bold-demo.html +549 -549
  21. package/public/fonts/vwtext-regular-demo.html +549 -549
  22. package/public/github.svg +3 -3
  23. package/public/grid_dot.svg +4 -4
  24. package/public/linkedin.svg +44 -44
  25. package/public/locales/en/translation.json +8 -8
  26. package/public/locales/pl/translation.json +8 -8
  27. package/public/make-scrollable-code-focusable.js +3 -3
  28. package/public/pagefind.yml +3 -3
  29. package/public/polo.blue.svg +29 -29
  30. package/public/spoko.space.svg +71 -71
  31. package/public/twitter.svg +46 -46
  32. package/renovate.json +6 -6
  33. package/sandbox.config.json +11 -11
  34. package/src/MyComponent.astro +8 -8
  35. package/src/components/Badge.vue +19 -19
  36. package/src/components/Badges.vue +21 -21
  37. package/src/components/Breadcrumbs.vue +110 -110
  38. package/src/components/Button.vue +55 -55
  39. package/src/components/ButtonCopy.vue +47 -47
  40. package/src/components/Card.astro +27 -27
  41. package/src/components/Carousel.astro +26 -26
  42. package/src/components/CategoryLink.astro +18 -18
  43. package/src/components/Copyright.astro +12 -12
  44. package/src/components/Date.astro +7 -7
  45. package/src/components/FeaturesList.vue +41 -41
  46. package/src/components/FuckRussia.vue +80 -80
  47. package/src/components/HandDrive.astro +29 -29
  48. package/src/components/Header/Header.astro +214 -214
  49. package/src/components/Header/SkipToContent.astro +1 -1
  50. package/src/components/Headline.vue +48 -48
  51. package/src/components/Image.astro +30 -30
  52. package/src/components/Jumbatron.vue +40 -40
  53. package/src/components/LeftSidebar.astro +53 -53
  54. package/src/components/MainColors.vue +23 -23
  55. package/src/components/MainInput.vue +15 -15
  56. package/src/components/Modal.astro +27 -27
  57. package/src/components/PageContent.astro +5 -5
  58. package/src/components/PartNumber.vue +27 -27
  59. package/src/components/PostHeader.astro +103 -103
  60. package/src/components/PrCode.vue +156 -156
  61. package/src/components/ProductCarousel.astro +38 -38
  62. package/src/components/ProductCodes.vue +39 -39
  63. package/src/components/ProductDetailName.vue +52 -52
  64. package/src/components/ProductDetailsList.vue +65 -65
  65. package/src/components/ProductNumber copy.astro +116 -116
  66. package/src/components/ProductNumber.astro +114 -114
  67. package/src/components/ProductTile.astro +48 -48
  68. package/src/components/Quote.vue +23 -23
  69. package/src/components/ReloadPrompt.astro +50 -50
  70. package/src/components/SlimBanner.vue +82 -70
  71. package/src/components/Table.vue +32 -32
  72. package/src/components/TableOfContents.astro +15 -15
  73. package/src/components/Translations.vue +23 -23
  74. package/src/components/flags/FlagPL.vue +3 -3
  75. package/src/components/flags/FlagUA.vue +2 -2
  76. package/src/components/layout/Container.astro +7 -7
  77. package/src/components/layout/Header.astro +80 -80
  78. package/src/config.ts +56 -56
  79. package/src/design.config.ts +79 -79
  80. package/src/env.d.ts +1 -1
  81. package/src/layouts/Layout.astro +60 -60
  82. package/src/layouts/MainLayout.astro +81 -81
  83. package/src/layouts/partials/FooterCommon.astro +4 -4
  84. package/src/layouts/partials/HeadCommon.astro +44 -44
  85. package/src/layouts/partials/HeadSEO.astro +41 -41
  86. package/src/pages/components/badges.mdx +55 -55
  87. package/src/pages/components/breadcrumbs.mdx +139 -139
  88. package/src/pages/components/buttons.mdx +236 -236
  89. package/src/pages/components/card.mdx +294 -294
  90. package/src/pages/components/carousel.mdx +62 -62
  91. package/src/pages/components/copyright.mdx +42 -42
  92. package/src/pages/components/details-list.mdx +115 -115
  93. package/src/pages/components/features-list.mdx +37 -37
  94. package/src/pages/components/flags.mdx +49 -49
  95. package/src/pages/components/fuck-russia.mdx +39 -39
  96. package/src/pages/components/hand-drive.mdx +38 -38
  97. package/src/pages/components/headline.mdx +152 -152
  98. package/src/pages/components/icons.astro +48 -48
  99. package/src/pages/components/image.mdx +513 -513
  100. package/src/pages/components/input.mdx +45 -45
  101. package/src/pages/components/jumbatron.mdx +73 -73
  102. package/src/pages/components/modal.mdx +64 -64
  103. package/src/pages/components/post-header.mdx +60 -60
  104. package/src/pages/components/pr-code.mdx +65 -65
  105. package/src/pages/components/product-number.mdx +66 -66
  106. package/src/pages/components/product-tile.mdx +51 -51
  107. package/src/pages/components/quote.mdx +33 -33
  108. package/src/pages/components/slimbanner.mdx +29 -29
  109. package/src/pages/components/table.mdx +108 -108
  110. package/src/pages/core/colors.mdx +10 -10
  111. package/src/pages/core/grid.mdx +89 -89
  112. package/src/pages/core/introduction.mdx +77 -77
  113. package/src/pages/core/shadows.astro +20 -20
  114. package/src/pages/core/typography.astro +47 -47
  115. package/src/pages/index.astro +125 -125
  116. package/src/pages/patterns/introduction.mdx +60 -60
  117. package/src/pwa.ts +12 -12
  118. package/src/styles/_variables.scss +66 -66
  119. package/src/styles/base/_base.scss +184 -184
  120. package/src/styles/base/_typography.scss +70 -70
  121. package/src/styles/base/grid.scss +98 -98
  122. package/src/styles/content.scss +64 -64
  123. package/src/styles/main.scss +7 -7
  124. package/tailwind.config.cjs +8 -8
  125. package/tsconfig.json +11 -11
  126. package/uno.config.ts +252 -252
package/src/layouts/MainLayout.astro CHANGED
@@ -1,81 +1,81 @@
1
- ---
2
- import HeadCommon from "./partials/HeadCommon.astro";
3
- import HeadSEO from "../layouts/partials/HeadSEO.astro";
4
- import Header from "../components/Header/Header.astro";
5
- import PageContent from "../components/PageContent.astro";
6
- import LeftSidebar from "../components/LeftSidebar.astro";
7
- import * as CONFIG from "../config";
8
- import { t, changeLanguage } from "i18next";
9
- import "../styles/main.scss";
10
- import Copyright from "../components/Copyright.astro";
11
- const locale = "en";
12
- changeLanguage(locale);
13
- const { content = {} } = Astro.props;
14
- const currentPage = Astro.url.pathname;
15
- const canonicalURL = new URL(Astro.url.pathname, Astro.site).toString();
16
- ---
17
-
18
- <script>
19
- // Swiper Element
20
- import { register } from "swiper/element/bundle";
21
- document.addEventListener("astro:page-load", () => {
22
- register();
23
- });
24
- </script>
25
-
26
- <html dir={content.dir ?? "ltr"} lang={content.lang ?? "en-us"} class="initial">
27
- <head>
28
- <HeadCommon />
29
- <HeadSEO {content} canonicalURL={canonicalURL} />
30
- <title>
31
- {
32
- content.title
33
- ? `${content.title} 🚀 ${CONFIG.SITE.title}`
34
- : CONFIG.SITE.title
35
- }
36
- </title>
37
- </head>
38
-
39
- <body class="bg-blue-50">
40
- <div class="sticky top-0 z-20 w-full bg-white/70">
41
- <Header currentPage={currentPage} />
42
- </div>
43
-
44
- <div class="flex bg-white z-10 mb-11 relative">
45
- <div class="sticky top-0 flex lg:(h-screen w-64) z-50">
46
- <div class="mr-auto" transition:name="sidebar">
47
- <LeftSidebar currentPage={currentPage} />
48
- </div>
49
- </div>
50
- <main class="pb-4 px-4 sm:px-8 col-auto sm:(pb-32) overflow-auto w-full">
51
- <PageContent content={content} transition:name="content">
52
- <slot />
53
- </PageContent>
54
- </main>
55
- </div>
56
- <footer>
57
- <Copyright class="fixed bottom-0 z-0 w-full">
58
- <a
59
- slot="middle-item"
60
- href="https://spoko.space"
61
- target="_blank"
62
- rel="follow noopener"
63
- class="flex my-auto items-center mx-auto"
64
- title={`Proudly made in Poland by spoko.space`}
65
- >
66
- <div class="text-xxs md:text-xs mr-1 mt-0.5 whitespace-nowrap">
67
- createdy by
68
- </div>
69
- <img
70
- class="h-4 md:h-5 w-min"
71
- src="/spoko.space.svg"
72
- alt="Modern Websites"
73
- width="126"
74
- height="23"
75
- loading="lazy"
76
- />
77
- </a>
78
- </Copyright>
79
- </footer>
80
- </body>
81
- </html>
1
+ ---
2
+ import HeadCommon from "./partials/HeadCommon.astro";
3
+ import HeadSEO from "../layouts/partials/HeadSEO.astro";
4
+ import Header from "../components/Header/Header.astro";
5
+ import PageContent from "../components/PageContent.astro";
6
+ import LeftSidebar from "../components/LeftSidebar.astro";
7
+ import * as CONFIG from "../config";
8
+ import { t, changeLanguage } from "i18next";
9
+ import "../styles/main.scss";
10
+ import Copyright from "../components/Copyright.astro";
11
+ const locale = "en";
12
+ changeLanguage(locale);
13
+ const { content = {} } = Astro.props;
14
+ const currentPage = Astro.url.pathname;
15
+ const canonicalURL = new URL(Astro.url.pathname, Astro.site).toString();
16
+ ---
17
+
18
+ <script>
19
+ // Swiper Element
20
+ import { register } from "swiper/element/bundle";
21
+ document.addEventListener("astro:page-load", () => {
22
+ register();
23
+ });
24
+ </script>
25
+
26
+ <html dir={content.dir ?? "ltr"} lang={content.lang ?? "en-us"} class="initial">
27
+ <head>
28
+ <HeadCommon />
29
+ <HeadSEO {content} canonicalURL={canonicalURL} />
30
+ <title>
31
+ {
32
+ content.title
33
+ ? `${content.title} 🚀 ${CONFIG.SITE.title}`
34
+ : CONFIG.SITE.title
35
+ }
36
+ </title>
37
+ </head>
38
+
39
+ <body class="bg-blue-50">
40
+ <div class="sticky top-0 z-20 w-full bg-white/70">
41
+ <Header currentPage={currentPage} />
42
+ </div>
43
+
44
+ <div class="flex bg-white z-10 mb-11 relative">
45
+ <div class="sticky top-0 flex lg:(h-screen w-64) z-50">
46
+ <div class="mr-auto" transition:name="sidebar">
47
+ <LeftSidebar currentPage={currentPage} />
48
+ </div>
49
+ </div>
50
+ <main class="pb-4 px-4 sm:px-8 col-auto sm:(pb-32) overflow-auto w-full">
51
+ <PageContent content={content} transition:name="content">
52
+ <slot />
53
+ </PageContent>
54
+ </main>
55
+ </div>
56
+ <footer>
57
+ <Copyright class="fixed bottom-0 z-0 w-full">
58
+ <a
59
+ slot="middle-item"
60
+ href="https://spoko.space"
61
+ target="_blank"
62
+ rel="follow noopener"
63
+ class="flex my-auto items-center mx-auto"
64
+ title={`Proudly made in Poland by spoko.space`}
65
+ >
66
+ <div class="text-xxs md:text-xs mr-1 mt-0.5 whitespace-nowrap">
67
+ createdy by
68
+ </div>
69
+ <img
70
+ class="h-4 md:h-5 w-min"
71
+ src="/spoko.space.svg"
72
+ alt="Modern Websites"
73
+ width="126"
74
+ height="23"
75
+ loading="lazy"
76
+ />
77
+ </a>
78
+ </Copyright>
79
+ </footer>
80
+ </body>
81
+ </html>
package/src/layouts/partials/FooterCommon.astro CHANGED
@@ -1,5 +1,5 @@
1
- ---
2
- import ReloadPrompt from "../../components/ReloadPrompt.astro";
3
- ---
4
-
1
+ ---
2
+ import ReloadPrompt from "../../components/ReloadPrompt.astro";
3
+ ---
4
+
5
5
  <ReloadPrompt />
package/src/layouts/partials/HeadCommon.astro CHANGED
@@ -1,44 +1,44 @@
1
- ---
2
- import { ViewTransitions } from "astro:transitions";
3
- import { pwaInfo } from 'virtual:pwa-info';
4
- ---
5
-
6
- <!-- Global Metadata -->
7
- <meta charset="utf-8" />
8
- <meta name="viewport" content="width=device-width" />
9
-
10
- <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
11
- <link rel="alternate icon" type="image/x-icon" href="/favicon.ico" />
12
-
13
- <link rel="sitemap" href="/sitemap-index.xml" />
14
-
15
- <!-- Preload Fonts -->
16
- <!-- <link rel="preconnect" href="https://fonts.googleapis.com" />
17
- <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
18
- <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital@0;1&display=swap" rel="stylesheet" /> -->
19
-
20
- <!-- Scrollable a11y code helper -->
21
- <script src="/make-scrollable-code-focusable.js" is:inline></script>
22
-
23
- <!-- This is intentionally inlined to avoid FOUC -->
24
- <script is:inline>
25
- // const root = document.documentElement;
26
- // const theme = localStorage.getItem('theme');
27
- // if (theme === 'dark' || (!theme && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
28
- // root.classList.add('dark');
29
- // } else {
30
- // root.classList.remove('dark');
31
- // }
32
- </script>
33
-
34
- <!-- Global site tag (gtag.js) - Google Analytics -->
35
- <!-- <script async src="https://www.googletagmanager.com/gtag/js?id=" is:inline></script>
36
- <script>
37
- window.dataLayer = window.dataLayer || [];
38
- function gtag(){dataLayer.push(arguments);}
39
- gtag('js', new Date());
40
- gtag('config', '');
41
- </script> -->
42
-
43
- <ViewTransitions />
44
- { pwaInfo && <Fragment set:html={pwaInfo.webManifest.linkTag} /> }
1
+ ---
2
+ import { ViewTransitions } from "astro:transitions";
3
+ import { pwaInfo } from 'virtual:pwa-info';
4
+ ---
5
+
6
+ <!-- Global Metadata -->
7
+ <meta charset="utf-8" />
8
+ <meta name="viewport" content="width=device-width" />
9
+
10
+ <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
11
+ <link rel="alternate icon" type="image/x-icon" href="/favicon.ico" />
12
+
13
+ <link rel="sitemap" href="/sitemap-index.xml" />
14
+
15
+ <!-- Preload Fonts -->
16
+ <!-- <link rel="preconnect" href="https://fonts.googleapis.com" />
17
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
18
+ <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital@0;1&display=swap" rel="stylesheet" /> -->
19
+
20
+ <!-- Scrollable a11y code helper -->
21
+ <script src="/make-scrollable-code-focusable.js" is:inline></script>
22
+
23
+ <!-- This is intentionally inlined to avoid FOUC -->
24
+ <script is:inline>
25
+ // const root = document.documentElement;
26
+ // const theme = localStorage.getItem('theme');
27
+ // if (theme === 'dark' || (!theme && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
28
+ // root.classList.add('dark');
29
+ // } else {
30
+ // root.classList.remove('dark');
31
+ // }
32
+ </script>
33
+
34
+ <!-- Global site tag (gtag.js) - Google Analytics -->
35
+ <!-- <script async src="https://www.googletagmanager.com/gtag/js?id=" is:inline></script>
36
+ <script>
37
+ window.dataLayer = window.dataLayer || [];
38
+ function gtag(){dataLayer.push(arguments);}
39
+ gtag('js', new Date());
40
+ gtag('config', '');
41
+ </script> -->
42
+
43
+ <ViewTransitions />
44
+ { pwaInfo && <Fragment set:html={pwaInfo.webManifest.linkTag} /> }
package/src/layouts/partials/HeadSEO.astro CHANGED
@@ -1,41 +1,41 @@
1
- ---
2
- import { SITE, OPEN_GRAPH } from '../../config';
3
- export interface Props {
4
- content: any;
5
- site: any;
6
- canonicalURL: URL | string;
7
- }
8
- const { content = {}, canonicalURL } = Astro.props;
9
- const formattedContentTitle = content.title ? `${content.title} 🚀 ${SITE.title}` : SITE.title;
10
- // const imageSrc = content?.image?.src ?? OPEN_GRAPH.image.src;
11
- // const canonicalImageSrc = new URL(imageSrc, Astro.site);
12
- const imageAlt = content?.image?.alt ?? OPEN_GRAPH.image.alt;
13
- ---
14
-
15
- <!-- Page Metadata -->
16
- <link rel="canonical" href={canonicalURL} />
17
-
18
- <!-- OpenGraph Tags -->
19
- <meta property="og:title" content={formattedContentTitle} />
20
- <meta property="og:type" content="article" />
21
- <meta property="og:url" content={canonicalURL} />
22
- <meta property="og:locale" content={content.ogLocale ?? SITE.defaultLanguage} />
23
- <!-- <meta property="og:image" content={canonicalImageSrc} /> -->
24
- <meta property="og:image:alt" content={imageAlt} />
25
- <meta name="description" property="og:description" content={content.description ? content.description : SITE.description} />
26
- <meta property="og:site_name" content={SITE.title} />
27
-
28
- <!-- Twitter Tags -->
29
- <meta name="twitter:card" content="summary_large_image" />
30
- <meta name="twitter:site" content={OPEN_GRAPH.twitter} />
31
- <meta name="twitter:title" content={formattedContentTitle} />
32
- <meta name="twitter:description" content={content.description ? content.description : SITE.description} />
33
- <!-- <meta name="twitter:image" content={canonicalImageSrc} /> -->
34
- <meta name="twitter:image:alt" content={imageAlt} />
35
-
36
- <!--
37
- TODO: Add json+ld data, maybe https://schema.org/APIReference makes sense?
38
- Docs: https://developers.google.com/search/docs/advanced/structured-data/intro-structured-data
39
- https://www.npmjs.com/package/schema-dts seems like a great resource for implementing this.
40
- Even better, there's a Vue component that integrates with `schema-dts`: https://github.com/vueuse/schema-org
41
- -->
1
+ ---
2
+ import { SITE, OPEN_GRAPH } from '../../config';
3
+ export interface Props {
4
+ content: any;
5
+ site: any;
6
+ canonicalURL: URL | string;
7
+ }
8
+ const { content = {}, canonicalURL } = Astro.props;
9
+ const formattedContentTitle = content.title ? `${content.title} 🚀 ${SITE.title}` : SITE.title;
10
+ // const imageSrc = content?.image?.src ?? OPEN_GRAPH.image.src;
11
+ // const canonicalImageSrc = new URL(imageSrc, Astro.site);
12
+ const imageAlt = content?.image?.alt ?? OPEN_GRAPH.image.alt;
13
+ ---
14
+
15
+ <!-- Page Metadata -->
16
+ <link rel="canonical" href={canonicalURL} />
17
+
18
+ <!-- OpenGraph Tags -->
19
+ <meta property="og:title" content={formattedContentTitle} />
20
+ <meta property="og:type" content="article" />
21
+ <meta property="og:url" content={canonicalURL} />
22
+ <meta property="og:locale" content={content.ogLocale ?? SITE.defaultLanguage} />
23
+ <!-- <meta property="og:image" content={canonicalImageSrc} /> -->
24
+ <meta property="og:image:alt" content={imageAlt} />
25
+ <meta name="description" property="og:description" content={content.description ? content.description : SITE.description} />
26
+ <meta property="og:site_name" content={SITE.title} />
27
+
28
+ <!-- Twitter Tags -->
29
+ <meta name="twitter:card" content="summary_large_image" />
30
+ <meta name="twitter:site" content={OPEN_GRAPH.twitter} />
31
+ <meta name="twitter:title" content={formattedContentTitle} />
32
+ <meta name="twitter:description" content={content.description ? content.description : SITE.description} />
33
+ <!-- <meta name="twitter:image" content={canonicalImageSrc} /> -->
34
+ <meta name="twitter:image:alt" content={imageAlt} />
35
+
36
+ <!--
37
+ TODO: Add json+ld data, maybe https://schema.org/APIReference makes sense?
38
+ Docs: https://developers.google.com/search/docs/advanced/structured-data/intro-structured-data
39
+ https://www.npmjs.com/package/schema-dts seems like a great resource for implementing this.
40
+ Even better, there's a Vue component that integrates with `schema-dts`: https://github.com/vueuse/schema-org
41
+ -->
package/src/pages/components/badges.mdx CHANGED
@@ -1,55 +1,55 @@
1
- ---
2
- title: "Badges"
3
- layout: "../../layouts/MainLayout.astro"
4
- ---
5
- import Badges from '../../components/Badges.vue'
6
-
7
- # Product badges
8
- Extra product badges (labels).
9
-
10
- ## Badges - GTI
11
- <div class="component-preview">
12
- <div class="relative min-h-19">
13
- <Badges badges={['GTI', 'Motorsport', 'Lorem Ipsum']} class="top-2" />
14
- </div>
15
- </div>
16
- ```js
17
- <div class="relative min-h-10">
18
- <Badges badges={['GTI', 'Motorsport', 'Lorem Ipsum']} class="top-2" />
19
- </div>
20
-
21
- ```
22
-
23
-
24
- ## Badge on image
25
- <div class="component-preview">
26
- <div class="relative">
27
- <img src="https://placehold.co/300x200" alt="image alt" />
28
- <Badges badges={['Motorsport']} class="top-2" />
29
- </div>
30
- </div>
31
-
32
- ```js
33
- <div class="relative">
34
- <img src="https://placehold.co/300x200" alt="image alt" />
35
- <Badges badges={['Motorsport']} class="top-2" />
36
- </div>
37
-
38
- ```
39
-
40
-
41
- ## Few badges on image
42
- <div class="component-preview">
43
- <div class="relative">
44
- <img src="https://placehold.co/300x200" alt="image alt" />
45
- <Badges badges={['Motorsport', 'Lorem ipsum', 'GTI']} class="top-2" />
46
- </div>
47
- </div>
48
-
49
- ```js
50
- <div class="relative">
51
- <img src="https://placehold.co/300x200" alt="image alt" />
52
- <Badges badges={['Motorsport', 'Lorem ipsum', 'GTI']} class="top-2" />
53
- </div>
54
-
55
- ```
1
+ ---
2
+ title: "Badges"
3
+ layout: "../../layouts/MainLayout.astro"
4
+ ---
5
+ import Badges from '../../components/Badges.vue'
6
+
7
+ # Product badges
8
+ Extra product badges (labels).
9
+
10
+ ## Badges - GTI
11
+ <div class="component-preview">
12
+ <div class="relative min-h-19">
13
+ <Badges badges={['GTI', 'Motorsport', 'Lorem Ipsum']} class="top-2" />
14
+ </div>
15
+ </div>
16
+ ```js
17
+ <div class="relative min-h-10">
18
+ <Badges badges={['GTI', 'Motorsport', 'Lorem Ipsum']} class="top-2" />
19
+ </div>
20
+
21
+ ```
22
+
23
+
24
+ ## Badge on image
25
+ <div class="component-preview">
26
+ <div class="relative">
27
+ <img src="https://placehold.co/300x200" alt="image alt" />
28
+ <Badges badges={['Motorsport']} class="top-2" />
29
+ </div>
30
+ </div>
31
+
32
+ ```js
33
+ <div class="relative">
34
+ <img src="https://placehold.co/300x200" alt="image alt" />
35
+ <Badges badges={['Motorsport']} class="top-2" />
36
+ </div>
37
+
38
+ ```
39
+
40
+
41
+ ## Few badges on image
42
+ <div class="component-preview">
43
+ <div class="relative">
44
+ <img src="https://placehold.co/300x200" alt="image alt" />
45
+ <Badges badges={['Motorsport', 'Lorem ipsum', 'GTI']} class="top-2" />
46
+ </div>
47
+ </div>
48
+
49
+ ```js
50
+ <div class="relative">
51
+ <img src="https://placehold.co/300x200" alt="image alt" />
52
+ <Badges badges={['Motorsport', 'Lorem ipsum', 'GTI']} class="top-2" />
53
+ </div>
54
+
55
+ ```