Adding in tailwindcss and configs

2022-03-12 19:41:39 -07:00
parent d8beede420
commit ef5cdba060
8 changed files with 59 additions and 10 deletions
--- a/src/components/App.jsx
+++ b/src/components/App.jsx
@@ -1,6 +1,7 @@
 import '../styles/styles.scss';
 import { useRef, useState } from 'react';
 import { Canvas, useFrame } from '@react-three/fiber';
+import { PresentationControls } from '@react-three/drei'

 const Box = (props) => {
  // This reference gives us direct access to the THREE.Mesh object
@@ -29,14 +30,18 @@ const App = () => {
  return (
    <>
      <nav>
-        nav
+        <h1 className="underline text-xl">Nav</h1>
      </nav>
-      <Canvas>
-        <ambientLight />
-        <pointLight position={[10, 10, 10]} />
-        <Box position={[-1.2, 0, 0]} />
-        <Box position={[1.2, 0, 0]} />
-      </Canvas>
+      <div id="canvas-container">
+        {/* <Canvas>
+          <PresentationControls global zoom={0.8} rotation={[0, -Math.PI / 4, 0]} polar={[0, Math.PI / 4]} azimuth={[-Math.PI / 4, Math.PI / 4]}>
+            <ambientLight />
+            <pointLight position={[10, 10, 10]} />
+            <Box position={[-1.2, 0, 0]} />
+            <Box position={[1.2, 0, 0]} />
+          </PresentationControls>
+        </Canvas> */}
+      </div>
    </>
  );
 };
--- a/src/scripts/app.js
+++ b/src/scripts/app.js
@@ -1,8 +1,15 @@
+import { Suspense } from 'react';
+import { Loader } from '@react-three/drei';
 import { render } from 'react-dom';
 import App from '../components/App';

 render(
-    <App />,
+  <>
+    <Suspense fallback={null}>
+      <App />
+    </Suspense>
+    <Loader />
+  </>,
   document.getElementById("root") );

 if (module['hot']) {
--- a/src/styles/styles.scss
+++ b/src/styles/styles.scss
@@ -1,3 +1,12 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
 main {
-  background-color: black;
+  #canvas-container {
+    canvas {
+      width: 100%;
+      height: 100%;
+    }
+  }
 }
--- a/src/views/index.html
+++ b/src/views/index.html
@@ -4,7 +4,9 @@
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Document</title>
+  <title>Designer and Developer</title>
+
+  <link rel="stylesheet" href="https://use.typekit.net/bcf6wms.css">
 </head>
 <body>
  <main id="root"></main>