♻️ refactored ArrowChevron
Co-authored-by: haraldnilsen <harald_998@hotmail.com> Signed-off-by: Sindre Kjelsrud <kjelsrudsindre@gmail.com>
This commit is contained in:
parent
963ed36076
commit
b5fb7711d6
2 changed files with 12 additions and 8 deletions
12
frontend/src/components/svg/ArrowChevron.svelte
Normal file
12
frontend/src/components/svg/ArrowChevron.svelte
Normal file
|
@ -0,0 +1,12 @@
|
|||
<script lang="ts">
|
||||
export let width:string, direction:string;
|
||||
|
||||
// Define the paths for left and right arrows
|
||||
const leftArrowPath = "M9.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l192 192c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L77.3 256 246.6 86.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-192 192z";
|
||||
const rightArrowPath = "M310.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L242.7 256 73.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z";
|
||||
</script>
|
||||
|
||||
<!-- Render the appropriate SVG based on the direction -->
|
||||
<svg xmlns="http://www.w3.org/2000/svg" height={width} width={width} viewBox="0 0 320 512">
|
||||
<path d={direction === 'left' ? leftArrowPath : rightArrowPath} />
|
||||
</svg>
|
|
@ -1,8 +0,0 @@
|
|||
<script lang="ts">
|
||||
export let width:string
|
||||
</script>
|
||||
|
||||
<!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2023 Fonticons, Inc.-->
|
||||
<svg xmlns="http://www.w3.org/2000/svg" height={width} width={width} viewBox="0 0 320 512">
|
||||
<path d="M9.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l192 192c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L77.3 256 246.6 86.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-192 192z"/>
|
||||
</svg>
|
Reference in a new issue