Skip to content

Commit

Permalink
feat(): add new components for cms
Browse files Browse the repository at this point in the history
  • Loading branch information
bobbylemm authored and Frantz Kati committed Dec 17, 2020
1 parent 9001b00 commit db26903
Show file tree
Hide file tree
Showing 21 changed files with 488 additions and 255 deletions.
2 changes: 1 addition & 1 deletion packages/cms/components/Actions/Actions.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@ const Actions: React.FC<ActionsProps> = ({}) => {
>
<Menu.Items
static
className="z-50 absolute right-0 w-56 mt-2 origin-top-right bg-white border border-gray-200 divide-y divide-gray-100 rounded-sm shadow-sm outline-none"
className="z-50 absolute right-0 w-56 mt-2 origin-top-right bg-white border border-gray-200 divide-y divide-gray-100 rounded-lg shadow-sm outline-none"
>
<div className="py-1">
<Menu.Item>
Expand Down
2 changes: 2 additions & 0 deletions packages/cms/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,9 @@
"@tailwindcss/forms": "^0.2.1",
"@tailwindcss/typography": "^0.3.1",
"@tailwindcss/ui": "^0.7.2",
"@types/classnames": "^2.2.11",
"autoprefixer": "^9",
"classnames": "^2.2.6",
"graphql": "^15.4.0",
"postcss": "^7",
"tailwindcss": "npm:@tailwindcss/postcss7-compat",
Expand Down
44 changes: 44 additions & 0 deletions packages/cms/pages/CreateResource/CreateResource.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,44 @@
import React, { useState, Fragment } from 'react'
import { Heading, Button, Paragraph. TextInput } from '@tensei/components'

interface CreateResourceProps {}

const CreateResource: React.FC<CreateResourceProps> = ({}) => {
return (
<Fragment>
<header className="flex flex-wrap items-center justify-between">
<Heading as="h1" className="text-tensei-darkest">
Update Tag
</Heading>

<div className="flex w-2/4 justify-end">
<Button
clear
className="bg-tensei-gray-300 border-tensei-gray-300"
>
Delete
</Button>
<Button primary className="ml-7">
Update
</Button>
</div>
</header>
<div className="grid grid-cols-3 gap-4">
<div className="col-span-2 flex flex-col flex-wrap mt-10 bg-white rounded-lg p-12">
<Paragraph className="tensei-gray-700">
Put in information about the new
</Paragraph>

<div className="w-full md:w-2/3 mt-10">
<TextInput label="Title" />
</div>
</div>
<div className="bg-white rounded-lg p-12 mt-10">
5
</div>
</div>
</Fragment>
)
}

export default CreateResource
1 change: 1 addition & 0 deletions packages/cms/pages/CreateResource/index.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export { default } from './CreateResource'
6 changes: 4 additions & 2 deletions packages/cms/pages/Dashboard.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,8 @@ import { Transition, Menu } from '@tensei/components'

import Nav from '../components/Nav'
import Resource from './Resource'
import ResourceDetail from './ShowResource'
import CreateResource from './CreateResource'

export interface DashboardProps {}

Expand Down Expand Up @@ -178,7 +180,7 @@ const Dashboard: React.FC<DashboardProps> = () => {
>
<Menu.Items
static
className="absolute right-0 w-56 mt-2 origin-top-right bg-white border border-gray-200 divide-y divide-gray-100 rounded-sm shadow-sm outline-none"
className="absolute right-0 w-56 mt-2 origin-top-right bg-white border border-gray-200 divide-y divide-gray-100 rounded-lg shadow-sm outline-none"
>
<div className="px-4 py-3">
<p className="text-sm leading-5">
Expand Down Expand Up @@ -243,7 +245,7 @@ const Dashboard: React.FC<DashboardProps> = () => {
<div className="py-6">
<div className="max-w-full mx-auto px-4 sm:px-6 md:px-8">
{/* Replace with your content */}
<Resource />
<CreateResource />
{/* /End replace */}
</div>
</div>
Expand Down
12 changes: 6 additions & 6 deletions packages/cms/pages/Resource/Resource.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -115,7 +115,7 @@ const Resource: React.FC<ResourceProps> = ({}) => {
<div className="flex flex-col">
<div className="-my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
<div className="py-2 align-middle inline-block min-w-full sm:px-6 lg:px-8">
<div className="shadow-sm overflow-hidden border-b border-tensei-gray-800 sm:rounded-sm">
<div className="shadow-sm overflow-hidden border-b border-tensei-gray-800 sm:rounded-lg">
<Table
columns={[
{
Expand Down Expand Up @@ -220,7 +220,7 @@ const Resource: React.FC<ResourceProps> = ({}) => {
</div>

<nav className="flex items-center">
<button className="mr-2 p-3 focus:outline-none focus:ring-2 border border-transparent focus:ring-tensei-primary rounded-sm">
<button className="mr-2 p-3 focus:outline-none focus:ring-2 border border-transparent focus:ring-tensei-primary rounded-lg">
<svg
className="fill-current"
width={10}
Expand All @@ -235,25 +235,25 @@ const Resource: React.FC<ResourceProps> = ({}) => {

<a
href=""
className="rounded-sm px-3 py-1 mr-2 font-semibold bg-tensei-primary text-white focus:outline-none border border-transparent focus:ring-offset-2 focus:ring-2 focus:ring-tensei-primary"
className="rounded-lg px-3 py-1 mr-2 font-semibold bg-tensei-primary text-white focus:outline-none border border-transparent focus:ring-offset-2 focus:ring-2 focus:ring-tensei-primary"
>
1
</a>

<a
href="#"
className="px-3 py-1 bg-transparent mr-2 rounded-sm focus:outline-none focus:ring-2 border border-transparent focus:ring-tensei-primary"
className="px-3 py-1 bg-transparent mr-2 rounded-lg focus:outline-none focus:ring-2 border border-transparent focus:ring-tensei-primary"
>
2
</a>
<a
href="#"
className="px-3 py-1 bg-transparent rounded-sm focus:outline-none focus:ring-2 border border-transparent focus:ring-tensei-primary"
className="px-3 py-1 bg-transparent rounded-lg focus:outline-none focus:ring-2 border border-transparent focus:ring-tensei-primary"
>
3
</a>

<button className="ml-2 p-3 focus:outline-none focus:ring-2 border border-transparent focus:ring-tensei-primary rounded-sm">
<button className="ml-2 p-3 focus:outline-none focus:ring-2 border border-transparent focus:ring-tensei-primary rounded-lg">
<svg
className="fill-current transform rotate-180"
width={10}
Expand Down
47 changes: 47 additions & 0 deletions packages/cms/pages/ShowResource/ShowResource.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,47 @@
import React, { useState } from 'react'
import { ConfirmModal, Heading, StackedList, Button } from '@tensei/components'

import Actions from '../../components/Actions'

export interface ResourceDetailProps {}

const ResourceDetail: React.FC<ResourceDetailProps> = ({}) => {
const [deleting, setDeleting] = useState<any>(null)

return (
<>
<ConfirmModal
open={!!deleting}
setOpen={() => setDeleting(null)}
title="Delete Account?"
description="Are you sure you want to delete this account? This action cannot be reversed."
/>
<header className="flex justify-between items-center">
<Heading as="h1" className="text-tensei-darkest">
Tags details
</Heading>

<div className="flex w-2/4 justify-end">
<Button danger>Delete</Button>
<Button primary className="ml-7">
Edit
</Button>
</div>
</header>

<div className="bg-white rounded-lg shadow-sm border-tensei-gray-100 border mt-9">
<StackedList
fields={[
{ inputName: 'name' },
{ inputName: 'name' },
{ inputName: 'name' },
{ inputName: 'name' },
{ inputName: 'name' }
]}
/>
</div>
</>
)
}

export default ResourceDetail
1 change: 1 addition & 0 deletions packages/cms/pages/ShowResource/index.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export { default } from './ShowResource'
Loading

0 comments on commit db26903

Please sign in to comment.