@weareconceptstudio/cs-admin
v0.4.0
Published
Concept Studio Admin
Downloads
217
Readme
cs-admin
Installation
npm install @weareconceptstudio/cs-admin
At a Glance
// in app.js
import React from 'react';
import { render } from 'react-dom';
import { Admin, Resource, Pages } from '@weareconceptstudio/cs-admin';
// Ico moon
import './icons/style.css';
// Components
import PostForm from './PostForm';
import * as PagesViews from './Pages';
// Admin Prefix
const adminPrefix = '/admin'
// Menu items
const menu = [
main:[
{
title:'General',
children:[
{
title: 'Media Library',
path: '/',
icon: 'media-library',
key: 'media-library',
},
{
title: 'Pages',
icon: 'pages',
path: `${adminPrefix}pages/home`,
key: 'pages',
},
{
title: 'Posts',
icon: 'posts',
path: `${adminPrefix}posts`,
key: 'pages',
},
]
}
],
collapsed:{
pages:{
title:'Pages',
children:[
{
title: 'Home',
path: `${adminPrefix}pages/home`,
},
]
}
}
]
render(
<Admin
siteName={'Cs admin'}
menu={menu}
apiPrefix={'http://127.0.0.1:8000/api/admin/'}
adminPrefix={adminPrefix}
languages={[
{
id: 'en',
name: 'English',
},
]}>
<Pages
path={'pages/:slug'}
name={'pages'}
views={PagesViews}
/>
<Resource
title='Posts'
path='posts/*'
name='posts'
form={PostForm}
columns={[
{
title: 'id',
dataIndex: 'id',
key: 'id',
},
{
title: 'Name',
dataIndex: 'name',
key: 'name',
},
]}
/>
</Admin>,
document.getElementById('root')
);
// Form
import React, { useRef } from 'react';
import {
FormContainer,
InputField,
CustomCollapse,
Container,
MediaPicker,
imageTypes,
} from 'cs-admin';
const Form = ({ action, current, onFinish }) => {
const formRef = useRef();
return (
<FormContainer
ref={formRef}
title={`Post ${action}`}
initialValues={current}
onFinish={onFinish}
hasLayout={true}
hasMeta={true}>
<CustomCollapse
title={'General information'}
type={'form-block'}>
<Container row>
<div className='col-lg-8'>
<InputField
label={'Name'}
name={'name'}
/>
<InputField
type={'textarea'}
label={'Description'}
name={'description'}
/>
</div>
<div className='col-lg-4'>
<MediaPicker
label={'Image'}
name={'image'}
acceptTypes={imageTypes}
multiple={false}
/>
</div>
</Container>
</CustomCollapse>
</FormContainer>
);
};
export default Form;