generated from tpl/obsidian-sample-plugin
48 lines
986 B
Svelte
48 lines
986 B
Svelte
<script lang="ts">
|
|
import type { Snippet } from "svelte";
|
|
|
|
interface Props {
|
|
children?: Snippet;
|
|
width?: number;
|
|
design?: "default" | "colored-spine" | "dual-top-bands" | "split-bands";
|
|
topMargin?: number;
|
|
}
|
|
|
|
let {
|
|
children,
|
|
width = 40,
|
|
design = "default",
|
|
topMargin,
|
|
}: Props = $props();
|
|
|
|
function getTopMargin(
|
|
design: "default" | "colored-spine" | "dual-top-bands" | "split-bands",
|
|
): number {
|
|
switch (design) {
|
|
case "split-bands":
|
|
return 30;
|
|
case "dual-top-bands":
|
|
return 41;
|
|
}
|
|
return 0;
|
|
}
|
|
</script>
|
|
|
|
<div
|
|
class="bookshelf__book-wrapper bookshelf__book-tilted"
|
|
style:--book-tilted-width={width + "px"}
|
|
style:--book-tilted-top-margin={(topMargin ?? getTopMargin(design)) + "px"}
|
|
>
|
|
{@render children?.()}
|
|
</div>
|
|
|
|
<style lang="scss">
|
|
div {
|
|
:global(.bookshelf__book-content) {
|
|
height: calc(var(--book-tilted-width));
|
|
width: calc(200px - 60px);
|
|
margin: var(--book-tilted-top-margin) var(--book-tilted-width);
|
|
}
|
|
}
|
|
</style>
|