Initial commit

resources/js/Components/Layouts/AuthenticatedLayout.svelte

@@ -0,0 +1,73 @@
+<script lang="ts">
+	import { inertia, page } from '@inertiajs/svelte';
+    import { globalState } from "@/Library/PassState.svelte";
+
+    //eslint-disable-next-line
+	let { children }: { children: any } = $props();
+</script>
+
+<div class="flex flex-col h-screen">
+	<div class="flex flex-grow overflow-hidden">
+		<nav class="flex flex-col w-2/12 items-center space-y-6 bg-zinc-800 px-10 py-6 text-white text-2xl">
+			<div class="rounded-lg bg-slate-700 px-4 py-1">{$page.props.appName}</div>
+            <a href="/" use:inertia class="hover:underline">Home</a>
+		</nav>
+
+        <main class="w-10/12 px-10 py-8 overflow-y-auto">
+            <div class="flex items-center justify-between mb-4">
+                <div class="mr-4">
+                    {@render globalState.title?.()}
+                </div>
+                <div class="relative flex-grow">
+                    <span class="material-icons text-gray-900 absolute left-3 top-1/2 transform -translate-y-1/2">search</span>
+                    <input type="text" placeholder="Search..." class="w-full p-2 pl-10 rounded-full bg-gray-200 text-black" />
+                </div>
+            </div>
+            {@render children()}
+        </main>
+	</div>
+
+	<div class="relative w-full bg-zinc-800 text-white p-8 flex flex-col items-center">
+		<input
+			type="range"
+			class="absolute w-full h-4 bg-gray-700 appearance-none slider"
+			style="top: 0px;"
+            value="0"
+		/>
+		<div class="w-full flex items-center justify-between mt-2">
+			<div>Track Info</div>
+			<div>Player Controls</div>
+			<div>Volume Controls</div>
+		</div>
+	</div>
+</div>
+
+<style lang="scss">
+	.slider {
+		height: 4px;
+		transition: height 0.3s ease;
+		padding: 0;
+	}
+
+	.slider:hover {
+		height: 4px;
+	}
+
+	.slider::-webkit-slider-thumb {
+		width: 16px;
+		height: 16px;
+		background: #fff;
+		border-radius: 50%;
+		cursor: pointer;
+		-webkit-appearance: none;
+		appearance: none;
+	}
+
+	.slider::-moz-range-thumb {
+		width: 16px;
+		height: 16px;
+		background: #fff;
+		border-radius: 50%;
+		cursor: pointer;
+	}
+</style>

resources/js/Library/PassState.svelte.ts

@@ -0,0 +1,5 @@
+export const globalState: {
+    title?: any
+} = $state({
+
+})

resources/js/Pages/Home.svelte

@@ -0,0 +1,20 @@
+<script module lang="ts">
+	export { default as layout } from '@/Components/Layouts/AuthenticatedLayout.svelte';
+</script>
+
+<script lang="ts">
+    import { globalState } from "@/Library/PassState.svelte";
+
+    let { appName } = $props();
+    globalState.title = title;
+</script>
+
+{#snippet title()}
+    <h1 class="text-2xl font-bold">Meow</h1>
+{/snippet}
+
+<svelte:head>
+	<title>Home - {appName}</title>
+</svelte:head>
+
+<h1>Hewwo</h1>

resources/js/app.ts

@@ -0,0 +1,18 @@
+import './bootstrap';
+import '../css/app.scss';
+import { createInertiaApp, ResolvedComponent } from '@inertiajs/svelte';
+import { hydrate, mount } from 'svelte';
+
+await createInertiaApp({
+	resolve: (name) => {
+		const pages = import.meta.glob<ResolvedComponent>('./Pages/**/*.svelte', { eager: true });
+		return pages[`./Pages/${name}.svelte`];
+	},
+	setup({ el, App, props }) {
+		if (el?.dataset.serverRendered === 'true') {
+			hydrate(App, { target: <HTMLElement>el, props });
+		} else {
+			mount(App, { target: <HTMLElement>el, props });
+		}
+	}
+});

resources/js/bootstrap.ts

@@ -0,0 +1,4 @@
+import axios from 'axios';
+window.axios = axios;
+
+window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';

resources/js/ssr.ts

@@ -0,0 +1,18 @@
+import { createInertiaApp, type ResolvedComponent } from '@inertiajs/svelte';
+import createServer from '@inertiajs/svelte/server';
+import { render } from 'svelte/server';
+
+createServer((page) =>
+	createInertiaApp({
+		page,
+		resolve: (name) => {
+			const pages = import.meta.glob<ResolvedComponent>('./Pages/**/*.svelte', {
+				eager: true
+			});
+			return pages[`./Pages/${name}.svelte`];
+		},
+		setup({ App, props }) {
+			return render(App, { props });
+		}
+	})
+);

resources/js/types/global.d.ts

@@ -0,0 +1,8 @@
+import { AxiosInstance } from 'axios';
+
+declare global {
+	interface Window {
+		axios: AxiosInstance;
+	}
+
+}

resources/js/types/vite.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="vite/client" />
+/// <reference types="svelte" />
+
+interface ImportMetaEnv {
+	readonly VITE_APP_NAME: string;
+}