ocbo-esign/src/pages/main.astro

82 lines
1.9 KiB
Text

---
import Layout from '../layouts/Layout.astro'
import { Button, Logo, Link, Page, Footer, Row, Column, Image, Copyright, OptimizeLogo, Display, Padding, Modal } from '../../fwt/'
import { FiLogOut } from 'solid-icons/fi'
import { ofetch } from 'ofetch'
import Table from '../components/Table/Table'
---
<script>
import gsap from 'gsap'
const modal = document.getElementById('modal')
const modalButton = document.getElementById('modal-button')
modalButton?.addEventListener('click', () => {
gsap.to(modal, {
duration: 0,
display: 'block',
ease: 'power2.out',
})
})
modal?.addEventListener('click', () => {
gsap.to(modal, {
duration: 0,
display: 'none',
ease: 'power2.out',
})
})
</script>
<Layout title="Dashboard - OCBO e-Sign">
<Page alignment="column">
<Padding left={4.75} right={4.75}>
<Row content="split">
<Display desktop tablet>
<Link to="/">
<Row content="left" gap={2}>
<Logo size={200} />
<h1>OCBO e-Sign</h1>
</Row>
</Link>
<Row content="left" gap={1}>
<span class="name">Patrick Alvin Alcala</span>
<Link to="/"><FiLogOut size={25} /></Link>
</Row>
</Display>
<Row content="center">
<h2>List of Ready to Approve and Sign OP (Order of Payments)</h2>
</Row>
<Table client:load />
</Row>
</Padding>
<div id="modal" style="display: none">
<Modal background="rgba(0,0,0,0.5)">
<h1>SAMPLE</h1>
</Modal>
</div>
</Page>
<style lang="sass">
@use '/src/styles/variables.sass' as vars
@use 'sass:color'
.padding
margin: 11rem
border: 1px solid red
h1
font-size: 3.25rem
color: vars.$textColor
.div
width: 8rem
.name
font-size: 1.25rem
</style>
</Layout>