$

src/components/global/selector/selector.riot

@@ -0,0 +1,125 @@
+<selector>
+    <style>
+        #selector {
+            width: 300px;
+            min-height: 700px;
+            padding: 15px;
+            box-shadow: 0px 0px 3px 1px black;
+        }
+
+        #selector
+        #selector-top-container {
+            display: flex;
+            flex-direction: row;
+            justify-content: center;
+            align-items: center;
+            justify-content: space-between;
+            position: relative;
+            min-height: 100px;
+        }
+
+        #selector
+        #selector-top-container
+        #selector-top-btn {
+            background: white;
+            color: black;
+            border-color: black;
+            width: 20px;
+            height: 60px;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+        }
+
+        #selector
+        #selector-top-container
+        #selector-top-title {
+            text-transform: uppercase;
+        }
+
+        #selector
+        #selector-list-container
+        #selector-list
+        .selector-list-inner {
+            display: flex;
+            flex-direction: row;
+            justify-content: space-between;
+            font-weight: bold;
+            color: black;
+            list-style-type: none;
+        }
+
+        #selector
+        #selector-list-container
+        #selector-list
+        .selector-list-names {
+            padding-left: 18px;
+        }
+
+        #selector
+        #selector-list-container
+        #selector-list
+        .selector-list-counts {
+            color: white;
+            background: green;
+            padding: 3px;
+            text-align: center;
+            border-radius: 4px;
+            width: 50px;
+        }
+    </style>
+
+    <script>
+        const api = "https://data.enseignementsup-recherche.gouv.fr/api/records/1.0/search/?dataset=fr-esr-parcoursup&q=&sort=tri&facet=fili&timezone=Europe%2FBerlin"
+        let data = []
+
+        export default {
+            async getData() {
+                let data = []
+
+                await fetch(api)
+                    .then((res) => res.json())
+                    .then((d) => {
+                        data = d.facet_groups[0].facets
+                    })
+
+                this.state = {
+                    page: {
+                        curIndex: 0,
+                            "name": [
+                            "formation",
+                            "filère de formation",
+                            "filière de formation détaillée"
+                        ]
+                    },
+                    data: data
+                }
+
+                console.log(this.state)
+            },
+            onBeforeMount() {
+                this.getData()
+            }
+        }
+    </script>
+
+    <div id="selector">
+        <div id="selector-top-container">
+            <span id="selector-top-title">
+                { state.pages.name[state.pages.curIndex] }
+            </span>
+            <button id="selector-top-btn">
+                <
+            </button>
+        </div>
+
+        <div id="selector-list-container">
+            <ul id="selector-list">
+                <li each={ item in state.data }  class="selector-list-inner">
+                    <span class="selector-list-names">{state.data.name}</span>
+                    <span class="selector-list-counts">{state.data.count}</span>
+                </li>
+            </ul>
+        </div>
+    </div>
+</selector>