$

src/components/global/selector/selectorfragment.riot

@@ -0,0 +1,53 @@
+<selectorfragment>
+    <style>
+        #selectorfragment-container {
+            display: flex;
+            flex-direction: row;
+            align-items: center;
+            justify-content: space-between;
+            font-weight: bold;
+            list-style-type: none;
+        }
+
+        #selectorfragment-container
+        .selectorfragment-name {
+            text-decoration: none;
+            color: white;
+            justify-self: center;
+            padding: 4px;
+        }
+
+        #selectorfragment-container
+        .selectorfragment-name:hover {
+            background: #344D59;
+            cursor: pointer;
+            transition: 0.5s;
+            transform: scale(1.05);
+        }
+
+        #selectorfragment-container
+        #selectorfragment-count {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            color: white;
+            background: green;
+            padding: 0.5vw;
+            text-align: center;
+            border-radius: 4px;
+            width: auto;
+            height: auto;
+        }
+    </style>
+
+    <li id="selectorfragment-container">
+        <a id={ this.props.idd } class="selectorfragment-name">{ this.props.name }</a>
+        <span id="selectorfragment-count">{ this.props.count }</span>
+    </li>
+
+    <script>
+        export default {
+            props: ["name", "count", "idd"]
+        }
+    </script>
+</selectorfragment>