feat:find and watch location, use shadcn sonner toast for errors.
- added tailwindcss with shadcn-svelte sonner toasts - added a location store and a geolation util to find, watch, use and store locations and their updates - added a LocationButton to navigate to the current location and handle errors. - updated the Map to use LocationButton and go to current location.
This commit is contained in:
1
src/lib/components/sonner/index.ts
Normal file
1
src/lib/components/sonner/index.ts
Normal file
@@ -0,0 +1 @@
|
||||
export { default as Toaster } from "./sonner.svelte";
|
||||
30
src/lib/components/sonner/sonner.svelte
Normal file
30
src/lib/components/sonner/sonner.svelte
Normal file
@@ -0,0 +1,30 @@
|
||||
<script lang="ts">
|
||||
import { Toaster as Sonner, type ToasterProps as SonnerProps } from 'svelte-sonner';
|
||||
import { mode } from 'mode-watcher';
|
||||
|
||||
let { ...restProps }: SonnerProps = $props();
|
||||
</script>
|
||||
|
||||
<Sonner
|
||||
theme={mode.current}
|
||||
class="toaster group"
|
||||
style="--normal-bg: var(--color-popover); --normal-text: var(--color-popover-foreground); --normal-border: var(--color-border);"
|
||||
{...restProps}
|
||||
/>
|
||||
|
||||
<style>
|
||||
:global([data-sonner-toast][data-type='error']) {
|
||||
background-color: #fef2f2 !important;
|
||||
border-color: #ef4444 !important;
|
||||
color: #dc2626 !important;
|
||||
}
|
||||
|
||||
:global([data-sonner-toast][data-type='error'] [data-icon]) {
|
||||
color: #ef4444 !important;
|
||||
}
|
||||
|
||||
:global([data-sonner-toast][data-type='error'] [data-content]) {
|
||||
color: #dc2626 !important;
|
||||
font-weight: 500;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user