support-kurdistan 1.1.3 → 1.1.7

package/README.md

@@ -1,183 +1,149 @@
-# Support Kurdistan Banner
+# Support Kurdistan Banner 🇹🇯
 
-A custom HTML element that displays a banner showing support for Kurdistan.
+Luxury, minimal banner component to show solidarity with Kurdistan.  
+Works with **React, Next.js, and Vue**.
 
-## Features
+![Demo](./demo.gif)
 
-- Multi-language support (English, Kurdish, Arabic)
-- Multiple themes (light, dark, subtle)
-- Responsive design
-- Customizable text
-- Social media integration with hashtags
+![Preview](./demo1.png)
 
-## Usage
+---
 
-Include the JavaScript file in your HTML:
+## ✨ Features
 
-```html
-<script src="src/support-kurdistan.js"></script>
-```
-
-Then use the element:
-
-```html
-<support-kurdistan></support-kurdistan>
-```
-
-## Attributes
+- Luxury minimal design
+- RTL & LTR support
+- Multi-language (EN, KU, CKB, AR)
+- Themes: light, dark, subtle
+- Sticky top or footer mode
+- Responsive
+- Zero dependencies
 
-- `locale`: Language code (en, ku, ckb, ar). Default: en
-- `theme`: Theme (light, dark, subtle). Default: light
-- `text`: Custom message. If provided, replaces the default message.
-- `mode`: Position (top, footer). Default: top
+---
 
-## Examples
+## 📦 Installation
 
-### Default banner
+```bash
+npm install support-kurdistan
 
-```html
-<support-kurdistan></support-kurdistan>
-```
 
-### Dark theme in Kurdish
+## ⚛ React / Next.js Usage
 
-```html
-<support-kurdistan locale="ku" theme="dark"></support-kurdistan>
-```
-
-### Custom text in footer
-
-```html
-<support-kurdistan
-  text="Custom support message"
-  mode="footer"
-></support-kurdistan>
-```
+import SupportKurdistan from "support-kurdistan/react";
 
-### Arabic with subtle theme
+export default function App() {
+  return (
+    <SupportKurdistan
+      locale="ckb"
+      theme="dark"
+      text=""
+      mode="top"
+    />
+  );
+}
 
-```html
-<support-kurdistan locale="ar" theme="subtle"></support-kurdistan>
-```
+##Next.js (App Router)
 
-## Framework Integration
+"use client";
 
-**Note:** This custom element is framework-agnostic and works with any JavaScript framework. Make sure to include the `support-kurdistan.js` script before using the component. For frameworks with server-side rendering (like Next.js), the component will only render on the client side.
+import SupportKurdistan from "support-kurdistan/react";
 
-This custom element can be used in various JavaScript frameworks. Below are examples for React, Vue, and Next.js.
+export default function App() {
+  return (
+    <SupportKurdistan
+      locale="ckb"
+      theme="dark"
+      text=""
+      mode="top"
+    />
+  );
+}
 
-### React
 
-First, include the script in your HTML (e.g., in `public/index.html`):
+🟢 Vue 3 Usage
 
-```html
-<script src="%PUBLIC_URL%/src/support-kurdistan.js"></script>
-```
+<script setup>
+import SupportKurdistan from "support-kurdistan/vue";
+</script>
 
-Then use it in your React component:
+<template>
+  <SupportKurdistan
+    locale="ckb"
+    theme="dark"
+    mode="top"
+  />
+</template>
 
-```jsx
-import React from "react";
+Props
 
-function App() {
-  return (
-    <div className="App">
-      <support-kurdistan locale="en" theme="light"></support-kurdistan>
-    </div>
-  );
-}
+locale
+Type: string
+Default: en
+Description: Language code (en, ku, ckb, ar)
 
-export default App;
-```
+theme
+Type: string
+Default: light
+Description: light, dark, subtle
 
-If you encounter TypeScript issues, declare the element:
+text
+Type: string
+Default: auto
+Description: Custom text override
 
-```typescript
-declare global {
-  namespace JSX {
-    interface IntrinsicElements {
-      "support-kurdistan": any;
-    }
-  }
-}
-```
+mode
+Type: string
+Default: top
+Description: top or footer
 
-### Vue
+⸻
 
-Include the script in your `index.html`:
+Supported Locales
 
-```html
-<script src="./src/support-kurdistan.js"></script>
-```
+en - English
+ku - Kurdish (Kurmanji)
+ckb - Kurdish (Sorani)
+ar - Arabic
 
-Then use it in your Vue component:
+Themes
 
-```vue
-<template>
-  <div id="app">
-    <support-kurdistan locale="ku" theme="dark" />
-  </div>
-</template>
+light
+dark
+subtle
 
