Update test area

This commit is contained in:
Korbs 2024-08-22 03:42:13 -04:00
parent ad7bef219b
commit 39a32be329
4 changed files with 100 additions and 18 deletions

View file

@ -1,4 +1,7 @@
import { defineConfig } from 'astro/config';
import { defineConfig } from 'astro/config'
import vue from '@astrojs/vue'
// https://astro.build/config
export default defineConfig({});
export default defineConfig({
integrations: [vue()]
});

BIN
test/bun.lockb Executable file

Binary file not shown.

View file

@ -10,8 +10,13 @@
"astro": "astro"
},
"dependencies": {
"astro": "^4.14.2",
"@astrojs/check": "^0.9.2",
"typescript": "^5.5.4"
"@astrojs/vue": "^4.5.0",
"@iconoir/vue": "^7.8.0",
"astro": "^4.14.2",
"astro-tooltips": "^0.6.2",
"sass-embedded": "^1.77.8",
"typescript": "^5.5.4",
"vue": "^3.4.38"
}
}
}

View file

@ -1,16 +1,90 @@
---
// Components
import Dialog from '../../../src/Dialog.astro'
import Sidebar from '../../../src/Sidebar.astro'
// Icons
import {
InputSearch,
ProfileCircle,
Group,
Circle,
GitFork,
GraphUp,
Movie,
MusicDoubleNote,
Gamepad,
AppleImac2021Side,
EmojiTalkingHappy,
PlanetAlt,
Settings,
MediaVideoList
} from '@iconoir/vue'
---
---
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<meta name="viewport" content="width=device-width" />
<meta name="generator" content={Astro.generator} />
<title>Astro</title>
</head>
<body>
<h1>Astro</h1>
</body>
</html>
<Dialog
Name="dialog-id-thingie"
Title="Flurry Dialog"
Description="It's a dialog, what else did you expect?"
CloseButton="CloseExamepleDialog()"
Actions
>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<slot slot="actions">
<button onclick="CloseExamepleDialog()" class="fl-secondary-btn">Secondary</button>
<a>Primary</a>
</slot>
</Dialog>
<Sidebar
ShowHeader
LogoPath="https://ark.sudovanilla.org/avatars/984c733421da0eca64a9ec4f55305f739d748f0f50e5a91890a3372c544aa119?size=200"
ShowVersion
FooterLinks
>
<slot slot="header-items">
<a href="#"><InputSearch/></a>
<a href="#"><ProfileCircle/></a>
</slot>
<slot slot="top-items">
<a href="#"><PlanetAlt/> Home</a>
<a href="#"><MediaVideoList/> Feed</a>
<h2>Categories</h2>
<a href="#"><GraphUp/> Trending</a>
<a href="#"><Movie/> Trailers</a>
<a href="#"><MusicDoubleNote/> Music</a>
<a href="#"><Gamepad/> Gaming</a>
<h2>Channel Discovery</h2>
<a href="#"><EmojiTalkingHappy/> Comedy</a>
<a href="#"><Gamepad/> Gaming</a>
<a href="#"><AppleImac2021Side/> Tech</a>
<h2>Project Demo</h2>
<a href="#" onclick="OpenExampleDialog()">Open Dialog</a>
</slot>
<slot slot="bottom-items"><a href="#"><Settings/> Settings</a></slot>
<slot slot="footer-items">
<a href="#"><Group/></a>
<a href="#"><Circle/></a>
<a href="#"><GitFork/></a>
</slot>
</Sidebar>
<style>
body {
background: black;
color: white;
font-family: Arial, Helvetica, sans-serif;
}
</style>
<script is:inline>
function OpenExampleDialog() {
document.querySelector('#dialog-id-thingie').style.display = 'inherit'
document.querySelector('#dialog-id-thingie-backdrop').style.display = 'inherit'
}
function CloseExamepleDialog() {
document.querySelector('#dialog-id-thingie').style.display = 'none'
document.querySelector('#dialog-id-thingie-backdrop').style.display = 'none'
}
</script>