@redneckz/wildless-cms-uni-blocks 0.6.22 → 0.6.23

package/src/ui-kit/Tags/Tags.fixture.tsx

@@ -0,0 +1,9 @@
+import { Tags } from './Tags';
+
+const tags = ['Tag #1', 'Tag #2', 'Tag #3', 'Tag #4'];
+
+export default (
+  <div className="bg-white p-12">
+    <Tags tags={tags} />
+  </div>
+);

package/src/ui-kit/Tags/Tags.tsx

@@ -0,0 +1,26 @@
+import { JSX } from '@redneckz/uni-jsx';
+import type { TagsContent } from './TagsContent';
+
+export interface TagsProps extends TagsContent {
+  /** @hidden */
+  className?: string;
+}
+
+export const Tags = JSX<TagsProps>((props) => {
+  const { tags, className = '' } = props;
+
+  return tags?.length ? (
+    <div className={`flex flex-wrap gap-2 ${className}`}>
+      {tags.map((_, i) => renderTag(_, String(i)))}
+    </div>
+  ) : null;
+});
+
+const renderTag = (tag: string, key: string) => (
+  <span
+    key={key}
+    className="text-m-light py-2 px-2.5 border-solid border rounded-md border-color-stroke"
+  >
+    {tag}
+  </span>
+);

package/src/ui-kit/Tags/TagsContent.ts

@@ -0,0 +1,6 @@
+export interface TagsContent {
+  /**
+   * @title Теги
+   */
+  tags?: string[];
+}

package/tailwind.config.cjs

@@ -251,7 +251,8 @@ module.exports = {
         'primary-focus': 'rgba(28, 28, 28, 1);',
         'checkbox-hover': 'rgba(134, 134, 134, 1);',
         'green-light': 'rgba(219, 242, 219, 1);',
-        'golden': 'rgba(255, 237, 184, 1);',
+        golden: 'rgba(255, 237, 184, 1);',
+        'color-stroke': 'rgba(201, 202, 204, 1)',
       },
     },
   },