started work on good components for transcripts
diff --git a/Components/Transcripts/Author.js b/Components/Transcripts/Author.js
new file mode 100644
index 0000000..aa9ecdd
--- /dev/null
+++ b/Components/Transcripts/Author.js
@@ -0,0 +1,24 @@
+import Image from "next/image";
+import Styles from "../../styles/Components/transcripts.module.css"
+
+function Author(props) {
+ return (
+ <div className={Styles.container}>
+ <div className={Styles.verticalFlex} style={{width: "60px"}}>
+ <Image className={Styles.avatar} src={props.author.avatar ?? "https://picsum.photos/50"} width={50} height={50} alt=""/> {/* TODO: Add a cync icon here as a default*/}
+ </div>
+ <div className={Styles.verticalFlex} style={{width: "calc(100vw - 60px - 40px)"}}>
+ <div className={Styles.horizontalFlex}>
+ <p style={{color: props.author.topRole.color ? props.author.topRole.color : "var(--theme-ui-colors-text)", margin: "0", fontSize: "20px"}}>
+ {props.author.username}#{props.author.discriminator}
+ </p>
+ {props.author.topRole.badge ? <Image src={props.author.topRole.badge} width={20} height={20} alt=""/> : null}
+ {!props.author.bot ? <div className={Styles.botBadge}>BOT</div> : ""}
+ </div>
+ </div>
+ </div>
+ )
+
+}
+
+export default Author;
diff --git a/Components/Transcripts/Embed.js b/Components/Transcripts/Embed.js
new file mode 100644
index 0000000..84d1c32
--- /dev/null
+++ b/Components/Transcripts/Embed.js
@@ -0,0 +1,7 @@
+import { Component } from "react";
+
+class Embed extends Component {
+
+}
+
+export default Embed;
\ No newline at end of file
diff --git a/Components/Transcripts/Message.js b/Components/Transcripts/Message.js
new file mode 100644
index 0000000..5006ade
--- /dev/null
+++ b/Components/Transcripts/Message.js
@@ -0,0 +1,9 @@
+import { Component } from "react";
+
+class Message extends Component {
+
+
+
+}
+
+export default Message;
\ No newline at end of file