@elmethis/qwik 0.0.2 → 0.0.4

package/src/components/icon/languages/java.tsx

@@ -0,0 +1,37 @@
+import { component$ } from "@builder.io/qwik";
+import type { CommonLanguageProps } from "./language-interface";
+
+export const Java = component$<CommonLanguageProps>(
+  ({ size = 24, ...props }) => {
+    return (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width={size}
+        height={size}
+        viewBox="0 0 128 128"
+        {...props}
+      >
+        <path
+          fill="#0074bd"
+          d="M47.617 98.12s-4.767 2.774 3.397 3.71c9.892 1.13 14.947.968 25.845-1.092c0 0 2.871 1.795 6.873 3.351c-24.439 10.47-55.308-.607-36.115-5.969m-2.988-13.665s-5.348 3.959 2.823 4.805c10.567 1.091 18.91 1.18 33.354-1.6c0 0 1.993 2.025 5.132 3.131c-29.542 8.64-62.446.68-41.309-6.336"
+        />
+        <path
+          fill="#ea2d2e"
+          d="M69.802 61.271c6.025 6.935-1.58 13.17-1.58 13.17s15.289-7.891 8.269-17.777c-6.559-9.215-11.587-13.792 15.635-29.58c0 .001-42.731 10.67-22.324 34.187"
+        />
+        <path
+          fill="#0074bd"
+          d="M102.123 108.229s3.529 2.91-3.888 5.159c-14.102 4.272-58.706 5.56-71.094.171c-4.451-1.938 3.899-4.625 6.526-5.192c2.739-.593 4.303-.485 4.303-.485c-4.953-3.487-32.013 6.85-13.743 9.815c49.821 8.076 90.817-3.637 77.896-9.468M49.912 70.294s-22.686 5.389-8.033 7.348c6.188.828 18.518.638 30.011-.326c9.39-.789 18.813-2.474 18.813-2.474s-3.308 1.419-5.704 3.053c-23.042 6.061-67.544 3.238-54.731-2.958c10.832-5.239 19.644-4.643 19.644-4.643m40.697 22.747c23.421-12.167 12.591-23.86 5.032-22.285c-1.848.385-2.677.72-2.677.72s.688-1.079 2-1.543c14.953-5.255 26.451 15.503-4.823 23.725c0-.002.359-.327.468-.617"
+        />
+        <path
+          fill="#ea2d2e"
+          d="M76.491 1.587S89.459 14.563 64.188 34.51c-20.266 16.006-4.621 25.13-.007 35.559c-11.831-10.673-20.509-20.07-14.688-28.815C58.041 28.42 81.722 22.195 76.491 1.587"
+        />
+        <path
+          fill="#0074bd"
+          d="M52.214 126.021c22.476 1.437 57-.8 57.817-11.436c0 0-1.571 4.032-18.577 7.231c-19.186 3.612-42.854 3.191-56.887.874c0 .001 2.875 2.381 17.647 3.331"
+        />
+      </svg>
+    );
+  },
+);

package/src/components/icon/languages/javascript.tsx

@@ -0,0 +1,22 @@
+import { component$ } from "@builder.io/qwik";
+import type { CommonLanguageProps } from "./language-interface";
+
+export const Javascript = component$<CommonLanguageProps>(
+  ({ size = 24, ...props }) => {
+    return (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width={size}
+        height={size}
+        viewBox="0 0 128 128"
+        {...props}
+      >
+        <path fill="#f0db4f" d="M1.408 1.408h125.184v125.185H1.408z" />
+        <path
+          fill="#323330"
+          d="M116.347 96.736c-.917-5.711-4.641-10.508-15.672-14.981c-3.832-1.761-8.104-3.022-9.377-5.926c-.452-1.69-.512-2.642-.226-3.665c.821-3.32 4.784-4.355 7.925-3.403c2.023.678 3.938 2.237 5.093 4.724c5.402-3.498 5.391-3.475 9.163-5.879c-1.381-2.141-2.118-3.129-3.022-4.045c-3.249-3.629-7.676-5.498-14.756-5.355l-3.688.477c-3.534.893-6.902 2.748-8.877 5.235c-5.926 6.724-4.236 18.492 2.975 23.335c7.104 5.332 17.54 6.545 18.873 11.531c1.297 6.104-4.486 8.08-10.234 7.378c-4.236-.881-6.592-3.034-9.139-6.949c-4.688 2.713-4.688 2.713-9.508 5.485c1.143 2.499 2.344 3.63 4.26 5.795c9.068 9.198 31.76 8.746 35.83-5.176c.165-.478 1.261-3.666.38-8.581M69.462 58.943H57.753l-.048 30.272c0 6.438.333 12.34-.714 14.149c-1.713 3.558-6.152 3.117-8.175 2.427c-2.059-1.012-3.106-2.451-4.319-4.485c-.333-.584-.583-1.036-.667-1.071l-9.52 5.83c1.583 3.249 3.915 6.069 6.902 7.901c4.462 2.678 10.459 3.499 16.731 2.059c4.082-1.189 7.604-3.652 9.448-7.401c2.666-4.915 2.094-10.864 2.07-17.444c.06-10.735.001-21.468.001-32.237"
+        />
+      </svg>
+    );
+  },
+);

package/src/components/icon/languages/json.tsx

