1 files changed, 29 insertions, 0 deletions
diff --git a/src/components/common/TypeIcon.tsx b/src/components/common/TypeIcon.tsx
new file mode 100644
index 0000000..8894b3a
--- /dev/null
+++ b/src/components/common/TypeIcon.tsx
@@ -0,0 +1,29 @@
+import { Row } from '@umami/react-zen';
+import type { ReactNode } from 'react';
+
+export function TypeIcon({
+  type,
+  value,
+  children,
+}: {
+  type: 'browser' | 'country' | 'device' | 'os';
+  value: string;
+  children?: ReactNode;
+}) {
+  return (
+    <Row gap="3" alignItems="center">
+      <img
+        src={`${process.env.basePath || ''}/images/${type}/${
+          value?.replaceAll(' ', '-').toLowerCase() || 'unknown'
+        }.png`}
+        onError={e => {
+          e.currentTarget.src = `${process.env.basePath || ''}/images/${type}/unknown.png`;
+        }}
+        alt={value}
+        width={type === 'country' ? undefined : 16}
+        height={type === 'country' ? undefined : 16}
+      />
+      {children}
+    </Row>
+  );
+}