ការបង្កើត​គំរូក្បាល​ទំព័រ​ អាច​ត្រូវ​ធ្វើឡើង​ដូច​ខាង​ក្រោម​នេះ៖

 

<!--src/layouts/Header.astro-->
---
---
<section class="header">
    <header class='wrapper region'>
        <div class='logo'>
            <a href='/'><img src='/images/siteLogo.png' /></a>
            <a href='/'>ខ្មែរ​វីដេអូ</a>
        </div>
        <form class='search'>
            <select>
                <option>រឿង​ខ្មែរ</option>
                <option>រឿង​ថៃ</option>
                <option>រឿង​ចិន</option>
                <option>រឿង​កូរ៉េ</option>
            </select>
            <input type='text' name='q' placeholder='សរសេរ​ពាក្យ​ត្រូវ​ស្វែងរក...' required />
            <input type='submit' value='ស្វែងរក' /> 
        </form>
        <div class='date'>
            <script>
                const datetime = new Date().toLocaleDateString('it-IT')
                $('.date').html(datetime)
            </script>
        </div>
    </header>
</section>

<style>
    .header{
        background: orangered;
    }

    .wrapper{
        display: grid;
        grid-template-columns: 25% auto 20%;
        align-items: center;
        padding: 10px 0;
    }

    .wrapper .logo{
        display: grid;
        grid-template-columns: 60px auto;
        align-items: center;
        grid-gap: 10px;
    }

    .wrapper .logo img{
        width: 60px;
    }

    .wrapper .logo a{
        font: 40px/1.5 StardosStencul, Limonf3;
        color: white;
    }

    .wrapper .search{
        display: grid;
        grid-template-columns: 15% auto 15%;
    }

    .wrapper .search input, .wrapper .search select{
        font: var(--body-font);
    }

    .wrapper .search [name='q']{
        padding: 0 5px;
    }

    .wrapper .date{
        text-align: right;
        color: white;
        font-size: 20px;
    }

    @media only screen and (max-width: 600px){
        .wrapper{
            grid-template-columns: 100%;
            padding: 0 10px;
            text-align: center;
        }

        .wrapper .logo{
            grid-template-columns: 100%;
        }

        .wrapper .date{
            text-align: center;
        }
    }
</style>

 

<!--src/layouts/Base.astro-->
---
import Header from "./Header.astro"
const {pageTitle="គំរូទំព័រ"} = Astro.props
---

<html lang="en">
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width" />
        <meta name="generator" content={Astro.generator} />
        <title>{pageTitle}</title>
        <link href="/images/siteLogo.png" rel="icon" />
        <link href="/fonts/setup.css" rel="stylesheet" />
        <link href="/styles/base.css" rel="stylesheet" />
        <script is:inline src="/scripts/jquery.js"></script>
    </head>
    <body>
        <Header/>
        <slot/>
    </body>
</html>