1  <script lang="ts">
 2    export let filenameWithPath: string;
 3  
 4    $: path = filenameWithPath
 5      .match(/^.*\/|/)
 6      ?.values()
 7      .next().value;
 8  
 9    $: filename = filenameWithPath.split("/").slice(-1);
10  </script>
11  
12  <style>
13    .file-path {
14      font-size: var(--font-size-small);
15      white-space: nowrap;
16    }
17  
18    .path {
19      color: var(--color-fill-gray);
20      font-weight: var(--font-weight-regular);
21    }
22  
23    .filename {
24      font-weight: var(--font-weight-semibold);
25    }
26  </style>
27  
28  <!-- prettier-ignore -->
29  <span class="file-path"><span class="path">{path}</span><span class="filename">{filename}</span></span>