@@ -0,0 +1,53 @@
+import { component$ } from "@builder.io/qwik";
+import type { CommonLanguageProps } from "./language-interface";
+
+export const Json = component$<CommonLanguageProps>(
+  ({ size = 24, ...props }) => {
+    return (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width={size}
+        height={size}
+        viewBox="0 0 128 128"
+        {...props}
+      >
+        <linearGradient
+          id="deviconJson0"
+          x1="-670.564"
+          x2="-583.105"
+          y1="-280.831"
+          y2="-368.306"
+          gradientTransform="matrix(.9988 0 0 -.9987 689.011 -259.008)"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop offset="0" />
+          <stop offset="1" stop-color="#fff" />
+        </linearGradient>
+        <path
+          fill="url(#deviconJson0)"
+          fill-rule="evenodd"
+          d="M63.895 94.303c27.433 37.398 54.281-10.438 54.241-39.205c-.046-34.012-34.518-53.021-54.263-53.021C32.182 2.077 2 28.269 2 64.105C2 103.937 36.596 126 63.873 126c-6.172-.889-26.742-5.296-27.019-52.674c-.186-32.044 10.453-44.846 26.974-39.214c.37.137 18.223 7.18 18.223 30.187c0 22.908-18.156 30.004-18.156 30.004"
+          clip-rule="evenodd"
+        />
+        <linearGradient
+          id="deviconJson1"
+          x1="-579.148"
+          x2="-666.607"
+          y1="-364.34"
+          y2="-276.865"
+          gradientTransform="matrix(.9988 0 0 -.9987 689.011 -259.008)"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop offset="0" />
+          <stop offset="1" stop-color="#fff" />
+        </linearGradient>
+        <path
+          fill="url(#deviconJson1)"
+          fill-rule="evenodd"
+          d="M63.895 94.303c27.433 37.398 54.281-10.438 54.241-39.205c-.046-34.012-34.518-53.021-54.263-53.021C32.182 2.077 2 28.269 2 64.105C2 103.937 36.596 126 63.873 126c-6.172-.889-26.742-5.296-27.019-52.674c-.186-32.044 10.453-44.846 26.974-39.214c.37.137 18.223 7.18 18.223 30.187c0 22.908-18.156 30.004-18.156 30.004"
+          clip-rule="evenodd"
+        />
+      </svg>
+    );
+  },
+);

package/src/components/icon/languages/kotlin.tsx

@@ -0,0 +1,36 @@
+import { component$ } from "@builder.io/qwik";
+import type { CommonLanguageProps } from "./language-interface";
+
+export const Kotlin = component$<CommonLanguageProps>(
+  ({ size = 24, ...props }) => {
+    return (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width={size}
+        height={size}
+        viewBox="0 0 128 128"
+        {...props}
+      >
+        <defs>
+          <linearGradient
+            id="deviconKotlin0"
+            x1="500.003"
+            x2="-.097"
+            y1="579.106"
+            y2="1079.206"
+            gradientTransform="translate(15.534 -96.774)scale(.1939)"
+            gradientUnits="userSpaceOnUse"
+          >
+            <stop offset=".003" stop-color="#e44857" />
+            <stop offset=".469" stop-color="#c711e1" />
+            <stop offset="1" stop-color="#7f52ff" />
+          </linearGradient>
+        </defs>
+        <path
+          fill="url(#deviconKotlin0)"
+          d="M112.484 112.484H15.516V15.516h96.968L64 64Zm0 0"
+        />
+      </svg>
+    );
+  },
+);

package/src/components/icon/languages/language-interface.ts

@@ -0,0 +1,4 @@
+export interface CommonLanguageProps {
+  size?: number | string;
+  class?: string;
+}

package/src/components/icon/languages/lua.tsx

