Add Redpanda / Upstash / Kinesis to logos (#301)

* Fix README block.

Add Redpanda + Upstash logos.

Fix bad git setup.

* s/fill-opacity/fillOpacity/

* Adjust logo icons w/h.

* Add aws kinesis icon.

---------

Co-authored-by: Pete Hampton <[email protected]>

README.md

@@ -1,16 +1,18 @@
 # Click UI
+
 The home of the ClickHouse design system and component library. Click UI is in very early development and subject to change, we do not recommend using it for production purposes.
 
 ### Using Click UI in an external app
+
 Click UI has been tested in NextJS, Gatsby, and Vite. If you run into problems using it in your app, please create an issue and our team will try to answer.
 1. Navigate to your app's route and run
    `npm i @clickhouse/click-ui`
    or
    `yarn add @clickhouse/click-ui`
 2. Make sure to wrap your application in the Click UI `ClickUIProvider`, without doing this, you may run into issues with styled-components. Once thats done, you'll be able to import the individual components that you want to use on each page. Here's an example an `App.tsx` in NextJS.
 
-```
-import { Switch, Text, ThemeName, ClickUIProvider, Title } from '@clickhouse/click-ui'
+```ts
+import { ClickUIProvider, Text, ThemeName, Title, Switch } from '@clickhouse/click-ui'
 
 function App() {
   const [theme, setTheme] = useState<ThemeName>('dark')
@@ -32,9 +34,8 @@ function App() {
 export default App
 ```
 
-
-
 ### To develop this library locally 🚀
+
 1. Clone this repo, cd into the `click-ui` directory
 2. To install dependencies, run `npm i`
 3. To build the latest styles, run `npm run generate-tokens`

src/components/Logos/AWSKinesis.tsx

@@ -0,0 +1,24 @@
+import { SVGAttributes } from "react";
+
+const AWSKinesis = (props: SVGAttributes<SVGElement>) => (
+  <svg
+    width="64"
+    height="64"
+    viewBox="0 0 64 64"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}>
+    <defs>
+      <linearGradient x1="0%" y1="100%" x2="100%" y2="0%" id="Arch_Amazon-Kinesis_32_svg__a">
+        <stop stopColor="#4D27A8" offset="0"/>
+        <stop stopColor="#A166FF" offset="1"/>
+      </linearGradient>
+    </defs>
+    <g fill="none" fillRule="evenodd" transform="matrix(1.600000023841858, 0, 0, 1.600000023841858, 0, 0)">
+      <path d="M0 0h40v40H0z" fill="url(#Arch_Amazon-Kinesis_32_svg__a)"/>
+      <path d="M9.886 31.107h1.005c0-4.043 2.626-8.176 22.109-8.176v-1.006c-20.368 0-23.114 4.642-23.114 9.182M12.773 34h1.004c0-3.64 0-9.14 19.223-9.14v-1.007c-18.665 0-20.227 5.013-20.227 10.147M8.004 13.75H7c0 3.555 4.788 5.81 14.233 6.75C11.788 21.438 7 23.694 7 27.25h1.004c0-2.333 3.247-6.247 24.996-6.247v-1.007c-21.749 0-24.996-3.913-24.996-6.246m2.887-3.857H9.886c0 4.54 2.746 9.181 23.114 9.181v-1.006c-19.483 0-22.11-4.133-22.11-8.175M33 16.139v1.007c-18.665 0-20.227-5.013-20.227-10.146h1.004c0 3.64 0 9.14 19.223 9.14" fill="#FFF"/>
+    </g>
+  </svg>
+);
+
+export default AWSKinesis;

src/components/Logos/LogosDark.ts

@@ -1,9 +1,11 @@
 import { SVGAttributes } from "react";
 import Airbyte from "./Airbyte";
 import AWSDark from "./AWSDark";
+import AWSKinesis from "./AWSKinesis";
 import AWSRedshift from "./AWSRedshift";
 import AWSS3 from "./AWS_S3";
 import AWSAthena from "./AWSAthena";
+import AWSMsk from "./AWSMsk";
 import Azure from "./Azure";
 import BigQuery from "./BigQuery";
 import Chash from "./Chash";
@@ -35,19 +37,21 @@ import NodeJs from "./NodeJs";
 import Postgres from "./Postgres";
 import Prequel from "./Prequel";
 import Python from "./Python";
+import Redpanda from "./Redpanda";
 import Rust from "./RustDark";
 import Snowflake from "./Snowflake";
 import Superset from "./Superset";
 import Tableau from "./TableauDark";
+import Upstash from "./Upstash";
 import Vector from "./Vector";
 import { LogoName } from "./types";
-import AWSMsk from "./AWSMsk";
 
 const LogosDark: Record<LogoName, (props: SVGAttributes<SVGElement>) => JSX.Element> = {
   clickhouse: Clickhouse,
   airbyte: Airbyte,
   aws: AWSDark,
   "aws-athena": AWSAthena,
+  "aws-kinesis": AWSKinesis,
   "aws-msk": AWSMsk,
   "aws-redshift": AWSRedshift,
   "aws-s3": AWSS3,
@@ -81,10 +85,12 @@ const LogosDark: Record<LogoName, (props: SVGAttributes<SVGElement>) => JSX.Elem
   postgres: Postgres,
   prequel: Prequel,
   python: Python,
+  redpanda: Redpanda,
   rust: Rust,
   snowflake: Snowflake,
   superset: Superset,
   tableau: Tableau,
+  upstash: Upstash,
   vector: Vector
 };
 

src/components/Logos/LogosLight.ts

@@ -2,7 +2,9 @@ import { SVGAttributes } from "react";
 import Airbyte from "./Airbyte";
 import AWSLight from "./AWSLight";
 import AWSAthena from "./AWSAthena";
+import AWSKinesis from "./AWSKinesis";
 import AWSRedshift from "./AWSRedshift";
+import AWSMsk from "./AWSMsk";
 import AWSS3 from "./AWS_S3";
 import Azure from "./Azure";
 import BigQuery from "./BigQuery";
@@ -35,19 +37,21 @@ import NodeJs from "./NodeJs";
 import Postgres from "./Postgres";
 import Prequel from "./Prequel";
 import Python from "./Python";
+import Redpanda from "./Redpanda";
 import Rust from "./RustLight";
 import Snowflake from "./Snowflake";
 import Superset from "./Superset";
 import Tableau from "./TableauLight";
+import Upstash from "./Upstash";
 import Vector from "./Vector";
 import { LogoName } from "./types";
-import AWSMsk from "./AWSMsk";
 
 const LogosLight: Record<LogoName, (props: SVGAttributes<SVGElement>) => JSX.Element> = {
   clickhouse: Clickhouse,
   airbyte: Airbyte,
   aws: AWSLight,
   "aws-athena": AWSAthena,
+  "aws-kinesis": AWSKinesis,
   "aws-msk": AWSMsk,
   "aws-redshift": AWSRedshift,
   "aws-s3": AWSS3,
@@ -81,10 +85,12 @@ const LogosLight: Record<LogoName, (props: SVGAttributes<SVGElement>) => JSX.Ele
   postgres: Postgres,
   prequel: Prequel,
   python: Python,
+  redpanda: Redpanda,
   rust: Rust,
   snowflake: Snowflake,
   superset: Superset,
   tableau: Tableau,
+  upstash: Upstash,
   vector: Vector
 };
 

src/components/Logos/Redpanda.tsx

@@ -0,0 +1,18 @@
+import { SVGAttributes } from "react";
+
+const Redpanda = (props: SVGAttributes<SVGElement>) => (
+  <svg 
+    width="64" 
+    height="64" 
+    viewBox="0 0 64 64" 
+    fill="none" 
+    xmlns="http://www.w3.org/2000/svg" 
+    {...props}
+  >
+    <path d="M42.5714 41.429C41.7622 39.9352 41.0464 38.4103 40.3929 36.8542C42.8203 35.7961 44.9677 34.2712 46.7727 32.3417C49.5736 29.5719 51.0052 25.6506 51.0052 20.609C51.0052 14.7583 49.1068 10.2146 45.2789 6.94689C41.4199 3.7103 36.5028 1.99864 31.4923 2.09201H7V58.0165H18.9194V37.9435H23.463L26.2328 37.8812C27.2598 40.402 29.5628 45.9105 30.901 48.8358L42.5714 41.429ZM18.9194 13.2645H29.9051C35.4135 13.2645 38.1522 15.5052 38.1833 19.9555C38.1833 24.7481 35.1023 27.1445 28.9715 27.1445H18.9194V13.2645Z" fill="#E14226"/>
+    <path d="M54.8955 54.0333L51.7834 51.8237L38.8682 60.2264L43.3807 62.0003L51.2543 61.9692L56.9806 57.8923L54.8955 54.0333Z" fill="#E14226"/>
+    <path d="M44.5324 44.6968L32.5508 52.2592L35.9119 57.5498L48.6715 49.4894L44.5324 44.6968Z" fill="#E14226"/>
+  </svg>
+);
+
+export default Redpanda;

src/components/Logos/Upstash.tsx

@@ -0,0 +1,21 @@
+import { SVGAttributes } from "react";
+
+const Upstash = (props: SVGAttributes<SVGElement>) => (
+  <svg 
+    width="64" 
+    height="64" 
+    viewBox="0 0 64 64" 
+    fill="none" 
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path d="M9 55.2839C19.2877 65.5715 35.9674 65.5715 46.2551 55.2839C56.5427 44.9962 56.5427 28.3165 46.2551 18.0288L41.5981 22.6856C49.314 30.4015 49.314 42.9112 41.5981 50.6269C33.8825 58.3428 21.3727 58.3428 13.6568 50.6269L9 55.2839Z" fill="#00C98D"/>
+    <path d="M18.3135 45.9707C23.4573 51.1145 31.7971 51.1145 36.941 45.9707C42.0848 40.8269 42.0848 32.4871 36.941 27.3433L32.2841 32.0001C34.856 34.572 34.856 38.7419 32.2841 41.3139C29.7121 43.8858 25.5422 43.8858 22.9703 41.3139L18.3135 45.9707Z" fill="#00C98D"/>
+    <path d="M55.5695 8.71574C45.2817 -1.57191 28.6021 -1.57191 18.3144 8.71574C8.0267 19.0035 8.0267 35.6831 18.3144 45.9708L22.9712 41.314C15.2556 33.5982 15.2556 21.0884 22.9712 13.3727C30.687 5.65689 43.1968 5.65689 50.9125 13.3727L55.5695 8.71574Z" fill="#00C98D"/>
+    <path d="M46.2551 18.0297C41.1113 12.8859 32.7713 12.8859 27.6275 18.0297C22.4835 23.1736 22.4835 31.5134 27.6275 36.6572L32.2843 32.0004C29.7124 29.4285 29.7124 25.2586 32.2843 22.6866C34.8562 20.1147 39.0261 20.1147 41.5981 22.6866L46.2551 18.0297Z" fill="#00C98D"/>
+    <path d="M55.5695 8.71574C45.2817 -1.57191 28.6021 -1.57191 18.3144 8.71574C8.0267 19.0035 8.0267 35.6831 18.3144 45.9708L22.9712 41.314C15.2556 33.5982 15.2556 21.0884 22.9712 13.3727C30.687 5.65689 43.1968 5.65689 50.9125 13.3727L55.5695 8.71574Z" fill="white" fillOpacity="0.4"/>
+    <path d="M46.2551 18.0297C41.1113 12.8859 32.7713 12.8859 27.6275 18.0297C22.4835 23.1736 22.4835 31.5134 27.6275 36.6572L32.2843 32.0004C29.7124 29.4285 29.7124 25.2586 32.2843 22.6866C34.8562 20.1147 39.0261 20.1147 41.5981 22.6866L46.2551 18.0297Z" fill="white" fillOpacity="0.4"/>
+  </svg>
+);
+
+export default Upstash;

src/components/Logos/types.ts

@@ -3,6 +3,7 @@ export type LogoName =
   | "airbyte"
   | "aws-s3"
   | "aws-athena" 
+  | "aws-kinesis"
   | "aws-redshift"
   | "aws-msk"
   | "kafka"
@@ -34,10 +35,12 @@ export type LogoName =
   | "vector"
   | "kubenetes"
   | "c#"
+  | "redpanda"
   | "rust"
   | "hudi"
   | "deltalake"
   | "snowflake"
   | "mongodb"
   | "bigquery"
-  | "iceberg";
+  | "iceberg"
+  | "upstash";