Merge pull request #4 from yusakapon/feature_#2

Feature #2 Frontend Demo Site

frontend/viewer/.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": "next/core-web-vitals"
+}

frontend/viewer/.gitignore

@@ -0,0 +1,32 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel

frontend/viewer/.prettierrc

@@ -0,0 +1,13 @@
+{
+  "printWidth": 120,
+  "tabWidth": 2,
+  "semi": true,
+  "singleQuote": true,
+  "quoteProps": "as-needed",
+  "jsxSingleQuote": false,
+  "trailingComma": "all",
+  "bracketSpacing": true,
+  "jsxBracketSameLine": true,
+  "arrowParens": "avoid",
+  "endOfLine": "lf"
+}

frontend/viewer/README.md

@@ -0,0 +1 @@
+# xyzip Viewer Sample

frontend/viewer/components/Card.js

@@ -0,0 +1,11 @@
+import styles from '../styles/Home.module.css';
+
+export default function Card({ title, imgSrc, children }) {
+  return (
+    <div className={styles.card}>
+      <img className={styles.cardImg} src={imgSrc} />
+      <h3>{title}</h3>
+      <p>{children}</p>
+    </div>
+  );
+}

frontend/viewer/components/TheHeader.js

@@ -0,0 +1,20 @@
+// import Logo from './LogoTypeA.svg';
+import styles from '../styles/Home.module.css';
+
+export default function TheHeader({}) {
+  return (
+    <header>
+      <img className="logo" src="/img/logo.png" />
+      <style jsx>{`
+        header {
+          padding: 2rem 0 1rem;
+          text-align: center;
+          width: 100%;
+        }
+        .logo {
+          width: 132px;
+        }
+      `}</style>
+    </header>
+  );
+}

frontend/viewer/next.config.js

@@ -0,0 +1,6 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  reactStrictMode: true,
+};
+
+module.exports = nextConfig;