Jamakase/add credits page (#6686)

* Create credits route

* Add base components to credits page

* Add bar chart

* Add link to sidebar

airbyte-webapp/package.json

@@ -45,6 +45,7 @@
     "react-use": "^15.3.8",
     "react-use-intercom": "^1.4.0",
     "react-widgets": "^4.6.1",
+    "recharts": "^2.1.3",
     "rest-hooks": "^5.0.20",
     "sanitize-html": "^2.3.3",
     "styled-components": "^5.1.1",

airbyte-webapp/src/components/BarChart/BarChart.tsx

@@ -0,0 +1,51 @@
+import React from "react";
+import {
+  CartesianGrid,
+  BarChart as BasicBarChart,
+  ResponsiveContainer,
+  XAxis,
+  YAxis,
+  Bar,
+} from "recharts";
+import { barChartColors, theme } from "theme";
+
+type BarChartProps = {
+  data?: {
+    name: string;
+    value: number | number[];
+  }[];
+  legendLabels: string[];
+};
+
+const BarChart: React.FC<BarChartProps> = ({ data, legendLabels }) => {
+  const chartLinesColor = theme.greyColor20;
+  const chartTicksColor = theme.lightTextColor;
+
+  return (
+    <ResponsiveContainer>
+      <BasicBarChart data={data} margin={{ right: 12 }}>
+        <CartesianGrid vertical={false} stroke={chartLinesColor} />
+        <XAxis
+          dataKey="name"
+          axisLine={false}
+          tickLine={false}
+          stroke={chartTicksColor}
+          tick={{ fontSize: "11px" }}
+          tickSize={10}
+        />
+        <YAxis
+          axisLine={false}
+          tickLine={false}
+          stroke={chartTicksColor}
+          tick={{ fontSize: "11px" }}
+          tickSize={10}
+        />
+        {legendLabels.map((barName, key) => (
+          <Bar dataKey={barName} fill={barChartColors[key]} />
+        ))}
+      </BasicBarChart>
+    </ResponsiveContainer>
+  );
+};
+
+export default React.memo(BarChart);

airbyte-webapp/src/components/BarChart/index.tsx

@@ -0,0 +1,4 @@
+import BarChart from "./BarChart";
+
+export default BarChart;
+export { BarChart };