1  <script lang="ts" context="module">
 2      import type {
 3          HorizontalRule,
 4          HorizontalRuleStyle,
 5          Shelf,
 6      } from '@jet-app/app-store/api/models';
 7  
 8      export interface HorizontalRuleShelf extends Shelf {
 9          contentType: 'horizontalRule';
10          items: [HorizontalRule];
11      }
12  
13      export function isHorizontalRuleShelf(
14          shelf: Shelf,
15      ): shelf is HorizontalRuleShelf {
16          return (
17              shelf.contentType === 'horizontalRule' && Array.isArray(shelf.items)
18          );
19      }
20  
21      function horizontalRuleStyleToBorderStyle(
22          style: HorizontalRuleStyle,
23      ): string {
24          return style.toLowerCase();
25      }
26  </script>
27  
28  <script lang="ts">
29      import ShelfWrapper from '~/components/Shelf/Wrapper.svelte';
30      import { colorAsString } from '~/utils/color';
31  
32      export let shelf: HorizontalRuleShelf;
33  
34      $: item = shelf.items[0];
35      $: borderStyle = horizontalRuleStyleToBorderStyle(item.style);
36  </script>
37  
38  <ShelfWrapper {shelf} withBottomPadding={false}>
39      <hr
40          style:color={colorAsString(item.color)}
41          style:border-style={borderStyle}
42      />
43  </ShelfWrapper>
44  
45  <style>
46      hr {
47          display: block;
48          height: 1px;
49          border-width: 1px 0 0;
50          border-color: currentColor;
51          margin: 1em var(--bodyGutter);
52          padding: 0;
53      }
54  </style>