feat: updated nextjs sample and docs (#180)

* feat: updated nextjs sample and docs

* fix: added link to dynamic import components

* fix: update nextjs to show frameworks

* add typescript language on the description

* add link to sdk website

* fix: updated repo to match use-in-frameworks guide

* fix: updated docs and css

* fix: typo

* add more notes to readme

---------

Co-authored-by: felixindrawan <[email protected]>

Author: Felix-Dynamsoft

hello-world/next/README.md

@@ -5,8 +5,9 @@ import "./globals.css";
 const inter = Inter({ subsets: ["latin"] });
 
 export const metadata: Metadata = {
-  title: "Create Next App",
-  description: "Generated by create next app",
+  title: "Hello World for Next.js - Dynamsoft Barcode Reader Sample",
+  description: "Dynamsoft Barcode Reader in a Next.js Application, helps read barcodes from camera or images.",
+  keywords: "barcodes, camera, images, nextjs",
 };
 
 export default function RootLayout({

hello-world/next/app/layout.tsx

@@ -4,44 +4,30 @@
   align-items: center;
   margin-top: 20px;
 }
-.title .title-logo {
-  width: 60px;
-  height: 60px;
-  animation: retate 5s infinite linear;
-}
-.top-btns {
+.buttons-container {
   width: 30%;
   margin: 20px auto;
 }
-.top-btns button {
+.buttons-container button {
   display: inline-block;
   border: 1px solid black;
   padding: 5px 15px;
   background-color: transparent;
   cursor: pointer;
 }
-.top-btns button:first-child {
+.buttons-container button:first-child {
   border-top-left-radius: 10px;
   border-bottom-left-radius: 10px;
   border-right: transparent;
 }
-.top-btns button:nth-child(2) {
+.buttons-container button:nth-child(2) {
   border-top-right-radius: 10px;
   border-bottom-right-radius: 10px;
   border-left: transparent;
 }
 
-@media screen and (max-width: 500px) {
-  .top-btns {
-      width: 70%;
+@media screen and (max-width: 800px) {
+  .buttons-container {
+    width: 70%;
   }
 }
-
-@keyframes retate {
-  from {
-      transform: rotate(0deg);
-  }
-  to {
-      transform: rotate(360deg);
-  }
-}

hello-world/next/app/page.css

@@ -1,22 +1,51 @@
 "use client";
 
-import { useState } from 'react';
+import dynamic from "next/dynamic";
+import { useState } from "react";
 import "./page.css";
-import VideoCapture from '@/component/VideoCapture';
-import ImageCapture from '@/component/ImageCapture';
+
+const VideoCapture = dynamic(() => import("../components/VideoCapture/VideoCapture"), {
+  ssr: false,
+});
+const ImageCapture = dynamic(() => import("../components/ImageCapture/ImageCapture"), {
+  ssr: false,
+});
+
+enum Modes {
+  VIDEO_CAPTURE = "video",
+  IMAGE_CAPTURE = "image",
+}
 
 export default function Home() {
-  const [mode, setMode] = useState("video");
+  const [mode, setMode] = useState(Modes.VIDEO_CAPTURE);
+
+  const showVideoCapture = () => setMode(Modes.VIDEO_CAPTURE);
+  const showImageCapture = () => setMode(Modes.IMAGE_CAPTURE);
+
   return (
-    <div className='App'>
-      <div className='title'>
-        <h2 className='title-text'>Hello World for React</h2>
+    <div className="hello-world-page">
+      <div className="title">
+        <h2 className="title-text">Hello World for Next.js</h2>
       </div>
-      <div className='top-btns'>
-        <button onClick={()=>{setMode("video")}} style={{backgroundColor: mode === "video" ? "rgb(255, 174, 55)" : "#fff"}}>Video Capture</button>
-        <button onClick={()=>{setMode("image")}} style={{backgroundColor: mode === "image" ? "rgb(255, 174, 55)" : "#fff"}}>Image Capture</button>
+      <div className="buttons-container">
+        <button
+          style={{
+            backgroundColor: mode === Modes.VIDEO_CAPTURE ? "rgb(255,174,55)" : "white",
+          }}
+          onClick={showVideoCapture}
+        >
+          Decode Video
+        </button>
+        <button
+          style={{
+            backgroundColor: mode === Modes.IMAGE_CAPTURE ? "rgb(255,174,55)" : "white",
+          }}
+          onClick={showImageCapture}
+        >
+          Decode Image
+        </button>
       </div>
-      { mode === "video" ? <VideoCapture /> : <ImageCapture /> }
+      <div className="container">{mode === Modes.VIDEO_CAPTURE ? <VideoCapture /> : <ImageCapture />}</div>
     </div>
   );
 }

hello-world/next/app/page.tsx

@@ -0,0 +1,20 @@
+.image-capture-container {
+  width: 100%;
+  height: 100%;
+  font-family: Consolas, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono,
+    Courier New, monospace;
+}
+
+.image-capture-container .input-container {
+  width: 80%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  border: 1px solid black;
+  margin: 0 auto;
+}
+
+.image-capture-container .results {
+  margin-top: 20px;
+  height: 100%;
+}