-<script>
-export default {
-  name: "App",
-};
-</script>
-```
 
-In Vue 3, you may need to configure it in `main.js`:
+Examples
 
-```javascript
-import { createApp } from "vue";
-import App from "./App.vue";
+Custom text:
+<SupportKurdistan
+  text="Kurdistan Forever"
+  theme="dark"
+/>
 
-const app = createApp(App);
-app.config.compilerOptions.isCustomElement = (tag) =>
-  tag === "support-kurdistan";
-app.mount("#app");
-```
+Arabic footer:
 
-### Next.js
+<SupportKurdistan
+  locale="ar"
+  theme="subtle"
+  mode="footer"
+/>
 
-Include the script in your `_document.js` or use `next/script`:
+Notes
+	•	RTL direction is detected automatically
+	•	Works with SSR in Next.js
+	•	No CSS import required
+	•	Internal styles are scoped
+	•	Vue and React versions are framework native
 
-```jsx
-import { Html, Head, Main, NextScript } from "next/document";
 
-export default function Document() {
-  return (
-    <Html>
-      <Head>
-        <script src="/src/support-kurdistan.js" />
-      </Head>
-      <body>
-        <Main />
-        <NextScript />
-      </body>
-    </Html>
-  );
-}
-```
+This project was created to raise awareness and express solidarity with the people of Kurdistan through clean and respectful UI.
 
-Then use it in your pages:
+License
 
-```jsx
-export default function Home() {
-  return (
-    <div>
-      <support-kurdistan locale="ar" theme="subtle" />
-    </div>
-  );
-}
-```
+MIT License
 
-For TypeScript support, add to `types.d.ts`:
+Author
 
-```typescript
-declare namespace JSX {
-  interface IntrinsicElements {
-    "support-kurdistan": any;
-  }
-}
+Abdulsamad Zuhair
+Software Engineer
 ```

package/dist/angular/support-kurdistan.component.d.ts

@@ -0,0 +1,19 @@
+export declare class SupportKurdistanComponent {
+    locale: string;
+    theme: string;
+    text: string;
+    mode: string;
+    hashtags: string[];
+    translations: any;
+    themes: any;
+    get isRTL(): boolean;
+    get displayText(): any;
+    get style(): {
+        "--bg": any;
+        "--border": any;
+        "--accent": any;
+        position: string;
+        top: string;
+        zIndex: string;
+    };
+}

package/dist/angular/support-kurdistan.component.js

@@ -0,0 +1,186 @@
+var __esDecorate = (this && this.__esDecorate) || function (ctor, descriptorIn, decorators, contextIn, initializers, extraInitializers) {
+    function accept(f) { if (f !== void 0 && typeof f !== "function") throw new TypeError("Function expected"); return f; }
+    var kind = contextIn.kind, key = kind === "getter" ? "get" : kind === "setter" ? "set" : "value";
+    var target = !descriptorIn && ctor ? contextIn["static"] ? ctor : ctor.prototype : null;
+    var descriptor = descriptorIn || (target ? Object.getOwnPropertyDescriptor(target, contextIn.name) : {});
+    var _, done = false;
+    for (var i = decorators.length - 1; i >= 0; i--) {
+        var context = {};
+        for (var p in contextIn) context[p] = p === "access" ? {} : contextIn[p];
+        for (var p in contextIn.access) context.access[p] = contextIn.access[p];
+        context.addInitializer = function (f) { if (done) throw new TypeError("Cannot add initializers after decoration has completed"); extraInitializers.push(accept(f || null)); };
+        var result = (0, decorators[i])(kind === "accessor" ? { get: descriptor.get, set: descriptor.set } : descriptor[key], context);
+        if (kind === "accessor") {
+            if (result === void 0) continue;
+            if (result === null || typeof result !== "object") throw new TypeError("Object expected");
+            if (_ = accept(result.get)) descriptor.get = _;
+            if (_ = accept(result.set)) descriptor.set = _;
+            if (_ = accept(result.init)) initializers.unshift(_);
+        }
+        else if (_ = accept(result)) {
+            if (kind === "field") initializers.unshift(_);
+            else descriptor[key] = _;
+        }
+    }
+    if (target) Object.defineProperty(target, contextIn.name, descriptor);
+    done = true;
+};
+var __runInitializers = (this && this.__runInitializers) || function (thisArg, initializers, value) {
+    var useValue = arguments.length > 2;
+    for (var i = 0; i < initializers.length; i++) {
+        value = useValue ? initializers[i].call(thisArg, value) : initializers[i].call(thisArg);
+    }
+    return useValue ? value : void 0;
+};
+var __setFunctionName = (this && this.__setFunctionName) || function (f, name, prefix) {
+    if (typeof name === "symbol") name = name.description ? "[".concat(name.description, "]") : "";
+    return Object.defineProperty(f, "name", { configurable: true, value: prefix ? "".concat(prefix, " ", name) : name });
+};
+import { Component, Input } from "@angular/core";
+let SupportKurdistanComponent = (() => {
+    let _classDecorators = [Component({
+            selector: "support-kurdistan",
+            standalone: true,
+            template: `
+    <div class="banner" [ngStyle]="style">
+      <div class="wrap">
+        <div class="left">
+          <img
+            src="https://cdn-icons-png.flaticon.com/512/10600/10600720.png"
+            width="36"
+          />
+          <p [dir]="isRTL ? 'rtl' : 'ltr'">
+            {{ displayText }}
+            <span *ngIf="!text" class="heart">❤️</span>
+          </p>
+        </div>
+
+        <div class="right">
+          <a
+            *ngFor="let tag of hashtags"
+            [href]="'https://twitter.com/search?q=' + tag"
+            target="_blank"
+          >
+            {{ tag }}
+          </a>
+        </div>
+      </div>
+    </div>
+  `,
+            styles: [
+                `
+      .banner {
+        width: 100%;
+        border-bottom: 1px solid var(--border);
+        background: var(--bg);
+      }
+      .wrap {
+        max-width: 1200px;
+        margin: auto;
+        padding: 12px 20px;
+        display: flex;
+        justify-content: space-between;
+        flex-wrap: wrap;
+        gap: 12px;
+      }
+      .left {
+        display: flex;
+        gap: 16px;
+        align-items: center;
+      }
+      p {
+        margin: 0;
+        font-family: Inter, sans-serif;
+        font-weight: 500;
+      }
+      .right {
+        display: flex;
+        gap: 14px;
+        flex-wrap: wrap;
+      }
+      a {
+        text-decoration: none;
+        font-weight: 500;
+        color: var(--accent);
+      }
+      a:hover {
+        opacity: 0.8;
+      }
+      .heart {
+        margin-left: 6px;
+        color: #e74c3c;
+      }
+    `,
+            ],
+        })];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    let _locale_decorators;
+    let _locale_initializers = [];
+    let _locale_extraInitializers = [];
+    let _theme_decorators;
+    let _theme_initializers = [];
+    let _theme_extraInitializers = [];
+    let _text_decorators;
+    let _text_initializers = [];
+    let _text_extraInitializers = [];
+    let _mode_decorators;
+    let _mode_initializers = [];
+    let _mode_extraInitializers = [];
+    var SupportKurdistanComponent = _classThis = class {
+        constructor() {
+            this.locale = __runInitializers(this, _locale_initializers, "en");
+            this.theme = (__runInitializers(this, _locale_extraInitializers), __runInitializers(this, _theme_initializers, "light"));
+            this.text = (__runInitializers(this, _theme_extraInitializers), __runInitializers(this, _text_initializers, ""));
+            this.mode = (__runInitializers(this, _text_extraInitializers), __runInitializers(this, _mode_initializers, "top"));
+            this.hashtags = (__runInitializers(this, _mode_extraInitializers), ["#SaveRojavaPeople", "#FreeRojava", "#SaveKurdistan"]);
+            this.translations = {
+                en: "We stand with Kurdistan",
+                ku: "ئێمە لەگەڵ کوردستانین",
+                ckb: "ئێمە لەگەڵ کوردستانین",
+                ar: "نحن نقف مع كوردستان",
+            };
+            this.themes = {
+                light: { bg: "#fff", border: "#e8e8e8", accent: "#c0392b" },
+                dark: { bg: "#1a1a1a", border: "#333", accent: "#e74c3c" },
+                subtle: { bg: "#f9f9f9", border: "#e0e0e0", accent: "#2980b9" },
+            };
+        }
+        get isRTL() {
+            return ["ar", "ku", "ckb"].includes(this.locale);
+        }
+        get displayText() {
+            return this.text || this.translations[this.locale] || this.translations.en;
+        }
+        get style() {
+            const t = this.themes[this.theme] || this.themes.light;
+            return {
+                "--bg": t.bg,
+                "--border": t.border,
+                "--accent": t.accent,
+                position: this.mode === "footer" ? "relative" : "sticky",
+                top: this.mode === "footer" ? null : "0",
+                zIndex: "100",
+            };
+        }
+    };
+    __setFunctionName(_classThis, "SupportKurdistanComponent");
+    (() => {
+        const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(null) : void 0;
+        _locale_decorators = [Input()];
+        _theme_decorators = [Input()];
+        _text_decorators = [Input()];
+        _mode_decorators = [Input()];
+        __esDecorate(null, null, _locale_decorators, { kind: "field", name: "locale", static: false, private: false, access: { has: obj => "locale" in obj, get: obj => obj.locale, set: (obj, value) => { obj.locale = value; } }, metadata: _metadata }, _locale_initializers, _locale_extraInitializers);
+        __esDecorate(null, null, _theme_decorators, { kind: "field", name: "theme", static: false, private: false, access: { has: obj => "theme" in obj, get: obj => obj.theme, set: (obj, value) => { obj.theme = value; } }, metadata: _metadata }, _theme_initializers, _theme_extraInitializers);
+        __esDecorate(null, null, _text_decorators, { kind: "field", name: "text", static: false, private: false, access: { has: obj => "text" in obj, get: obj => obj.text, set: (obj, value) => { obj.text = value; } }, metadata: _metadata }, _text_initializers, _text_extraInitializers);
+        __esDecorate(null, null, _mode_decorators, { kind: "field", name: "mode", static: false, private: false, access: { has: obj => "mode" in obj, get: obj => obj.mode, set: (obj, value) => { obj.mode = value; } }, metadata: _metadata }, _mode_initializers, _mode_extraInitializers);
+        __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+        SupportKurdistanComponent = _classThis = _classDescriptor.value;
+        if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+        __runInitializers(_classThis, _classExtraInitializers);
+    })();
+    return SupportKurdistanComponent = _classThis;
+})();
+export { SupportKurdistanComponent };

package/dist/react/SupportKurdistan.js

@@ -0,0 +1,114 @@
+'use client';
+
+import { useEffect } from "react";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export default function SupportKurdistan(_ref) {
+  var _ref$locale = _ref.locale,
+    locale = _ref$locale === void 0 ? "en" : _ref$locale,
+    _ref$theme = _ref.theme,
+    theme = _ref$theme === void 0 ? "light" : _ref$theme,
+    _ref$text = _ref.text,
+    text = _ref$text === void 0 ? "" : _ref$text,
+    _ref$mode = _ref.mode,
+    mode = _ref$mode === void 0 ? "top" : _ref$mode;
+  var translations = {
+    en: "We stand with Kurdistan",
+    ku: "ئێمە لەگەڵ کوردستانین",
+    ckb: "ئێمە لەگەڵ کوردستانین",
+    ar: "نحن نقف مع كوردستان"
+  };
+  var hashtags = ["#SaveRojavaPeople", "#FreeRojava", "#SaveKurdistan"];
+  var themes = {
+    light: {
+      bg: "#fff",
+      color: "#333",
+      border: "#e8e8e8",
+      accent: "#c0392b"
+    },
+    dark: {
+      bg: "#1a1a1a",
+      color: "#f5f5f5",
+      border: "#333",
+      accent: "#e74c3c"
+    },
+    subtle: {
+      bg: "#f9f9f9",
+      color: "#444",
+      border: "#e0e0e0",
+      accent: "#2980b9"
+    }
+  };
+  var t = themes[theme] || themes.light;
+  var isRTL = ["ar", "ku", "ckb"].includes(locale);
+  return /*#__PURE__*/_jsx("div", {
+    style: {
+      position: mode === "footer" ? "relative" : "sticky",
+      top: mode === "footer" ? undefined : 0,
+      zIndex: 100,
+      background: t.bg,
+      borderBottom: "1px solid ".concat(t.border),
+      width: "100%"
+    },
+    children: /*#__PURE__*/_jsxs("div", {
+      style: {
+        maxWidth: 1200,
+        margin: "0 auto",
+        padding: "12px 20px",
+        display: "flex",
+        justifyContent: "space-between",
+        alignItems: "center",
+        gap: 20,
+        flexWrap: "wrap"
+      },
+      children: [/*#__PURE__*/_jsxs("div", {
+        style: {
+          display: "flex",
+          alignItems: "center",
+          gap: 16
+        },
+        children: [/*#__PURE__*/_jsx("img", {
+          src: "https://cdn-icons-png.flaticon.com/512/10600/10600720.png",
+          width: 36,
+          height: 36
+        }), /*#__PURE__*/_jsxs("p", {
+          style: {
+            margin: 0,
+            fontFamily: "Inter, sans-serif",
+            fontSize: 16,
+            fontWeight: 500,
+            color: t.color,
+            direction: isRTL ? "rtl" : "ltr",
+            textAlign: isRTL ? "right" : "left"
+          },
+          children: [text || translations[locale] || translations.en, !text && /*#__PURE__*/_jsx("span", {
+            style: {
+              marginLeft: 6,
+              color: "#e74c3c"
+            },
+            children: "\u2764\uFE0F"
+          })]
+        })]
+      }), /*#__PURE__*/_jsx("div", {
+        style: {
+          display: "flex",
+          gap: 14,
+          flexWrap: "wrap"
+        },
+        children: hashtags.map(function (tag, i) {
+          return /*#__PURE__*/_jsx("a", {
+            href: "https://twitter.com/search?q=".concat(encodeURIComponent(tag)),
+            target: "_blank",
+            style: {
+              color: t.accent,
+              fontFamily: "Inter, sans-serif",
+              fontSize: 14,
+              fontWeight: 500,
+              textDecoration: "none"
+            },
+            children: tag
+          }, i);
+        })
+      })]
+    })
+  });
+}

package/{vue → dist/vue}/SupportKurdistan.vue

@@ -45,8 +45,10 @@ const isRTL = ["ar", "ku", "ckb"].includes(props.locale);
       <div class="right">
         <a
           v-for="tag in hashtags"
+          :key="tag"
           :href="`https://twitter.com/search?q=${encodeURIComponent(tag)}`"
           target="_blank"
