feat: public system page!

src/pages/profiles/System.svelte

@@ -0,0 +1,71 @@
+<script lang="ts">
+    import { Container, Col, Row, TabContent, TabPane, Alert, Spinner } from 'sveltestrap';
+    import { useParams } from "svelte-navigator";
+    import { onMount } from 'svelte';
+    
+    import System from '../../lib/system/Main.svelte';
+    import PKAPI from '../../api';
+    import Sys from '../../api/system';
+
+    let isPublic = true;
+
+    let user = new Sys({});
+    let settings = JSON.parse(localStorage.getItem("pk-settings"));
+
+    let params = useParams();
+    $: id = $params.id;
+    
+    let err: string;
+    
+    const api = new PKAPI();
+
+    let title = "system"
+
+    onMount(() => {
+        getSystem();
+    })
+
+    async function getSystem() {
+        try {
+            let res: Sys = await api.getSystem({id: id})
+            user = res;
+            title = user.name;
+        } catch (error) {
+            console.log(error);
+            err = error.message;
+        }
+    }
+
+</script>
+
+<!-- display the banner if there's a banner set, and if the current settings allow for it-->
+{#if user && user.banner && settings && settings.appearance.banner_top}
+<div class="banner" style="background-image: url({user.banner})" />
+{/if}
+<Container>
+    <Row>
+        <Col class="mx-auto" xs={12} lg={10}>
+            {#if !user.id && !err}
+            <div class="mx-auto text-center">
+                <Spinner class="d-inline-block" />
+            </div>
+            {:else if err}
+                <Alert color="danger">{err}</Alert>
+            {:else}
+            <Alert color="info">You are currently <b>viewing</b> a system.</Alert>
+            <TabContent class="mt-3">
+                <TabPane tabId="system" tab="System" active>
+                        <System bind:user={user} bind:isPublic={isPublic} />
+                </TabPane>
+                <TabPane tabId="members" tab="Members">
+                        alo
+                </TabPane> 
+            </TabContent>
+            {/if}
+        </Col>
+    </Row>
+</Container>
+
+<svelte:head>
+    <title>pk-webs | {title}</title>
+</svelte:head>