@@ -0,0 +1,29 @@
+import { component$ } from "@builder.io/qwik";
+import type { CommonLanguageProps } from "./language-interface";
+
+export const Lua = component$<CommonLanguageProps>(
+  ({ size = 24, ...props }) => {
+    return (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width={size}
+        height={size}
+        viewBox="0 0 128 128"
+        {...props}
+      >
+        <path
+          fill="#000080"
+          d="M112.956.708c-7.912 0-14.335 6.424-14.335 14.336s6.424 14.335 14.335 14.335s14.335-6.41 14.335-14.335c0-7.912-6.424-14.336-14.335-14.336M64 15.058c-27.02 0-48.956 21.935-48.956 48.955S36.979 112.97 64 112.97c27.02 0 48.956-21.935 48.956-48.956c0-27.02-21.936-48.956-48.956-48.956"
+        />
+        <path
+          fill="#fff"
+          d="M84.285 29.392c-7.91 0-14.335 6.424-14.335 14.335s6.424 14.336 14.335 14.336s14.336-6.424 14.336-14.336s-6.424-14.335-14.335-14.335zM30.773 56.36v32.119h19.961v-3.611H34.87V56.359Zm57.584 8.37c-3.354 0-6.126.975-7.668 2.692c-1.055 1.19-1.488 2.516-1.582 4.801h3.705c.311-2.826 1.988-4.098 5.423-4.098c3.3 0 5.153 1.231 5.153 3.435v.974c0 1.542-.92 2.205-3.827 2.556c-5.193.663-5.991.839-7.398 1.407c-2.69 1.095-4.057 3.164-4.057 6.166c0 4.193 2.908 6.83 7.574 6.83c2.907 0 5.247-1.014 7.843-3.395c.257 2.34 1.407 3.395 3.787 3.395c.757 0 1.325-.081 2.515-.392v-2.773a3 3 0 0 1-.798.095c-1.284 0-1.988-.663-1.988-1.812V71.032c0-4.098-3.002-6.302-8.682-6.302m-33.742.664V83.19c0 3.84 2.867 6.302 7.357 6.302c3.395 0 5.545-1.19 7.709-4.233v3.219h3.3V65.393h-3.652v13.09c0 4.72-2.475 7.804-6.302 7.804c-2.907 0-4.76-1.772-4.76-4.544v-16.35Zm38.773 11.67v4.139c0 1.244-.365 1.988-1.46 3.002c-1.502 1.366-3.3 2.07-5.464 2.07c-2.867 0-4.544-1.367-4.544-3.706c0-2.42 1.636-3.665 5.558-4.233c3.881-.528 4.68-.703 5.91-1.271z"
+        />
+        <path
+          fill="#808080"
+          d="M61.733 0a64 64 0 0 0-5.57.436l.179 1.458a63 63 0 0 1 5.442-.426zm5.585.046l-.075 1.468a62 62 0 0 1 5.433.52L72.88.578a64 64 0 0 0-5.561-.532Zm-16.665 1.31a63 63 0 0 0-5.409 1.398l.43 1.405a62 62 0 0 1 5.284-1.367Zm27.72.237l-.33 1.431a63 63 0 0 1 5.262 1.455l.452-1.397a64 64 0 0 0-5.384-1.489M39.98 4.623a64 64 0 0 0-5.081 2.323l.668 1.308a62 62 0 0 1 4.964-2.27zm49.012.41l-.573 1.353a63 63 0 0 1 4.929 2.346l.688-1.298a64 64 0 0 0-5.044-2.4ZM30.04 9.706a64 64 0 0 0-4.6 3.17l.886 1.173a63 63 0 0 1 4.494-3.098zm-8.906 6.728a64 64 0 0 0-3.983 3.918l1.075 1.001a63 63 0 0 1 3.891-3.827zm-7.61 8.165a64 64 0 0 0-3.247 4.546l1.231.8a63 63 0 0 1 3.172-4.44zm-6.086 9.357a64 64 0 0 0-2.408 5.042l1.352.574a62 62 0 0 1 2.352-4.925zm113.623.973l-1.31.667a63 63 0 0 1 2.263 4.967l1.362-.55a64 64 0 0 0-2.315-5.083zM3.075 44.23a63 63 0 0 0-1.49 5.385l1.432.328a62 62 0 0 1 1.455-5.26Zm122.166 1.049l-1.404.429a63 63 0 0 1 1.366 5.285l1.437-.306a64 64 0 0 0-1.399-5.409zM.574 55.108a64 64 0 0 0-.528 5.561l1.467.075a63 63 0 0 1 .516-5.434Zm126.988 1.088l-1.458.179a63 63 0 0 1 .428 5.441l1.468-.05a64 64 0 0 0-.438-5.57M1.468 66.205L0 66.255a64 64 0 0 0 .435 5.57l1.458-.179a63 63 0 0 1-.425-5.441m125.018 1.071a63 63 0 0 1-.518 5.434l1.455.203a64 64 0 0 0 .53-5.561zM2.79 77.031l-1.437.304a63 63 0 0 0 1.398 5.41l1.405-.43A62 62 0 0 1 2.79 77.03Zm122.188 1.046a62 62 0 0 1-1.457 5.26l1.397.454a63 63 0 0 0 1.492-5.384zM5.981 87.459l-1.362.551a63 63 0 0 0 2.323 5.082l1.307-.669a62 62 0 0 1-2.268-4.964m115.627.99a62 62 0 0 1-2.354 4.925l1.296.69a64 64 0 0 0 2.41-5.04zM10.944 97.17l-1.245.78a64 64 0 0 0 3.17 4.6l1.172-.885a63 63 0 0 1-3.097-4.495m105.534.904a63 63 0 0 1-3.173 4.44l1.156.906a64 64 0 0 0 3.249-4.545zm-98.96 7.8l-1.092.983a64 64 0 0 0 3.917 3.983l1.002-1.074a63 63 0 0 1-3.827-3.892m92.24.79a63 63 0 0 1-3.893 3.826l.983 1.092a64 64 0 0 0 3.984-3.916zm-84.263 6.648l-.906 1.157a64 64 0 0 0 4.546 3.248l.8-1.232a63 63 0 0 1-4.44-3.173m76.16.654a63 63 0 0 1-4.495 3.096l.78 1.245a64 64 0 0 0 4.6-3.17zm-67.018 5.294l-.691 1.296a64 64 0 0 0 5.04 2.409l.575-1.352a62 62 0 0 1-4.924-2.353m57.775.496a62 62 0 0 1-4.964 2.268l.551 1.362a63 63 0 0 0 5.082-2.322zm-47.74 3.77l-.453 1.396a63 63 0 0 0 5.385 1.49l.329-1.43a62 62 0 0 1-5.26-1.456zm37.632.322a62 62 0 0 1-5.284 1.365l.304 1.437a63 63 0 0 0 5.41-1.398zm-27.003 2.122l-.203 1.455a64 64 0 0 0 5.561.529l.075-1.467a63 63 0 0 1-5.433-.517m16.335.139a63 63 0 0 1-5.442.424l.05 1.468a64 64 0 0 0 5.57-.434z"
+        />
+      </svg>
+    );
+  },
+);

package/src/components/icon/languages/npm.tsx

@@ -0,0 +1,25 @@
+import { component$ } from "@builder.io/qwik";
+import type { CommonLanguageProps } from "./language-interface";
+
+export const Npm = component$<CommonLanguageProps>(
+  ({ size = 24, ...props }) => {
+    return (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width={size}
+        height={size}
+        viewBox="0 0 128 128"
+        {...props}
+      >
+        <path
+          fill="#cb3837"
+          d="M0 7.062C0 3.225 3.225 0 7.062 0h113.88c3.838 0 7.063 3.225 7.063 7.062v113.88c0 3.838-3.225 7.063-7.063 7.063H7.062c-3.837 0-7.062-3.225-7.062-7.063zm23.69 97.518h40.395l.05-58.532h19.494l-.05 58.581h19.543l.05-78.075l-78.075-.1l-.1 78.126z"
+        />
+        <path
+          fill="#fff"
+          d="M25.105 65.52V26.512H40.96c8.72 0 26.274.034 39.008.075l23.153.075v77.866H83.645v-58.54H64.057v58.54H25.105z"
+        />
+      </svg>
+    );
+  },
+);

package/src/components/icon/languages/python.tsx

