From e7dfb381ff2635c2964a5d1922cd1354da7e28b2 Mon Sep 17 00:00:00 2001
From: Bill <billsonnn@live.com>
Date: Wed, 17 Nov 2021 03:47:06 -0500
Subject: [PATCH] Add ItemCountView

---
 src/views/shared/item-count/ItemCountView.scss     | 6 ++++++
 src/views/shared/item-count/ItemCountView.tsx      | 9 +++++++++
 src/views/shared/item-count/ItemCountView.types.ts | 4 ++++
 3 files changed, 19 insertions(+)
 create mode 100644 src/views/shared/item-count/ItemCountView.scss
 create mode 100644 src/views/shared/item-count/ItemCountView.tsx
 create mode 100644 src/views/shared/item-count/ItemCountView.types.ts

diff --git a/src/views/shared/item-count/ItemCountView.scss b/src/views/shared/item-count/ItemCountView.scss
new file mode 100644
index 00000000..9db41f2b
--- /dev/null
+++ b/src/views/shared/item-count/ItemCountView.scss
@@ -0,0 +1,6 @@
+.nitro-item-count {
+    top: 2px;
+    right: 2px;
+    font-size: 8px;
+    z-index: 1;
+}
diff --git a/src/views/shared/item-count/ItemCountView.tsx b/src/views/shared/item-count/ItemCountView.tsx
new file mode 100644
index 00000000..5287b708
--- /dev/null
+++ b/src/views/shared/item-count/ItemCountView.tsx
@@ -0,0 +1,9 @@
+import { FC } from 'react';
+import { ItemCountViewProps } from './ItemCountView.types';
+
+export const ItemCountView: FC<ItemCountViewProps> = props =>
+{
+    const { count = 0 } = props;
+
+    return <div className="position-absolute badge border bg-danger px-1 rounded-circle nitro-item-count">{ count }</div>
+}
diff --git a/src/views/shared/item-count/ItemCountView.types.ts b/src/views/shared/item-count/ItemCountView.types.ts
new file mode 100644
index 00000000..9435b1a7
--- /dev/null
+++ b/src/views/shared/item-count/ItemCountView.types.ts
@@ -0,0 +1,4 @@
+export interface ItemCountViewProps
+{
+    count: number;
+}