Archived
ADD Score slider component and styling
This commit is contained in:
+18
@@ -1 +1,19 @@
|
||||
@import 'tailwindcss';
|
||||
|
||||
@layer components {
|
||||
.textbox-base {
|
||||
@apply rounded-md border-2 border-gray-300 p-2;
|
||||
}
|
||||
|
||||
.btn {
|
||||
@apply rounded-md p-2;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
@apply bg-blue-500 hover:bg-blue-700 text-white;
|
||||
}
|
||||
|
||||
.review-tag {
|
||||
@apply bg-blue-200 p-2 rounded-lg my-2 text-sm text-blue-800 whitespace-nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,21 @@
|
||||
<script lang="ts">
|
||||
import type { PageProps } from './$types';
|
||||
|
||||
let { title, currentRating }: PageProps = $props();
|
||||
</script>
|
||||
|
||||
<div class="flex flex-col space-y-2">
|
||||
<p>{title}</p>
|
||||
<input type="range" name="song" id="song" min="1" max="100" value={currentRating} />
|
||||
<div class="flex justify-between">
|
||||
<p class="text-center">1</p>
|
||||
<p>|</p>
|
||||
<p class="text-center">25</p>
|
||||
<p>|</p>
|
||||
<p class="text-center">50</p>
|
||||
<p>|</p>
|
||||
<p class="text-center">75</p>
|
||||
<p>|</p>
|
||||
<p class="text-center">100</p>
|
||||
</div>
|
||||
</div>
|
||||
Reference in New Issue
Block a user