@@ -0,0 +1,67 @@
+import { component$ } from "@builder.io/qwik";
+import type { CommonLanguageProps } from "./language-interface";
+
+export const Python = component$<CommonLanguageProps>(
+  ({ size = 24, ...props }) => {
+    return (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width={size}
+        height={size}
+        viewBox="0 0 128 128"
+        {...props}
+      >
+        <linearGradient
+          id="deviconPython0"
+          x1="70.252"
+          x2="170.659"
+          y1="1237.476"
+          y2="1151.089"
+          gradientTransform="matrix(.563 0 0 -.568 -29.215 707.817)"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop offset="0" stop-color="#5a9fd4" />
+          <stop offset="1" stop-color="#306998" />
+        </linearGradient>
+        <linearGradient
+          id="deviconPython1"
+          x1="209.474"
+          x2="173.62"
+          y1="1098.811"
+          y2="1149.537"
+          gradientTransform="matrix(.563 0 0 -.568 -29.215 707.817)"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop offset="0" stop-color="#ffd43b" />
+          <stop offset="1" stop-color="#ffe873" />
+        </linearGradient>
+        <path
+          fill="url(#deviconPython0)"
+          d="M63.391 1.988c-4.222.02-8.252.379-11.8 1.007c-10.45 1.846-12.346 5.71-12.346 12.837v9.411h24.693v3.137H29.977c-7.176 0-13.46 4.313-15.426 12.521c-2.268 9.405-2.368 15.275 0 25.096c1.755 7.311 5.947 12.519 13.124 12.519h8.491V67.234c0-8.151 7.051-15.34 15.426-15.34h24.665c6.866 0 12.346-5.654 12.346-12.548V15.833c0-6.693-5.646-11.72-12.346-12.837c-4.244-.706-8.645-1.027-12.866-1.008M50.037 9.557c2.55 0 4.634 2.117 4.634 4.721c0 2.593-2.083 4.69-4.634 4.69c-2.56 0-4.633-2.097-4.633-4.69c-.001-2.604 2.073-4.721 4.633-4.721"
+          transform="translate(0 10.26)"
+        />
+        <path
+          fill="url(#deviconPython1)"
+          d="M91.682 28.38v10.966c0 8.5-7.208 15.655-15.426 15.655H51.591c-6.756 0-12.346 5.783-12.346 12.549v23.515c0 6.691 5.818 10.628 12.346 12.547c7.816 2.297 15.312 2.713 24.665 0c6.216-1.801 12.346-5.423 12.346-12.547v-9.412H63.938v-3.138h37.012c7.176 0 9.852-5.005 12.348-12.519c2.578-7.735 2.467-15.174 0-25.096c-1.774-7.145-5.161-12.521-12.348-12.521h-9.268zM77.809 87.927c2.561 0 4.634 2.097 4.634 4.692c0 2.602-2.074 4.719-4.634 4.719c-2.55 0-4.633-2.117-4.633-4.719c0-2.595 2.083-4.692 4.633-4.692"
+          transform="translate(0 10.26)"
+        />
+        <radialGradient
+          id="deviconPython2"
+          cx="1825.678"
+          cy="444.45"
+          r="26.743"
+          gradientTransform="matrix(0 -.24 -1.055 0 532.979 557.576)"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop offset="0" stop-color="#b8b8b8" stop-opacity="0.498" />
+          <stop offset="1" stop-color="#7f7f7f" stop-opacity="0" />
+        </radialGradient>
+        <path
+          fill="url(#deviconPython2)"
+          d="M97.309 119.597c0 3.543-14.816 6.416-33.091 6.416c-18.276 0-33.092-2.873-33.092-6.416s14.815-6.417 33.092-6.417c18.275 0 33.091 2.872 33.091 6.417"
+          opacity="0.444"
+        />
+      </svg>
+    );
+  },
+);

package/src/components/icon/languages/rust.tsx

