Init BaseCard component

Author: modularcoder

.prettierrc.js

@@ -2,6 +2,6 @@ module.exports = {
   semi: false,
   trailingComma: 'all',
   singleQuote: true,
-  printWidth: 80,
+  printWidth: 90,
   tabWidth: 2,
 };

src/Administration/Administration.tsx

@@ -1,5 +1,6 @@
 import React from 'react'
 import faker from 'faker'
+import { BaseCard, BaseCardBody } from '_common/BaseCard'
 
 type AdministrationProps = {}
 
@@ -8,9 +9,9 @@ const content = faker.lorem.paragraphs(50)
 const Administration: React.FC<AdministrationProps> = () => {
   return (
     <div className="px-14 py-8">
-      <div className="bg-white shadow-sm py-6 px-8 rounded">
-        Administration: {content}
-      </div>
+      <BaseCard>
+        <BaseCardBody>Administration: {content}</BaseCardBody>
+      </BaseCard>
     </div>
   )
 }

src/Dashboard/Dashboard.tsx

@@ -1,5 +1,6 @@
 import React from 'react'
 import faker from 'faker'
+import { BaseCard, BaseCardBody } from '_common/BaseCard'
 
 type DashboardProps = {}
 
@@ -10,12 +11,14 @@ const content3 = faker.lorem.paragraphs(3)
 const Dashboard: React.FC<DashboardProps> = () => {
   return (
     <div className="px-14 py-8">
-      <div className="bg-white shadow-sm py-6 px-8 rounded">
-        <h1 className="text-3xl mb-8">Dashboard</h1>
-        <p className="mb-4">{content}</p>
-        <p className="mb-4">{content2}</p>
-        <p className="mb-4">{content3}</p>
-      </div>
+      <BaseCard>
+        <BaseCardBody>
+          <h1 className="text-3xl mb-8">Dashboard</h1>
+          <p className="mb-4">{content}</p>
+          <p className="mb-4">{content2}</p>
+          <p className="mb-4">{content3}</p>
+        </BaseCardBody>
+      </BaseCard>
     </div>
   )
 }

src/_common/BaseCard/BaseCard.tsx

@@ -0,0 +1,9 @@
+import React from 'react'
+
+const BaseCard: React.FC = (props) => {
+  return (
+    <div className="BaseCard bg-white shadow-sm rounded">{props.children}</div>
+  )
+}
+
+export default BaseCard

src/_common/BaseCard/BaseCardBody.tsx

@@ -0,0 +1,7 @@
+import React from 'react'
+
+const BaseCardBody: React.FC = (props) => {
+  return <div className="BaseCardBody py-6 px-8">{props.children}</div>
+}
+
+export default BaseCardBody

src/_common/BaseCard/BaseCardFooter.tsx

@@ -0,0 +1,7 @@
+import React from 'react'
+
+const BaseCardFooter: React.FC = (props) => {
+  return <footer className="BaseCardFooter py-6 px-8 ">{props.children}</footer>
+}
+
+export default BaseCardFooter

src/_common/BaseCard/BaseCardHeader.tsx

@@ -0,0 +1,7 @@
+import React from 'react'
+
+const BaseCardHeader: React.FC = (props) => {
+  return <header className="BaseCardHeader py-6 px-8">{props.children}</header>
+}
+
+export default BaseCardHeader

src/_common/BaseCard/index.ts

@@ -0,0 +1,7 @@
+import BaseCard from './BaseCard'
+import BaseCardHeader from './BaseCardHeader'
+import BaseCardBody from './BaseCardBody'
+import BaseCardFooter from './BaseCardFooter'
+
+export { BaseCard, BaseCardBody, BaseCardHeader, BaseCardFooter }
+export { default } from './BaseCard'