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
diff --git a/next.config.js b/next.config.js
index 33c5c8e..86c2e9d 100644
--- a/next.config.js
+++ b/next.config.js
@@ -34,5 +34,8 @@
]
},
];
+ },
+ images: {
+ domains: ["picsum.photos", "cdn.discordapp.com"]
}
};
\ No newline at end of file
diff --git a/package.json b/package.json
index a6512ff..6bf7993 100644
--- a/package.json
+++ b/package.json
@@ -7,7 +7,7 @@
"build": "ANALYZE=true NODE_ENV=production next build",
"start": "next start",
"lint": "next lint",
- "windev": "next dev",
+ "windev": "next dev -p 3030",
"winbuild": "next build"
},
"dependencies": {
diff --git a/pages/nucleus/transcript/index.js b/pages/nucleus/transcript/index.js
index 1c9e88f..1275e67 100644
--- a/pages/nucleus/transcript/index.js
+++ b/pages/nucleus/transcript/index.js
@@ -1,5 +1,6 @@
import Axios from 'axios';
import React from 'react';
+import Author from '../../../Components/Transcripts/Author';
function Index(props) {
return <>
@@ -13,7 +14,7 @@
paddingLeft: "25px",
color: "white",
fontSize: "1.5em",
- }}>Nucleus Transcripts</div>
+ }}>Transcript for: {props.data.for.username}#{props.data.for.discriminator} | In {<a href={`https://discord.com/channels/${props.data.guild}/${props.data.channel}`}>ChannelName</a>} | Type: {props.data.type}</div>
<div style={{
height: "100vw",
width: "100vw",
@@ -23,7 +24,13 @@
paddingTop: "10px",
transition: "all 0.3s ease-in-out"
}}>
- <p>{props.humanReadable}</p>
+ <Author author={props.data.messages[0].author} />
+ {/* {
+ props.data.messages.map((message, index) => {
+ console.log(index, message)
+ return <Author key={index.toString()} author={message.author} />
+ })
+ } */}
</div>
</>
}
@@ -40,7 +47,7 @@
}
let code;
try {
- code = await Axios.get(`http://localhost:10000/transcript/${ctx.query.code}/human`);
+ code = (await Axios.get(`http://localhost:10000/transcript/${ctx.query.code}`))
} catch (e) {
return {
redirect: {
@@ -51,7 +58,7 @@
}
return {
props: {
- humanReadable: code.data
+ data: code.data
}
}
}
\ No newline at end of file
diff --git a/pages/nucleus/transcript/testing.js b/pages/nucleus/transcript/testing.js
index ac0240b..87e9a2c 100644
--- a/pages/nucleus/transcript/testing.js
+++ b/pages/nucleus/transcript/testing.js
@@ -22,7 +22,11 @@
paddingTop: "10px",
transition: "all 0.3s ease-in-out"
}}>
- <p>{props.humanReadable}</p>
+ {
+ props.humanReadable.split("\n").map((s, i) => {
+ return <p key={i}>{s}</p>
+ })
+ }
</div>
</>
}
@@ -40,7 +44,7 @@
if (ctx.query.code === "test") {
return {
props: {
- humanReadable: "This is a test string! It should render correctly on the page"
+ humanReadable: "This is a test string! It should render correctly on the page\nAnd a newline!"
}
}
} else {
diff --git a/styles/Components/transcripts.module.css b/styles/Components/transcripts.module.css
new file mode 100644
index 0000000..e10da3f
--- /dev/null
+++ b/styles/Components/transcripts.module.css
@@ -0,0 +1,39 @@
+.horizontalFlex {
+ width: 100vw;
+ display: flex;
+ flex-direction: row;
+ justify-content: left;
+ align-items: center;
+ gap: 10px;
+}
+
+.container {
+ width: 100vw;
+ display: flex;
+ flex-direction: row;
+ justify-content: left;
+ align-items: top;
+ gap: 10px;
+ margin-top: 20px;
+}
+
+.verticalFlex {
+ width: 100vw;
+ display: flex;
+ flex-direction: column;
+ justify-content: left;
+ align-items: flex-start;
+ gap: 10px;
+}
+
+.avatar {
+ border-radius: 25px;
+}
+
+.botBadge {
+ background-color: #6576CC;
+ color: white;
+ border-radius: 5px;
+ padding: 2px 5px;
+ font-size: 12px;
+}
\ No newline at end of file