@@ -0,0 +1,19 @@
+import { component$ } from "@builder.io/qwik";
+import type { CommonLanguageProps } from "./language-interface";
+
+export const Rust = component$<CommonLanguageProps>(
+  ({ size = 24, ...props }) => {
+    return (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 128 128"
+        fill="#a84f33"
+        width={size}
+        height={size}
+        {...props}
+      >
+        <path d="M62.96.242c-.232.135-1.203 1.528-2.16 3.097c-2.4 3.94-2.426 3.942-5.65.55c-2.098-2.208-2.605-2.612-3.28-2.607c-.44.002-.995.152-1.235.332s-.916 1.612-1.504 3.183c-1.346 3.6-1.41 3.715-2.156 3.86c-.46.086-1.343-.407-3.463-1.929c-1.565-1.125-3.1-2.045-3.411-2.045c-1.291 0-1.655.706-2.27 4.4c-.78 4.697-.754 4.681-4.988 2.758c-1.71-.776-3.33-1.41-3.603-1.41s-.792.293-1.15.652c-.652.652-.653.655-.475 4.246l.178 3.595l-.68.364c-.602.322-1.017.283-3.684-.348c-3.48-.822-4.216-.8-4.92.15l-.516.693l.692 2.964c.38 1.63.745 3.2.814 3.487c.067.287-.05.746-.26 1.02c-.348.448-.717.49-3.94.44c-5.452-.086-5.761.382-3.51 5.3c.718 1.56 1.305 2.98 1.305 3.15c0 .898-.717 1.224-3.794 1.727c-1.722.28-3.218.51-3.326.51c-.107 0-.43.235-.717.522c-.937.936-.671 1.816 1.453 4.814c2.646 3.735 2.642 3.75-1.73 5.421c-4.971 1.902-5.072 2.37-1.287 5.96c3.525 3.344 3.53 3.295-.461 5.804C.208 62.8.162 62.846.085 63.876c-.093 1.253-.071 1.275 3.538 3.48c3.57 2.18 3.57 2.246.067 5.56C-.078 76.48.038 77 5.013 78.877c4.347 1.64 4.353 1.66 1.702 5.394c-1.502 2.117-1.981 3-1.981 3.653c0 1.223.637 1.535 4.44 2.174c3.206.54 3.92.857 3.92 1.741c0 .182-.588 1.612-1.307 3.177c-2.236 4.87-1.981 5.275 3.31 5.275c4.93 0 4.799-.15 3.737 4.294c-.8 3.35-.813 3.992-.088 4.715c.554.556 1.6.494 4.87-.289c2.499-.596 2.937-.637 3.516-.328l.66.354l-.177 3.594c-.178 3.593-.177 3.595.475 4.248c.358.36.884.652 1.165.652s1.903-.63 3.604-1.404c4.22-1.916 4.194-1.932 4.973 2.75c.617 3.711.977 4.4 2.294 4.4c.327 0 1.83-.88 3.34-1.958c2.654-1.893 3.342-2.19 4.049-1.74c.182.115.89 1.67 1.572 3.455c1.003 2.625 1.37 3.31 1.929 3.576c1.062.51 1.72.1 4.218-2.62c3.016-3.286 3.14-3.27 5.602.72c2.72 4.406 3.424 4.396 6.212-.089c2.402-3.864 2.374-3.862 5.621-.47c2.157 2.25 2.616 2.61 3.343 2.61c.464 0 1.019-.175 1.23-.388c.214-.213.92-1.786 1.568-3.496c.649-1.71 1.321-3.2 1.495-3.31c.687-.436 1.398-.13 4.048 1.752c1.56 1.108 3.028 1.96 3.377 1.96c1.296 0 1.764-.92 2.302-4.535c.46-3.082.554-3.378 1.16-3.685c.596-.302.954-.2 3.75 1.07c1.701.77 3.323 1.402 3.604 1.402s.816-.302 1.184-.672l.672-.67l-.184-3.448c-.177-3.29-.16-3.468.364-3.943c.54-.488.596-.486 3.615.204c3.656.835 4.338.857 5.025.17c.671-.67.664-.818-.254-4.69c-1.03-4.346-1.168-4.19 3.78-4.19c3.374 0 3.75-.049 4.18-.523c.718-.793.547-1.702-.896-4.779c-.729-1.55-1.32-2.96-1.315-3.135c.024-.914.743-1.227 4.065-1.767c2.033-.329 3.553-.71 3.829-.96c.923-.833.584-1.918-1.523-4.873c-2.642-3.703-2.63-3.738 1.599-5.297c5.064-1.866 5.209-2.488 1.419-6.09c-3.51-3.335-3.512-3.317.333-5.677c4.648-2.853 4.655-3.496.082-6.335c-3.933-2.44-3.93-2.406-.405-5.753c3.78-3.593 3.678-4.063-1.295-5.965c-4.388-1.679-4.402-1.72-1.735-5.38c1.588-2.18 1.982-2.903 1.982-3.65c0-1.306-.586-1.598-4.436-2.22c-3.216-.52-3.924-.835-3.924-1.75c0-.174.588-1.574 1.307-3.113c1.406-3.013 1.604-4.22.808-4.94c-.428-.387-1-.443-4.067-.392c-3.208.054-3.618.008-4.063-.439c-.486-.488-.48-.557.278-3.725c.931-3.88.935-3.975.17-4.694c-.777-.73-1.262-.718-4.826.121c-2.597.612-3.027.653-3.617.337l-.67-.36l.185-3.582l.186-3.58l-.67-.67c-.369-.37-.891-.67-1.163-.67c-.27 0-1.884.64-3.583 1.421c-2.838 1.306-3.143 1.393-3.757 1.072c-.612-.32-.714-.637-1.237-3.829c-.603-3.693-.977-4.412-2.288-4.412c-.311 0-1.853.925-3.426 2.055c-2.584 1.856-2.93 2.032-3.574 1.807c-.533-.186-.843-.59-1.221-1.599c-.28-.742-.817-2.172-1.194-3.177c-.762-2.028-1.187-2.482-2.328-2.482c-.637 0-1.213.458-3.28 2.604c-3.25 3.375-3.261 3.374-5.65-.545C66.073 1.78 65.075.382 64.81.24c-.597-.32-1.3-.32-1.85.002m2.96 11.798c2.83 2.014 1.326 6.75-2.144 6.75c-3.368 0-5.064-4.057-2.66-6.36c1.358-1.3 3.304-1.459 4.805-.39m-3.558 12.507c1.855.705 2.616.282 6.852-3.8l3.182-3.07l1.347.18c4.225.56 12.627 4.25 17.455 7.666c4.436 3.14 10.332 9.534 12.845 13.93l.537.942l-2.38 5.364c-1.31 2.95-2.382 5.673-2.382 6.053c0 .878.576 2.267 1.13 2.726c.234.195 2.457 1.265 4.939 2.378l4.51 2.025l.178 1.148c.23 1.495.26 5.167.052 6.21l-.163.816h-2.575c-2.987 0-2.756-.267-2.918 3.396c-.118 2.656-.76 4.124-2.22 5.075c-2.377 1.551-6.304 1.27-7.97-.57c-.255-.284-.752-1.705-1.105-3.16c-1.03-4.254-2.413-6.64-5.193-8.965c-.878-.733-1.595-1.418-1.595-1.522c0-.102.965-.915 2.145-1.803c4.298-3.24 6.77-7.012 7.04-10.747c.519-7.126-5.158-13.767-13.602-15.92c-2.002-.51-2.857-.526-27.624-.526c-14.057 0-25.56-.092-25.56-.204c0-.263 3.125-3.295 4.965-4.816c5.054-4.178 11.618-7.465 18.417-9.22l2.35-.61l3.34 3.387c1.839 1.863 3.64 3.5 4.003 3.637M20.3 46.34c1.539 1.008 2.17 3.54 1.26 5.062c-1.405 2.356-4.966 2.455-6.373.178c-2.046-3.309 1.895-7.349 5.113-5.24m90.672.13c4.026 2.454.906 8.493-3.404 6.586c-2.877-1.273-2.97-5.206-.155-6.64c1.174-.6 2.523-.579 3.56.053M32.163 61.5v15.02h-13.28l-.526-2.285c-1.036-4.5-1.472-9.156-1.211-12.969l.182-2.679l4.565-2.047c2.864-1.283 4.706-2.262 4.943-2.625c1.038-1.584.94-2.715-.518-5.933l-.68-1.502h6.523V61.5M70.39 47.132c2.843.74 4.345 2.245 4.349 4.355c.002 1.55-.765 2.52-2.67 3.38c-1.348.61-1.562.625-10.063.708l-8.686.084v-8.92h7.782c6.078 0 8.112.086 9.288.393m-2.934 21.554c1.41.392 3.076 1.616 3.93 2.888c.898 1.337 1.423 3.076 2.667 8.836c1.05 4.87 1.727 6.46 3.62 8.532c2.345 2.566 1.8 2.466 13.514 2.466c5.61 0 10.198.09 10.198.2c0 .197-3.863 4.764-4.03 4.764c-.048 0-2.066-.422-4.484-.939c-6.829-1.458-7.075-1.287-8.642 6.032l-1.008 4.702l-.91.448c-1.518.75-6.453 2.292-9.01 2.82c-4.228.87-8.828 1.162-12.871.821c-6.893-.585-16.02-3.259-16.377-4.8c-.075-.327-.535-2.443-1.018-4.704c-.485-2.26-1.074-4.404-1.31-4.764c-1.13-1.724-2.318-1.83-7.547-.674c-1.98.44-3.708.796-3.84.796c-.248 0-3.923-4.249-3.923-4.535c0-.09 8.728-.194 19.396-.23l19.395-.066l.07-6.89c.05-4.865-.018-6.997-.23-7.25c-.234-.284-1.485-.358-6.011-.358H53.32v-8.36l6.597.001c3.626.002 7.02.12 7.539.264M37.57 100.02c3.084 1.88 1.605 6.804-2.043 6.8c-3.74 0-5.127-4.88-1.94-6.826c1.055-.643 2.908-.63 3.983.026m56.48.206c1.512 1.108 2.015 3.413 1.079 4.95c-2.46 4.034-8.612.827-6.557-3.419c1.01-2.085 3.695-2.837 5.478-1.53" />
+      </svg>
+    );
+  },
+);

