Added neetoUI

.prettierrc.js

@@ -1,4 +1,5 @@
 module.exports = {
+  tailwindConfig: "./tailwind.config.js",
   trailingComma: "es5",
   arrowParens: "avoid",
   printWidth: 80,

package.json

@@ -38,11 +38,16 @@
   "dependencies": {
     "@babel/core": "^7.16.0",
     "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
+    "@bigbinary/neeto-cist": "1.0.6",
+    "@bigbinary/neeto-icons": "1.17.6",
+    "@bigbinary/neetoui": "5.2.41",
+    "@emotion/is-prop-valid": "1.2.0",
     "@pmmmwh/react-refresh-webpack-plugin": "^0.5.3",
     "@svgr/webpack": "^5.5.0",
     "@testing-library/jest-dom": "^5.14.1",
     "@testing-library/react": "^13.0.0",
     "@testing-library/user-event": "^13.2.1",
+    "antd": "4.24.3",
     "babel-jest": "^27.4.2",
     "babel-loader": "^8.2.3",
     "babel-plugin-named-asset-import": "^0.3.8",
@@ -59,8 +64,10 @@
     "eslint-config-react-app": "^7.0.1",
     "eslint-webpack-plugin": "^3.1.1",
     "file-loader": "^6.2.0",
+    "formik": "2.2.0",
     "fs-extra": "^10.0.0",
     "html-webpack-plugin": "^5.5.0",
+    "i18next": "21.7.0",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^27.4.3",
     "jest-resolve": "^27.4.2",
@@ -78,12 +85,15 @@
     "react-dev-utils": "^12.0.1",
     "react-dom": "^18.2.0",
     "react-refresh": "^0.11.0",
+    "react-router-dom": "5.2.0",
+    "react-toastify": "9.0.1",
     "resolve": "^1.20.0",
     "resolve-url-loader": "^4.0.0",
     "sass-loader": "^12.3.0",
     "semver": "^7.3.5",
     "source-map-loader": "^3.0.0",
     "style-loader": "^3.3.1",
+    "tailwindcss": "2.2.17",
     "terser-webpack-plugin": "^5.2.5",
     "util": "^0.12.5",
     "web-vitals": "^2.1.0",

postcss.config.js

@@ -0,0 +1,14 @@
+module.exports = {
+  plugins: [
+    require("postcss-import"),
+    require("postcss-flexbugs-fixes"),
+    require("postcss-preset-env")({
+      autoprefixer: {
+        flexbox: "no-2009",
+      },
+      stage: 3,
+    }),
+    require("tailwindcss")("./tailwind.config.js"),
+    require("autoprefixer"),
+  ],
+};

src/App.jsx

@@ -1,24 +1,5 @@
-import "./App.css";
-// eslint-disable-next-line import/extensions
-import logo from "./logo.svg";
+import Product from "./components/Product";
 
-const App = () => (
-  <div className="App">
-    <header className="App-header">
-      <img alt="logo" className="App-logo" src={logo} />
-      <p>
-        Edit <code>src/App.js</code> and save to reload.
-      </p>
-      <a
-        className="App-link"
-        href="https://reactjs.org"
-        rel="noopener noreferrer"
-        target="_blank"
-      >
-        Learn React
-      </a>
-    </header>
-  </div>
-);
+const App = () => <Product />;
 
 export default App;

src/components/Product.jsx

@@ -0,0 +1,35 @@
+import { Typography } from "neetoui";
+
+const Product = () => (
+  <div className="px-6 pb-6">
+    <div>
+      <Typography className="py-2 text-4xl font-semibold" component="p">
+        Infinix INBOOK
+      </Typography>
+      <hr className="border-2 border-black" />
+    </div>
+    <div className="mt-6 flex gap-4">
+      <div className="w-2/5">
+        <img
+          alt="Product"
+          className="h-64 w-10/12"
+          src="https://ik.imagekit.io/d9mvewbju/SmileCart/thumbnail_61_7PaLfb.jpg"
+        />
+      </div>
+      <div className="w-3/5 space-y-4">
+        <Typography component="p">
+          Infinix Inbook X1 Ci3 10th 8GB 256GB 14 Win10 Grey - 1 Year Warranty.
+        </Typography>
+        <Typography component="p">MRP: $395.97</Typography>
+        <Typography className="font-semibold" component="p">
+          Offer price: $374.43
+        </Typography>
+        <Typography className="font-semibold text-green-600" component="p">
+          6% off
+        </Typography>
+      </div>
+    </div>
+  </div>
+);
+
+export default Product;

src/index.css

@@ -1,13 +1,5 @@
-body {
-  margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
-    sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
-    monospace;
-}
+@import "@bigbinary/neetoui";
+@import "react-toastify/dist/ReactToastify.min.css";
+@import "tailwindcss/base";
+@import "tailwindcss/components";
+@import "tailwindcss/utilities";

tailwind.config.js

@@ -0,0 +1,11 @@
+module.exports = {
+  purge: [],
+  darkMode: false, // or 'media' or 'class'
+  theme: {
+    extend: {},
+  },
+  variants: {
+    extend: {},
+  },
+  plugins: [],
+}