Khmer Web Library

//pages/admin/index.js
import Head from 'next/head'
import styles from '../../styles/admin/Index.module.css'
import settings from '../../settings.js'
import Link from 'next/link'
import dynamic from 'next/dynamic'
import {useRouter} from 'next/router'

import {withIronSessionSsr} from "iron-session/next"

export const getServerSideProps = withIronSessionSsr(
    async function getServerSideProps(ctx) {
        let mySettings = await settings()
        
        if(ctx.req.session.user){
            if(ctx.params.page === 'post'){
                mySettings.pageTitle = 'ទំព័រការផ្សាយ'
            }else if(ctx.params.page === 'user'){
                mySettings.pageTitle = 'ទំព័រអ្នកប្រើប្រាស់'
            }

            return {
                props:mySettings,
            }
        }else{
            return {
                redirect: {
                    permanent: false,
                    destination: "/login",
                },
            }
        }
    },
    {
        cookieName: "myapp_cookiename",
        password: process.env.SECRET_KEY,
        cookieOptions: {
            secure: process.env.NODE_ENV === "production",
        },
    },
)

export default function Index(props){
    const router = useRouter()
    const {page} = router.query
    let ckeditor = {}

    if(page === 'post'){
        var Page = dynamic(() => import('./_post.js'),{ ssr: false })
    }else if(page === 'user'){
        var Page = dynamic(() => import('./_user.js'),{ ssr: false })
    }

    return(
        <div className={styles.Index}>
            <Head>
                <title>{props.siteTitle} | {props.pageTitle}</title>
                <link rel="icon" href="/images/siteLogo.png" />
            </Head>

            <div className={styles.menuWrapper}>
                <div className={`${styles.menu} region`}>
                    <div className={styles.logo}>{props.pageTitle}</div>
                    <form>
                        <select name='label'>
                            <option>ការផ្សាយ</option>
                        </select>
                        <input type='text' name='querry' placeholder='ស្វែងរក'/>
                        <input type='submit' value='បញ្ជូន' />
                    </form>
                    <div className={styles.logout}>
                        <Link href="/"><a>ទំព័រមុខ</a></Link> | <Link href="/logout"><a>ចេញក្រៅ</a></Link>
                    </div>
                </div>
            </div>

            <div className={`${styles.main} region`}>
                <div className={styles.sidebar}>
                    <div className={styles.inner}>
                        <Link href='/admin/post'><a><img src='/images/movie.png' /></a></Link>
                        <Link href='/admin/post'><a>ការផ្សាយ</a></Link>
            
                        <Link href='/admin/category'><a><img src='/images/category.png' /></a></Link>
                        <Link href='/admin/category'><a>ជំពូក</a></Link>
            
                        <Link href='/admin/book'><a><img src='/images/books.png' /></a></Link>
                        <Link href='/admin/book'><a>សៀវភៅ</a></Link>
            
                        <Link href='/admin/upload'><a><img src='/images/upload.png' /></a></Link>
                        <Link href='/admin/upload'><a>Upload</a></Link>
            
                        <Link href='/admin/user'><a><img src='/images/users.png' /></a></Link>
                        <Link href='/admin/user'><a>អ្នកប្រើប្រាស់</a></Link>
            
                        <Link href='/admin/setting'><a><img src='/images/setting.png' /></a></Link>
                        <Link href='/admin/setting'><a>Setting</a></Link>
                    </div>
                </div>
                <div className={styles.content}>
                    <Page editor={ckeditor}/>
                    
                </div>
            </div>

            <div className={`${styles.status} region`}>សរុបទាំងអស់មានចំនួនៈ </div>

            <ul className={styles.items}></ul>

            <div className={`${styles.paginate} region`}>
                <a><img src="/images/paginate.png" /></a>
            </div>
        </div>
    )
}

//settings

export default async ()=>{
    let settings = {}

    settings.siteTitle = 'គេហទំព័រ'

    return settings
}

/*styles/admin/Index.module.css*/
.Index .menuWrapper{
    background: var(--background);
    color: white;
    padding: 7px 0;
    border-bottom: 7px solid white;
    margin-bottom: 20px;
}

.Index .menuWrapper .menu{
    display: grid;
    grid-template-columns: 25% auto 25%;
    align-items: center;
}

.Index .menuWrapper .menu .logo{
    font: 22px/1.5 Limonf3;
}

.Index .menuWrapper .menu .logout{
    text-align: right;
}

.Index .menuWrapper .menu .logout a{
    color: white;
}

.Index .menuWrapper .menu form{
    display: grid;
    grid-template-columns: 20% auto 15%;
}

.Index .menuWrapper .menu form input,
.Index .menuWrapper .menu form select{
    font: var(--body-font);
    padding: 1px 5px;
}

.Index .main{
    display: grid;
    grid-template-columns: 25% auto;
}

.Index .main .sidebar{
    background: var(--background);
    color: white;
    margin-right: 10px;
    padding: 20px;
}

.Index .main .sidebar .inner{
    display: grid;
    grid-template-columns: 25% auto;
    align-items: center;
    grid-gap: 10px 10px;
}

.Index .main .sidebar .inner a{
    color: white;
    font: 18px/1.5 Oswald, Koulen;
}

.Index .main .sidebar .inner img{
    width: 100%;
}

.Index .status{
    background: var(--background);
    text-align: center;
    margin: 10px auto;
    padding: 5px;
    color: white;
}

.Index .paginate{
    background: var(--background);
    margin: 10px auto;
    text-align: center;
    padding: 5px 0 0;
}

GitHub: https://github.com/Sokhavuth/nblog

Vercel: https://khmerweb-nblog.vercel.app/admin/user