package/src/components/icon/languages/sql.tsx

@@ -0,0 +1,21 @@
+import { component$ } from "@builder.io/qwik";
+import type { CommonLanguageProps } from "./language-interface";
+
+export const Sql = component$<CommonLanguageProps>(
+  ({ size = 24, ...props }) => {
+    return (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width={size}
+        height={size}
+        viewBox="0 0 128 128"
+        {...props}
+      >
+        <path
+          fill="#00618a"
+          d="M117.688 98.242c-6.973-.191-12.297.461-16.852 2.379c-1.293.547-3.355.559-3.566 2.18c.711.746.82 1.859 1.387 2.777c1.086 1.754 2.922 4.113 4.559 5.352c1.789 1.348 3.633 2.793 5.551 3.961c3.414 2.082 7.223 3.27 10.504 5.352c1.938 1.23 3.859 2.777 5.75 4.164c.934.684 1.563 1.75 2.773 2.18v-.195c-.637-.812-.801-1.93-1.387-2.777l-2.578-2.578c-2.52-3.344-5.719-6.281-9.117-8.719c-2.711-1.949-8.781-4.578-9.91-7.73l-.199-.199c1.922-.219 4.172-.914 5.949-1.391c2.98-.797 5.645-.59 8.719-1.387l4.164-1.187v-.793c-1.555-1.594-2.664-3.707-4.359-5.152c-4.441-3.781-9.285-7.555-14.273-10.703c-2.766-1.746-6.184-2.883-9.117-4.363c-.988-.496-2.719-.758-3.371-1.586c-1.539-1.961-2.379-4.449-3.566-6.738c-2.488-4.793-4.93-10.023-7.137-15.066c-1.504-3.437-2.484-6.828-4.359-9.91c-9-14.797-18.687-23.73-33.695-32.508c-3.195-1.867-7.039-2.605-11.102-3.57l-6.543-.395c-1.332-.555-2.715-2.184-3.965-2.977C16.977 3.52 4.223-3.312.539 5.672C-1.785 11.34 4.016 16.871 6.09 19.746c1.457 2.012 3.32 4.273 4.359 6.539c.688 1.492.805 2.984 1.391 4.559c1.438 3.883 2.695 8.109 4.559 11.695c.941 1.816 1.98 3.727 3.172 5.352c.727.996 1.98 1.438 2.18 2.973c-1.227 1.715-1.297 4.375-1.984 6.543c-3.098 9.77-1.926 21.91 2.578 29.137c1.383 2.223 4.641 6.98 9.117 5.156c3.918-1.598 3.043-6.539 4.164-10.902c.254-.988.098-1.715.594-2.379v.199l3.57 7.133c2.641 4.254 7.324 8.699 11.297 11.699c2.059 1.555 3.68 4.242 6.344 5.152v-.199h-.199c-.516-.805-1.324-1.137-1.98-1.781c-1.551-1.523-3.277-3.414-4.559-5.156c-3.613-4.902-6.805-10.27-9.711-15.855c-1.391-2.668-2.598-5.609-3.77-8.324c-.453-1.047-.445-2.633-1.387-3.172c-1.281 1.988-3.172 3.598-4.164 5.945c-1.582 3.754-1.789 8.336-2.375 13.082c-.348.125-.195.039-.398.199c-2.762-.668-3.73-3.508-4.758-5.949c-2.594-6.164-3.078-16.09-.793-23.191c.59-1.836 3.262-7.617 2.18-9.316c-.516-1.691-2.219-2.672-3.172-3.965c-1.18-1.598-2.355-3.703-3.172-5.551c-2.125-4.805-3.113-10.203-5.352-15.062c-1.07-2.324-2.875-4.676-4.359-6.738c-1.645-2.289-3.484-3.977-4.758-6.742c-.453-.984-1.066-2.559-.398-3.566c.215-.684.516-.969 1.191-1.191c1.148-.887 4.352.297 5.547.793c3.18 1.32 5.832 2.578 8.527 4.363c1.289.855 2.598 2.512 4.16 2.973h1.785c2.789.641 5.914.195 8.523.988c4.609 1.402 8.738 3.582 12.488 5.949c11.422 7.215 20.766 17.48 27.156 29.734c1.027 1.973 1.473 3.852 2.379 5.945c1.824 4.219 4.125 8.559 5.941 12.688c1.816 4.113 3.582 8.27 6.148 11.695c1.348 1.801 6.551 2.766 8.918 3.766c1.66.699 4.379 1.43 5.949 2.379c3 1.809 5.906 3.965 8.723 5.945c1.402.992 5.73 3.168 5.945 4.957zm-88.605-75.52c-1.453-.027-2.48.156-3.566.395v.199h.195c.695 1.422 1.918 2.34 2.777 3.566l1.98 4.164l.199-.195c1.227-.867 1.789-2.25 1.781-4.363c-.492-.52-.562-1.164-.992-1.785c-.562-.824-1.66-1.289-2.375-1.98zm0 0"
+        />
+      </svg>
+    );
+  },
+);

