worked on transcript CSS
diff --git a/Components/Transcripts/Attachment.js b/Components/Transcripts/Attachment.js
new file mode 100644
index 0000000..ddad85f
--- /dev/null
+++ b/Components/Transcripts/Attachment.js
@@ -0,0 +1,11 @@
+import Styles from "../../styles/Components/transcripts.module.css"
+
+function attachment(props) {
+ return (
+ <div className={Styles.attachment}>
+ <a className={Styles.attachmentLink} href={props.attachment.url} target="_blank" rel="noreferrer" >{props.attachment.name}</a>
+ </div>
+ )
+}
+
+export default attachment;
\ No newline at end of file
diff --git a/Components/Transcripts/Author.js b/Components/Transcripts/Author.js
index aa9ecdd..c096b69 100644
--- a/Components/Transcripts/Author.js
+++ b/Components/Transcripts/Author.js
@@ -1,20 +1,29 @@
import Image from "next/image";
import Styles from "../../styles/Components/transcripts.module.css"
+import * as hdate from 'human-date'
function Author(props) {
+ const today = props.message.createdTimestamp - (1000 * 60 * 60 * 24) > 0;
+ const last2days = props.message.createdTimestamp - (1000 * 60 * 60 * 24 * 2) > 0;
+ const date = new Date(props.message.createdTimestamp)
+ let timeDelta;
+ if (today) {
+ timeDelta = "Today";
+ } else if (last2days) {
+ timeDelta = "Yesterday";
+ } else {
+ timeDelta = hdate.prettyPrint(date).split(", ")[0];
+ }
+ timeDelta += ` at ${date.getHours()}:${date.getMinutes()}`
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 className={Styles.verticalFlex} style={{width: "calc(100vw - 60px - 40px)"}}>
+ <div className={Styles.horizontalFlex}>
+ <p style={{color: props.message.author.topRole.color ? props.message.author.topRole.color + " !important" : "var(--theme-ui-colors-text)"}} className={Styles.authorText}>
+ {props.message.author.username}#{props.message.author.discriminator}
+ </p>
+ {props.message.author.topRole.badge ? <Image src={props.message.author.topRole.badge} width={20} height={20} alt=""/> : null}
+ {props.message.author.bot ? <div className={Styles.botBadge}>BOT</div> : ""}
+ <p style={{color: "#888888", margin: "0", fontSize: "20px"}}>{timeDelta.toString()}</p>
</div>
</div>
)
diff --git a/Components/Transcripts/Embed.js b/Components/Transcripts/Embed.js
index 84d1c32..dca30b2 100644
--- a/Components/Transcripts/Embed.js
+++ b/Components/Transcripts/Embed.js
@@ -1,7 +1,62 @@
-import { Component } from "react";
+import Styles from "../../styles/Components/transcripts.module.css"
+import Image from "next/image";
+import JSDom from "jsdom";
-class Embed extends Component {
+function embed(props) {
+ let description = props.embed.description;
+ if (description) {
+ description = description.split("\n");
+ }
+
+ return ( // added it
+ <div className={Styles.embed} style={{borderColor: props.color ?? "#F27878"}}>
+ {
+ props.embed.author ?
+ <div className={Styles.embedAuthor}>
+ {
+ props.embed.author.iconURL ?
+ <Image src={props.embed.author.iconURL} alt=""/> :
+ null
+ }
+ {
+ props.embed.author.url ?
+ <a href={props.embed.author.url}>
+ {props.embed.author?.name ?? ""}
+ </a> :
+ <p>{props.embed.author?.name ?? ""}</p>
+ }
+ </div> :
+ null
+ }
+ {
+ props.embed.title ?
+ <div className={Styles.embedTitle}>{props.embed.title}</div> :
+ null
+ }
+ {
+ props.embed.description ?
+ <div className={Styles.embedDescription}>
+ {
+ description.map(i => {// idk how to do make this work
+ i = i
+ .replaceAll(/<a?:.+:\D+>/g, (match, id) => {
+ return <Image src={`https://cdn.discordapp.com/emojis/${id}.png`} alt=""/>
+ })
+ .replaceAll(/\*\*.+\*\*/g, (match, text) => {
+ return <b>{text}</b>
+ })
+ .replaceAll(/\*.+\*/g, (match, text) => {
+ return <i>{text}</i>
+ })
+ return <>{new JSDom.JSDOM(i)}<br/></> // CANT FIND A DOM PARSER THAT WORKS
+ })
+ }
+ </div>
+ : null
+ }
+ </div>
+ )
}
-export default Embed;
\ No newline at end of file
+export default embed;
\ No newline at end of file
diff --git a/Components/Transcripts/Message.js b/Components/Transcripts/Message.js
index 5006ade..2a74d62 100644
--- a/Components/Transcripts/Message.js
+++ b/Components/Transcripts/Message.js
@@ -1,9 +1,32 @@
-import { Component } from "react";
+import Styles from "../../styles/Components/transcripts.module.css"
+import Author from "./Author";
+import Image from "next/image";
+import Attachment from "./Attachment";
+import Embed from "./Embed";
-class Message extends Component {
+function message(props) {
-
-
+ return (
+ <div className={Styles.container}>
+ <div className={Styles.verticalFlex} style={{width: "60px"}}>
+ <Image className={Styles.avatar} src={props.message.author.iconURL ?? "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)"}}>
+ <Author message={props.message} />
+ <p className={Styles.messageContent}>{props.message.content}</p>
+ {
+ props.message.embeds ? props.message.embeds.map((embed, index) => {
+ return <Embed key={index.toString()} embed={embed} />
+ }) : null
+ }
+ {
+ props.message.attachments ? props.message.attachments.map((attachment, index) => {
+ return <Attachment key={index.toString()} attachment={attachment} alt="" />
+ }) : null
+ }
+ </div>
+ </div>
+ )
}
-export default Message;
\ No newline at end of file
+export default message;
\ No newline at end of file