Add new component for feature

CHANGELOG.md

@@ -1,3 +1,8 @@
+## 0.7.0
+
+- Added new component for feature ([d44b76](https://github.com/madebyais/nextjs-antd-tailwindcss/commit/d44b762f4a18e9086e1f9350626d1c656c8226c1))
+
+
 ## 0.6.0
 
 - Added new component for e-commerce

components/feature/feature-1.tsx

@@ -0,0 +1,30 @@
+import { FC } from "react";
+import Image from "next/image"
+
+interface featureDescription {
+  readonly title?: string
+  readonly description?: string
+}
+
+interface IFeatureProps {
+  readonly imageUrl: string
+  readonly features: Array<featureDescription>
+}
+
+const Feature1: FC<IFeatureProps> = ({ imageUrl, features }) => (
+  <div className={`grid grid-cols-1 gap-5 md:grid-cols-2 md:gap-5`}>
+    <div className={`flex justify-center`}>
+      <Image src={imageUrl} width={400} height={600} />
+    </div>
+    <div className={`flex flex-col justify-center space-y-10`}>
+      {features.map((item, i) => (
+        <div key={i}>
+          <div className={`text-xl mb-5 font-bold`}>{item.title}</div>
+          <div>{item.description}</div>
+        </div>
+      ))}
+    </div>
+  </div>
+)
+
+export default Feature1

components/feature/index.ts

@@ -0,0 +1 @@
+export {default as Feature1} from './feature-1'

package.json

@@ -1,6 +1,6 @@
 {
   "name": "nextjs-antd-tailwindcss",
-  "version": "0.6.0",
+  "version": "0.7.0",
   "private": true,
   "scripts": {
     "less-compile": "./node_modules/.bin/lessc --js ./styles/style.less ./styles/style.css",

pages/components/_layout.tsx

@@ -18,6 +18,7 @@ const LayoutComponentPreview: FC = ({ children }) => {
             <Menu title={`Footer`} href={`/components/footer`} />
             <br/>
             <Menu title={`E-commerce`} href={`/components/e-commerce`} />
+            <Menu title={`Features`} href={`/components/feature`} />
           </div>
           <div className={`h-screen col-span-7 p-5 overflow-y-scroll`}>
             {children}

pages/components/feature.tsx

@@ -0,0 +1,26 @@
+import Title from "antd/lib/skeleton/Title";
+import { Feature1 } from "components/feature";
+import LayoutComponentPreview from "./_layout";
+
+export default function FeaturePreviewPage() {
+  return (
+    <LayoutComponentPreview>
+      <div className={`mb-20`}>
+        <div className={`mb-10 text-lg font-bold uppercase`}>Feature 1</div>
+        <Feature1
+          imageUrl={`https://placeimg.com/400/600/tech/grayscale`}
+          features={[
+            {
+              title: 'First Feature',
+              description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.'
+            },
+            {
+              title: 'Second Feature',
+              description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.'
+            }
+          ]}
+          />
+      </div>
+    </LayoutComponentPreview>
+  )
+}