support-kurdistan 1.1.2 → 1.1.3
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.
- package/package.json +7 -3
- package/types/react.d.ts +11 -0
- package/vue/SupportKurdistan.vue +81 -0
package/package.json
CHANGED
|
@@ -1,12 +1,16 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "support-kurdistan",
|
|
3
|
-
"version": "1.1.
|
|
3
|
+
"version": "1.1.3",
|
|
4
4
|
"description": "Luxury banner component to support Kurdistan for React, Next.js and Vue",
|
|
5
|
+
"types": "./types/react.d.ts",
|
|
5
6
|
"type": "module",
|
|
6
7
|
"main": "./index.js",
|
|
7
8
|
"exports": {
|
|
8
9
|
".": "./index.js",
|
|
9
|
-
"./react":
|
|
10
|
+
"./react": {
|
|
11
|
+
"types": "./types/react.d.ts",
|
|
12
|
+
"default": "./react/SupportKurdistan.jsx"
|
|
13
|
+
},
|
|
10
14
|
"./vue": "./vue/SupportKurdistan.vue"
|
|
11
15
|
},
|
|
12
16
|
"keywords": [
|
|
@@ -19,4 +23,4 @@
|
|
|
19
23
|
],
|
|
20
24
|
"author": "Abdulsamad Zuhair",
|
|
21
25
|
"license": "MIT"
|
|
22
|
-
}
|
|
26
|
+
}
|
package/types/react.d.ts
ADDED
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { ComponentType } from "react";
|
|
2
|
+
|
|
3
|
+
export interface SupportKurdistanProps {
|
|
4
|
+
locale?: string;
|
|
5
|
+
theme?: string;
|
|
6
|
+
text?: string;
|
|
7
|
+
mode?: string;
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
declare const SupportKurdistan: ComponentType<SupportKurdistanProps>;
|
|
11
|
+
export default SupportKurdistan;
|
package/vue/SupportKurdistan.vue
CHANGED
|
@@ -0,0 +1,81 @@
|
|
|
1
|
+
<script setup>
|
|
2
|
+
const props = defineProps({
|
|
3
|
+
locale: { default: "en" },
|
|
4
|
+
theme: { default: "light" },
|
|
5
|
+
text: { default: "" },
|
|
6
|
+
mode: { default: "top" },
|
|
7
|
+
});
|
|
8
|
+
|
|
9
|
+
const translations = {
|
|
10
|
+
en: "We stand with Kurdistan",
|
|
11
|
+
ku: "ئێمە لەگەڵ کوردستانین",
|
|
12
|
+
ckb: "ئێمە لەگەڵ کوردستانین",
|
|
13
|
+
ar: "نحن نقف مع كوردستان",
|
|
14
|
+
};
|
|
15
|
+
|
|
16
|
+
const hashtags = ["#SaveRojavaPeople", "#FreeRojava", "#SaveKurdistan"];
|
|
17
|
+
|
|
18
|
+
const themes = {
|
|
19
|
+
light: { bg: "#fff", color: "#333", border: "#e8e8e8", accent: "#c0392b" },
|
|
20
|
+
dark: { bg: "#1a1a1a", color: "#f5f5f5", border: "#333", accent: "#e74c3c" },
|
|
21
|
+
subtle: {
|
|
22
|
+
bg: "#f9f9f9",
|
|
23
|
+
color: "#444",
|
|
24
|
+
border: "#e0e0e0",
|
|
25
|
+
accent: "#2980b9",
|
|
26
|
+
},
|
|
27
|
+
};
|
|
28
|
+
|
|
29
|
+
const t = themes[props.theme] || themes.light;
|
|
30
|
+
const isRTL = ["ar", "ku", "ckb"].includes(props.locale);
|
|
31
|
+
</script>
|
|
32
|
+
|
|
33
|
+
<template>
|
|
34
|
+
<div :style="{ background: t.bg, borderBottom: `1px solid ${t.border}` }">
|
|
35
|
+
<div class="wrap">
|
|
36
|
+
<div class="left">
|
|
37
|
+
<img
|
|
38
|
+
src="https://cdn-icons-png.flaticon.com/512/10600/10600720.png"
|
|
39
|
+
width="36"
|
|
40
|
+
/>
|
|
41
|
+
<p :style="{ color: t.color, direction: isRTL ? 'rtl' : 'ltr' }">
|
|
42
|
+
{{ props.text || translations[props.locale] || translations.en }}
|
|
43
|
+
</p>
|
|
44
|
+
</div>
|
|
45
|
+
<div class="right">
|
|
46
|
+
<a
|
|
47
|
+
v-for="tag in hashtags"
|
|
48
|
+
:href="`https://twitter.com/search?q=${encodeURIComponent(tag)}`"
|
|
49
|
+
target="_blank"
|
|
50
|
+
>
|
|
51
|
+
{{ tag }}
|
|
52
|
+
</a>
|
|
53
|
+
</div>
|
|
54
|
+
</div>
|
|
55
|
+
</div>
|
|
56
|
+
</template>
|
|
57
|
+
|
|
58
|
+
<style scoped>
|
|
59
|
+
.wrap {
|
|
60
|
+
max-width: 1200px;
|
|
61
|
+
margin: auto;
|
|
62
|
+
padding: 12px 20px;
|
|
63
|
+
display: flex;
|
|
64
|
+
justify-content: space-between;
|
|
65
|
+
flex-wrap: wrap;
|
|
66
|
+
}
|
|
67
|
+
.left {
|
|
68
|
+
display: flex;
|
|
69
|
+
gap: 16px;
|
|
70
|
+
align-items: center;
|
|
71
|
+
}
|
|
72
|
+
.right {
|
|
73
|
+
display: flex;
|
|
74
|
+
gap: 14px;
|
|
75
|
+
flex-wrap: wrap;
|
|
76
|
+
}
|
|
77
|
+
a {
|
|
78
|
+
font-weight: 500;
|
|
79
|
+
text-decoration: none;
|
|
80
|
+
}
|
|
81
|
+
</style>
|