<script lang="ts">
	import { Notification, Button } from 'stwui';

	const folder = "svg-path";
	const close = "svg-path";
</script>

<Notification>
   <Notification.Leading slot="leading">
		<Notification.Leading.Icon data={folder} class="text-pink-500" />
   </Notification.Leading>
   <Notification.Content slot="content">
      <Notification.Content.Title slot="title">Successfully Saved!</Notification.Content.Title>
      <Notification.Content.Description slot="description">
         Anyone with a link can now view this file.
      </Notification.Content.Description>
   </Notification.Content>
   <Notification.Extra slot="extra" class="-top-2 -right-2">
      <Button on:click={() => console.log('notification closed!')} shape="circle">
         <Button.Icon slot="icon" data={close} />
      </Button>
   </Notification.Extra>
</Notification>

<script lang="ts">
	import { Notification } from 'stwui';

	const avatar = "image.png";
</script>

<Notification>
	<Notification.Leading slot="leading">
		<Notification.Leading.Avatar slot="avatar" src={avatar} />
	</Notification.Leading>
	<Notification.Content slot="content">
		<Notification.Content.Title slot="title">New Message</Notification.Content.Title>
		<Notification.Content.Description slot="description">
			Nice work on that proposal!
		</Notification.Content.Description>
	</Notification.Content>
</Notification>

<script lang="ts">
	import { Notification, Button } from 'stwui';

	const close = "svg-path";
</script>

<Notification type="success">
   <Notification.Content slot="content">
      <Notification.Content.Title slot="title">Successfully Saved!</Notification.Content.Title>
      <Notification.Content.Description slot="description">
         Anyone with a link can now view this file.
      </Notification.Content.Description>
   </Notification.Content>
   <Notification.Extra slot="extra" class="-top-2 -right-2">
      <Button on:click={() => console.log('notification closed!')} shape="circle">
         <Button.Icon slot="icon" data={close} />
      </Button>
   </Notification.Extra>
</Notification>

<script lang="ts">
	import { Notification, Button } from 'stwui';

	const close = "svg-path";
</script>

<Notification type="info">
   <Notification.Content slot="content">
      <Notification.Content.Title slot="title">Successfully Saved!</Notification.Content.Title>
      <Notification.Content.Description slot="description">
         Anyone with a link can now view this file.
      </Notification.Content.Description>
   </Notification.Content>
   <Notification.Extra slot="extra" class="-top-2 -right-2">
      <Button on:click={() => console.log('notification closed!')} shape="circle">
         <Button.Icon slot="icon" data={close} />
      </Button>
   </Notification.Extra>
</Notification>

<script lang="ts">
	import { Notification, Button } from 'stwui';

	const arrow_forward = "svg-path";
</script>

<Notification>
   <Notification.Content slot="content">
      <Notification.Content.Description slot="description">
         Anyone with a link can now view this file.
      </Notification.Content.Description>
   </Notification.Content>
   <Notification.Extra slot="extra" class="-top-2 -right-2">
      <Button
         type="primary"
         size="sm"
         on:click={() => console.log('notification extra clicked!')}
      >
         Details
			<Button.Trailing slot="trailing" data={arrow_forward} />
      </Button>
   </Notification.Extra>
</Notification>