+          class="hashtag"
         >
           {{ tag }}
         </a>
@@ -79,3 +81,19 @@ a {
   text-decoration: none;
 }
 </style>
+
+<style scoped>
+.hashtag {
+  color: var(--accent, #c0392b);
+  font-family: Inter, sans-serif;
+  font-size: 14px;
+  font-weight: 500;
+  text-decoration: none;
+  transition: opacity 0.2s ease;
+  white-space: nowrap;
+}
+
+.hashtag:hover {
+  opacity: 0.8;
+}
+</style>

package/package.json

@@ -1,17 +1,21 @@
 {
   "name": "support-kurdistan",
-  "version": "1.1.3",
+  "version": "1.1.7",
   "description": "Luxury banner component to support Kurdistan for React, Next.js and Vue",
   "types": "./types/react.d.ts",
   "type": "module",
-  "main": "./index.js",
+  "files": [
+    "dist",
+    "types"
+  ],
   "exports": {
-    ".": "./index.js",
-    "./react": {
-      "types": "./types/react.d.ts",
-      "default": "./react/SupportKurdistan.jsx"
-    },
-    "./vue": "./vue/SupportKurdistan.vue"
+    ".": "./dist/index.js",
+    "./react": "./dist/react/SupportKurdistan.js",
+    "./vue": "./dist/vue/SupportKurdistan.vue",
+    "./angular": {
+      "types": "./dist/angular/support-kurdistan.component.d.ts",
+      "default": "./dist/angular/support-kurdistan.component.js"
+    }
   },
   "keywords": [
     "kurdistan",
@@ -21,6 +25,28 @@
     "banner",
     "solidarity"
   ],
+  "scripts": {
+    "build:react": "babel src --out-dir dist --extensions \".jsx,.js\"",
+    "build:vue": "copyfiles -u 2 src/vue/*.vue dist/vue",
+    "build:angular": "npx tsc -p tsconfig.angular.json",
+    "build": "npm run build:react && npm run build:vue && npm run build:angular"
+  },
   "author": "Abdulsamad Zuhair",
-  "license": "MIT"
+  "license": "MIT",
+  "devDependencies": {
+    "@babel/cli": "^7.28.6",
+    "@babel/core": "^7.28.6",
+    "@babel/preset-env": "^7.28.6",
+    "@babel/preset-react": "^7.28.5",
+    "copyfiles": "^2.4.1",
+    "typescript": "^5.9.3"
+  },
+  "dependencies": {
+    "@angular/common": "^21.1.1",
+    "@angular/core": "^21.1.1"
+  },
+  "peerDependencies": {
+    "@angular/core": ">=16.0.0",
+    "@angular/common": ">=16.0.0"
+  }
 }

package/react/SupportKurdistan.jsx

@@ -1,94 +0,0 @@
-'use client';
-import { useEffect } from "react";
-
-export default function SupportKurdistan({
-  locale = "en",
-  theme = "light",
-  text = "",
-  mode = "top"
-}) {
-
-  const translations = {
-    en: "We stand with Kurdistan",
-    ku: "ئێمە لەگەڵ کوردستانین",
-    ckb: "ئێمە لەگەڵ کوردستانین",
-    ar: "نحن نقف مع كوردستان"
-  };
-
-  const hashtags = ["#SaveRojavaPeople", "#FreeRojava", "#SaveKurdistan"];
-
-  const themes = {
-    light: { bg:"#fff", color:"#333", border:"#e8e8e8", accent:"#c0392b" },
-    dark: { bg:"#1a1a1a", color:"#f5f5f5", border:"#333", accent:"#e74c3c" },
-    subtle: { bg:"#f9f9f9", color:"#444", border:"#e0e0e0", accent:"#2980b9" }
-  };
-
-  const t = themes[theme] || themes.light;
-  const isRTL = ["ar","ku","ckb"].includes(locale);
-
-  return (
-    <div
-      style={{
-        position: mode === "footer" ? "relative" : "sticky",
-        top: mode === "footer" ? undefined : 0,
-        zIndex: 100,
-        background: t.bg,
-        borderBottom: `1px solid ${t.border}`,
-        width: "100%"
-      }}
-    >
-      <div style={{
-        maxWidth:1200,
-        margin:"0 auto",
-        padding:"12px 20px",
-        display:"flex",
-        justifyContent:"space-between",
-        alignItems:"center",
-        gap:20,
-        flexWrap:"wrap"
-      }}>
-
-        <div style={{display:"flex",alignItems:"center",gap:16}}>
-          <img
-            src="https://cdn-icons-png.flaticon.com/512/10600/10600720.png"
-            width={36}
-            height={36}
-          />
-
-          <p style={{
-            margin:0,
-            fontFamily:"Inter, sans-serif",
-            fontSize:16,
-            fontWeight:500,
-            color:t.color,
-            direction:isRTL?"rtl":"ltr",
-            textAlign:isRTL?"right":"left"
-          }}>
-            {text || translations[locale] || translations.en}
-            {!text && <span style={{marginLeft:6,color:"#e74c3c"}}>❤️</span>}
-          </p>
-        </div>
-
-        <div style={{display:"flex",gap:14,flexWrap:"wrap"}}>
-          {hashtags.map((tag,i)=>(
-            <a
-              key={i}
-              href={`https://twitter.com/search?q=${encodeURIComponent(tag)}`}
-              target="_blank"
-              style={{
-                color:t.accent,
-                fontFamily:"Inter, sans-serif",
-                fontSize:14,
-                fontWeight:500,
-                textDecoration:"none"
-              }}
-            >
-              {tag}
-            </a>
-          ))}
-        </div>
-
-      </div>
-    </div>
-  );
-}