package/src/components/icon/languages/terraform.tsx

@@ -0,0 +1,31 @@
+import { component$ } from "@builder.io/qwik";
+import type { CommonLanguageProps } from "./language-interface";
+
+export const Terraform = component$<CommonLanguageProps>(
+  ({ size = 24, ...props }) => {
+    return (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width={size}
+        height={size}
+        viewBox="0 0 128 128"
+        {...props}
+      >
+        <g fill-rule="evenodd">
+          <path
+            fill="#5c4ee5"
+            d="M77.941 44.5v36.836L46.324 62.918V26.082zm0 0"
+          />
+          <path
+            fill="#4040b2"
+            d="m81.41 81.336l31.633-18.418V26.082L81.41 44.5zm0 0"
+          />
+          <path
+            fill="#5c4ee5"
+            d="M11.242 42.36L42.86 60.776V23.941L11.242 5.523zm66.699 43.015L46.324 66.957v36.82l31.617 18.418zm0 0"
+          />
+        </g>
+      </svg>
+    );
+  },
+);

package/src/components/icon/languages/typescript.tsx

@@ -0,0 +1,22 @@
+import { component$ } from "@builder.io/qwik";
+import type { CommonLanguageProps } from "./language-interface";
+
+export const Typescript = component$<CommonLanguageProps>(
+  ({ size = 24, ...props }) => {
+    return (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width={size}
+        height={size}
+        viewBox="0 0 128 128"
+        {...props}
+      >
+        <path fill="#fff" d="M22.67 47h99.67v73.67H22.67z" />
+        <path
+          fill="#007acc"
+          d="M1.5 63.91v62.5h125v-125H1.5zm100.73-5a15.56 15.56 0 0 1 7.82 4.5a20.6 20.6 0 0 1 3 4c0 .16-5.4 3.81-8.69 5.85c-.12.08-.6-.44-1.13-1.23a7.09 7.09 0 0 0-5.87-3.53c-3.79-.26-6.23 1.73-6.21 5a4.6 4.6 0 0 0 .54 2.34c.83 1.73 2.38 2.76 7.24 4.86c8.95 3.85 12.78 6.39 15.16 10c2.66 4 3.25 10.46 1.45 15.24c-2 5.2-6.9 8.73-13.83 9.9a38.3 38.3 0 0 1-9.52-.1a23 23 0 0 1-12.72-6.63c-1.15-1.27-3.39-4.58-3.25-4.82a9 9 0 0 1 1.15-.73L82 101l3.59-2.08l.75 1.11a16.8 16.8 0 0 0 4.74 4.54c4 2.1 9.46 1.81 12.16-.62a5.43 5.43 0 0 0 .69-6.92c-1-1.39-3-2.56-8.59-5c-6.45-2.78-9.23-4.5-11.77-7.24a16.5 16.5 0 0 1-3.43-6.25a25 25 0 0 1-.22-8c1.33-6.23 6-10.58 12.82-11.87a31.7 31.7 0 0 1 9.49.26zm-29.34 5.24v5.12H56.66v46.23H45.15V69.26H28.88v-5a49 49 0 0 1 .12-5.17C29.08 59 39 59 51 59h21.83z"
+        />
+      </svg>
+    );
+  },
+);

package/src/components/media/elm-block-image.module.scss

