Improved the website

components/popsicle.js

@@ -0,0 +1,15 @@
+import styles from "/styles/Popsicle.module.css"
+
+export default function Popsicle(props) {
+    return (
+        <div className={styles.Popsicle} style={{...props.customStyle}}>
+            <i className="fas fa-info-circle" style={{scale: '1.5', paddingLeft: '10px', paddingRight: '15px'}}/>
+            {props.children ?? "Popsicle"}<span style={{paddingRight: '10px'}}></span>
+        </div>
+    )
+    // done
+}
+// are we even using three.js, it wastes a lot of bandwidth it will be used later, is there a way to disable certain folders? (I want to have a little cdn tho which would have some stuff that you could use for your projects)
+// wat is dis
+
+// This will be a little thing where it essentially pops up a little div, so like, for example, when you click enter while in the textbox, it will clear it and pop up a little box that would say, that you sent a message! It would dissapear after a bit (like 10 seconds)

components/socials.js

@@ -4,10 +4,10 @@ import Image from "next/image";
 export default function Socials() {
     return <>
         <div className={styles.Socials}>
-            <a href="https://discord.gg/zvaU9fKdut"><div className={styles.Button}><i className={"fab fa-discord"}/><span style={{paddingLeft:"10px"}}>Discord</span></div></a>
+            <a href="https://discord.gg/zvaU9fKdut" target="_blank"><div className={styles.Button}><i className={"fab fa-discord"}/><span style={{paddingLeft:"10px"}}>Discord</span></div></a>
             <div className={styles.Button}><i className={"fab fa-twitter"}/><span style={{paddingLeft:"10px"}}>Twitter</span></div>
             <div className={styles.Button}><i className={"fab fa-youtube"}/><span style={{paddingLeft:"10px"}}>Youtube</span></div>
-            <a href="https://matrix.to/#/#thered:matrix.org"><div className={styles.Button}><i className={"fas fa-external-link-alt"}/><span style={{paddingLeft:"10px"}}>Matrix</span></div></a>
+            <a href="https://matrix.to/#/#thered:matrix.org" target="_blank"><div className={styles.Button}><i className={"fas fa-external-link-alt"}/><span style={{paddingLeft:"10px"}}>Matrix</span></div></a>
         </div>
     </>
 }

components/textbox.js

@@ -2,6 +2,13 @@ import styles from '../styles/Textbox.module.css'
 
 export default function Textbox(props) {
     return (
-        <input className={styles.Textbox} type={props.type ?? 'text'} style={{width: props.width ?? '200px', ...props.style}} placeholder={props.placeholder ?? 'Type anything here!'}></input>
+        <input className={styles.Textbox} type={props.type ?? 'text'} style={{width: props.width ?? '200px', ...props.style}} placeholder={props.placeholder ?? 'Type anything here!'} defaultValue={props.value ?? ""} onKeyDown={() => {
+            if (props.submitOnEnter && event.key === 'Enter' && props.submit) {
+                props.submit(event.target.value);
+                // props.value = ""; // this is not how you do it
+                event.target.value = "";
+            }
+        }}></input>
     )
+    
 }

components/trianglesbg.js

@@ -1,7 +1,18 @@
+import { useState, useEffect } from "react"
+
 export default function TrianglesBG() {
+    const [positionX, setPositionX] = useState(0);
+    // use setPositionX(123) to set the background-position-x to 123
+    useEffect(() => {
+        const interval = setInterval(() => {
+            // do magic here using setPositionX
+            setPositionX(positionX + 1);
+        }, 10);
+        return () => clearInterval(interval);
+    });
     return (
         <div style={{width: '100vw', height: '100vh', position: 'absolute', top: '0', left: '0', zIndex: '0', color: 'white'}} className="steve">
-            <div className="whatIsItLikeInsideSteve" width='100%' height='99%' style={{objectFit: 'fill', imageRendering: 'pixelated', backgroundImage: 'url("/background.webp")', width: '100%', height: '100%', backgroundRepeat: 'repeat', backgroundSize: '100vw', backgroundPositionX: '0px'}}/>
+            <div className="whatIsItso that means the proxy (that im about to )LikeInsideSteve" width='100%' height='99%' style={{objectFit: 'fill', imageRendering: 'pixelated', backgroundImage: 'url("/background.webp")', width: '100%', height: '100%', backgroundRepeat: 'repeat', backgroundSize: '100vw', backgroundPositionX: positionX}}/>
         </div>
     )
 }