Add Playground example

2022-02-23 15:32:27 +01:00 · 2022-02-23 15:32:27 +01:00 · bd5a507892
parent 6157a5757a
commit bd5a507892
6 changed files with 93 additions and 0 deletions
--- a/examples/playground/.postcssrc
+++ b/examples/playground/.postcssrc
@ -0,0 +1,6 @@
+{
+  "plugins": {
+    "tailwindcss": {},
+    "autoprefixer": {}
+  }
+}
--- a/examples/playground/index.html
+++ b/examples/playground/index.html
@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
+    <link
+      rel="stylesheet"
+      href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap"
+    />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Playground | Status</title>
+  </head>
+
+  <body>
+    <div id="root" class="pt-1"></div>
+    <script type="module" src="./index.tsx"></script>
+  </body>
+</html>
--- a/examples/playground/index.tsx
+++ b/examples/playground/index.tsx
@ -0,0 +1,29 @@
+import React, { render } from 'react-dom';
+import { GroupChat, lightTheme, darkTheme } from '@status-im/react';
+import { StrictMode, useState } from 'react';
+
+const App = () => {
+  const [theme, setTheme] = useState(lightTheme);
+
+  return (
+    <div className="w-1/2 rounded-md shadow-lg">
+      <GroupChat
+        theme={theme}
+        communityKey="0x033dc0109e1acde0c493961b860491fe741616e94a477ba758cd019d580d6693f9"
+        config={{
+          environment: 'test',
+          dappUrl: 'https://0.0.0.0:8080',
+        }}
+      />
+
+      <button onClick={() => setTheme(darkTheme)}>Change</button>
+    </div>
+  );
+};
+
+render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+  document.getElementById('root')
+);
--- a/examples/playground/package.json
+++ b/examples/playground/package.json
@ -0,0 +1,23 @@
+{
+  "name": "playground",
+  "version": "0.0.0",
+  "source": "./index.html",
+  "scripts": {
+    "dev": "parcel",
+    "build": "parcel build"
+  },
+  "dependencies": {
+    "@status-im/react": "^0.0.0",
+    "react": "^17.0.0",
+    "react-dom": "^17.0.0"
+  },
+  "devDependencies": {
+    "autoprefixer": "^10.4.2",
+    "postcss": "^8.4.6",
+    "tailwindcss": "^3.0.0",
+    "@types/react": "^17.0.0",
+    "@types/react-dom": "^17.0.0",
+    "parcel": "^2.0.0",
+    "typescript": "^4.0.0"
+  }
+}
--- a/examples/playground/styles.css
+++ b/examples/playground/styles.css
@ -0,0 +1,8 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+html,
+body {
+  height: 100%;
+}
--- a/examples/playground/tailwind.config.js
+++ b/examples/playground/tailwind.config.js
@ -0,0 +1,8 @@
+module.exports = {
+  content: ["./**/*.{html,js,ts,jsx,tsx}"],
+  theme: {
+    extend: {},
+  },
+  variants: {},
+  plugins: [],
+};