@@ -0,0 +1,68 @@
+.block-image {
+  margin: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  gap: 0.5rem;
+  width: 100%;
+}
+
+.image-container {
+  width: 100%;
+  height: 100%;
+  position: relative;
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.image {
+  max-width: 100%;
+  max-height: 100%;
+  border-radius: 0.25rem;
+  box-shadow: 0 0 0.125rem rgba(black, 0.1);
+  transition: opacity 400ms;
+  opacity: var(--opacity, 1);
+  user-select: none;
+
+  cursor: var(--cursor);
+}
+
+.fallback {
+  width: 100%;
+  height: 100%;
+  inset: 0 0 auto auto;
+  position: absolute;
+  transition: opacity 400ms;
+  opacity: var(--opacity, 1);
+  pointer-events: none;
+}
+
+.caption-box {
+  box-sizing: border-box;
+  padding: 0rem 1rem;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 1rem;
+  opacity: 0.75;
+  opacity: var(--opacity, 1);
+  transition: opacity 400ms;
+}
+
+.modal-container {
+  width: 100vw;
+  height: 100vh;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: fixed;
+  inset: 0 0 auto auto;
+  z-index: 100;
+  background-color: rgba(#23262a, 0.8);
+  cursor: zoom-out;
+  opacity: var(--opacity, 1);
+  transition: opacity 200ms;
+}

package/src/components/media/elm-block-image.stories.tsx

@@ -0,0 +1,79 @@
+import type { Meta, StoryObj } from "storybook-framework-qwik";
+import { ElmBlockImage } from "./elm-block-image";
+
+import landscape from "../../assets/images/lamdscape.svg?url";
+import portrait from "../../assets/images/portrait.svg?url";
+import square from "../../assets/images/square.svg?url";
+
+const meta: Meta<typeof ElmBlockImage> = {
+  title: "Components/Media/elm-block-image",
+  component: ElmBlockImage,
+  tags: ["autodocs"],
+  args: {
+    src: "https://images.unsplash.com/photo-1556983703-27576e5afa24?ixlib=rb-4.0.3&q=85&fm=jpg&crop=entropy&cs=srgb",
+    block: true,
+    enableModal: true,
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Primary: Story = {
+  render() {
+    return (
+      <>
+        <ElmBlockImage {...this.args} />
+        <div>Some text below the image to demonstrate block display.</div>
+      </>
+    );
+  },
+};
+
+export const Svg: Story = {
+  args: {
+    src: "https://nuxt.com/cdn-cgi/image/w=1024,h=878/assets/landing/deploy.svg",
+    alt: "Deploy your app anywhere",
+  },
+};
+
+export const LongAlt: Story = {
+  args: {
+    src: "https://www.ikuma.cloud/api/v2/blog/leather-shoes-painting/og-image?lang=en",
+    caption:
+      "One-command deployments and zero-configuration options make it easy to get your Nuxt app live. Choose your platform, and let Nuxt handle the rest, allowing you to focus on building great applications rather than managing complex deployments.",
+  },
+};
+
+export const Invalid: Story = {
+  args: {
+    src: "invalid",
+  },
+};
+
+export const Landscape: Story = {
+  args: {
+    src: landscape,
+    caption: "A landscape image",
+    width: 400,
+    height: 100,
+  },
+};
+
+export const Portrait: Story = {
+  args: {
+    src: portrait,
+    caption: "A portrait image",
+    width: 100,
+    height: 200,
+  },
+};
+
+export const Square: Story = {
+  args: {
+    src: square,
+    caption: "A square image",
+    width: 200,
+    height: 200,
+  },
+};

package/src/components/media/elm-block-image.tsx

@@ -0,0 +1,110 @@
+import { $, component$, useSignal, type Numberish } from "@builder.io/qwik";
+
+import styles from "./elm-block-image.module.scss";
+import { ElmInlineText } from "../typography/elm-inline-text";
+import { ElmMdiIcon } from "../icon/elm-mdi-icon";
+import { ElmRectangleWave } from "../fallback/elm-rectangle-wave";
+import { mdiMessageImageOutline } from "@mdi/js";
+
+export interface ElmBlockImageProps {
+  /**
+   * Image source URL
+   */
+  src: string;
+
+  /**
+   * Image alt text
+   */
+  alt?: string;
+
+  enableModal?: boolean;
+
+  caption?: string;
+
+  width?: Numberish;
+
+  height?: Numberish;
+}
+
+export const ElmBlockImage = component$<ElmBlockImageProps>(
+  ({ src, alt, caption, width, height, enableModal = true }) => {
+    const isLoading = useSignal(true);
+    const isShowModal = useSignal(false);
+
+    const handleImageLoad = $(() => {
+      isLoading.value = false;
+    });
+
+    const handleToggleModal = $(() => {
+      if (enableModal) {
+        isShowModal.value = !isShowModal.value;
+      }
+    });
+
+    const ImageComponent = (
+      <img
+        class={[styles.image]}
+        src={src}
+        alt={alt ?? caption ?? "Image"}
+        width={width}
+        height={height}
+        onLoad$={handleImageLoad}
+        style={{
+          "--opacity": isLoading.value ? 0 : 1,
+          "--cursor": enableModal
+            ? isShowModal.value
+              ? "zoom-out"
+              : "zoom-in"
+            : "default",
+        }}
+      />
+    );
+
+    const Modal = (
+      <div
+        class={styles["modal-container"]}
+        style={{
+          pointerEvents: isShowModal.value ? "auto" : "none",
+          "--opacity": isShowModal.value ? 1 : 0,
+        }}
+        onClick$={handleToggleModal}
+      >
+        {ImageComponent}
+      </div>
+    );
+
+    return (
+      <figure class={styles["block-image"]}>
+        <div
+          class={styles["image-container"]}
+          style={{ "--opacity": isLoading.value ? 1 : 0 }}
+          onClick$={handleToggleModal}
+        >
+          {ImageComponent}
+
+          <div class={styles["fallback"]}>
+            <ElmRectangleWave />
+          </div>
+        </div>
+
+        {caption && (
+          <figcaption
+            class={styles["caption-box"]}
+            style={{ "--opacity": isLoading.value ? 0 : 1 }}
+          >
+            <span style={{ flex: "1" }}>
+              <ElmMdiIcon
+                d={mdiMessageImageOutline}
+                color="#cdb57b"
+                size="1.25rem"
+              />
+            </span>
+            <ElmInlineText size="1rem">{caption}</ElmInlineText>
+          </figcaption>
+        )}
+
+        {Modal}
+      </figure>
+    );
+  },
+);