Redesign course page

2021-05-07 03:43:37 +03:00
parent 586d6a2b39
commit ae1f51684e
12 changed files with 352 additions and 152 deletions
@@ -0,0 +1,44 @@
+<script>
+  import CaretSortDown20 from "carbon-icons-svelte/lib/CaretSortDown20";
+
+  let isExpanded = true;
+  export let handleClick = () => {};
+  export let label = "";
+
+  function onClick() {
+    isExpanded = !isExpanded;
+    handleClick();
+  }
+</script>
+
+<div>
+  <div
+    class="relative flex items-center"
+    role="button"
+    tabindex="0"
+    on:click={onClick}
+  >
+    <CaretSortDown20
+      class="carbon-icon-sort {isExpanded ? '' : 'carbon-icon-minimize'}"
+    />
+    <span class="ml-6 mb-2 {isExpanded ? 'font-bold' : ''}">{label}</span>
+  </div>
+  {#if isExpanded}
+    <div class="flex flex-col">
+      <slot />
+    </div>
+  {/if}
+</div>
+
+<style>
+  :global(svg.carbon-icon-sort) {
+    position: absolute;
+    top: -5px;
+    left: 0;
+  }
+  :global(svg.carbon-icon-minimize) {
+    transform: rotate(270deg);
+    top: 2px;
+    left: -6px;
+  }
+</style>