status-im
/
status-web-archive
mirror of https://github.com/status-im/status-web-archive.git
2
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Add Playground example

This commit is contained in:
Pavel Prichodko 2022-02-23 15:32:27 +01:00
parent 6157a5757a
commit bd5a507892
No known key found for this signature in database
GPG Key ID: 8E4C82D464215E83
6 changed files with 93 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
examples/playground/.postcssrc Normal file
View File

@ -0,0 +1,6 @@
{
"plugins": {
"tailwindcss": {},
"autoprefixer": {}
}
}

19
examples/playground/index.html Normal file
View File

@ -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>

29
examples/playground/index.tsx Normal file
View File

@ -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')
);

23
examples/playground/package.json Normal file
View File

@ -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"
}
}

8
examples/playground/styles.css Normal file
View File

@ -0,0 +1,8 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
html,
body {
height: 100%;
}

8
examples/playground/tailwind.config.js Normal file
View File

@ -0,0 +1,8 @@
module.exports = {
content: ["./**/*.{html,js,ts,jsx,tsx}"],
theme: {
extend: {},
},
variants: {},
plugins: [],
};