image and button components

6 files changed, 70 insertions, 0 deletions

diff --git a/components/button.tsx b/components/button.tsx
new file mode 100644
index 0000000..452d85f
--- /dev/null
+++ b/components/button.tsx
@@ -0,0 +1,9 @@
+export default function Button(props: {
+	text: string;
+	href?: string;
+	onclick?: () => void;
+}) {
+	return props.href ?
+			<a href={props.href} className="button">{props.text}</a> :
+			<button onClick={props.onclick} className="button">{props.text}</button>
+}
diff --git a/components/image.tsx b/components/image.tsx
new file mode 100644
index 0000000..106c2bd
--- /dev/null
+++ b/components/image.tsx
@@ -0,0 +1,13 @@
+export default function Image(props: {
+	src: string;
+	title?: string;
+}) {
+	return <div className="image">
+		<img src={props.src} alt={props.title}/>
+		{
+			props.title && <div>
+				<p>{props.title}</p>
+			</div>
+		}
+	</div>
+}
diff --git a/pages/_app.tsx b/pages/_app.tsx
index f0c16f4..1e9ba0d 100644
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@@ -4,6 +4,8 @@ import '../styles/colors.css';
 import '../styles/layout.css';
 import '../styles/globals.css';
 import '../styles/navbarItem.css';
+import '../styles/button.css';
+import '../styles/image.css';
 
 export default function Blog({ Component, pageProps }) {
 	return <div>
diff --git a/pages/index.tsx b/pages/index.tsx
index 6450fd8..18e09fe 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -1,5 +1,7 @@
 import Seperator from '../components/articleSeperator';
 import Navbar from '../components/navbar';
+import Button from '../components/button';
+import Image from '../components/image';
 
 export default function Home() {
 	return <div>
@@ -16,6 +18,9 @@ export default function Home() {
 					Lorem ipsum <a>dolor</a> sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Gravida dictum fusce ut placerat orci nulla pellentesque. Laoreet id donec ultrices tincidunt arcu. Tortor aliquam nulla facilisi cras fermentum odio eu feugiat. A scelerisque purus semper eget duis at tellus. A iaculis at erat pellentesque adipiscing commodo elit at imperdiet. Arcu bibendum at varius vel pharetra vel turpis nunc eget. Euismod in pellentesque massa placerat duis. Lorem ipsum dolor sit amet consectetur adipiscing elit. Ultrices in iaculis nunc sed augue lacus. Vestibulum mattis ullamcorper velit sed. Adipiscing diam donec adipiscing
 				</p>
 				<a href="https://blog.pipeframe.xyz">Here's a link</a>
+				<Button text="gert" onclick={() => alert("Hallo wereld!")}/>
+				<Button text="gert2" href="https://github.com/lonkaars"/>
+				<Image src="https://external-content.duckduckgo.com/iu/?u=http%3A%2F%2Fbarkpost-assets.s3.amazonaws.com%2Fwp-content%2Fuploads%2F2013%2F11%2FplainDoge.jpg&f=1&nofb=1" title="fonny doge meme big laugh hahaha funni image big fonny me laugh because image fonne"/>
 
 				<Seperator/>
 				<p>
diff --git a/styles/button.css b/styles/button.css
new file mode 100644
index 0000000..ff5ecec
--- /dev/null
+++ b/styles/button.css
@@ -0,0 +1,25 @@
+.button {
+	background-color: var(--fire-opal);
+	color: var(--fg) !important;
+
+	padding: 12px;
+	min-width: 200px;
+	text-align: center;
+	width: min-content;
+
+	display: block !important;
+	margin: 0 auto var(--page-margins) auto;
+
+	font-size: 1rem;
+	font-family: "Inter", sans-serif;
+	font-weight: 600;
+	
+	border-radius: 8px;
+	border: 0;
+
+	cursor: pointer;
+}
+
+a.button { min-width: calc(200px - 2 * 12px); }
+a.button::after { display: none; }
+
diff --git a/styles/image.css b/styles/image.css
new file mode 100644
index 0000000..d354ab9
--- /dev/null
+++ b/styles/image.css
@@ -0,0 +1,16 @@
+.image,
+.image img {
+	width: 100%;
+	max-width: 500px;
+}
+
+.image {
+	margin: 0 auto var(--page-margins) auto;
+}
+
+.image p {
+	text-align: left;
+	opacity: .8;
+	font-style: italic;
+	margin-top: 12px;
+}