commit a76ae0aa2584a0c294bc775f2c209c80550840c7
parent 9cb47766c0778cbd91df83b0a3ba52c64354586e
Author: MTRNord <mtrnord1@gmail.com>
Date: Fri, 31 Dec 2021 01:32:20 +0100
Factor out header and make sure we use the correct keys
Diffstat:
2 files changed, 44 insertions(+), 30 deletions(-)
diff --git a/components/Header.tsx b/components/Header.tsx
@@ -0,0 +1,37 @@
+import Link from "next/link";
+import { Component } from "react";
+
+export default class Header extends Component {
+ render() {
+ return (
+ <>
+ <header className='flex fixed top-0 left-0 right-0 bottom-0 lg:h-[108px] h-[216px] z-[100] items-center lg:flex-row flex-col'>
+ <span className='flex items-center h-full lg:mx-10 my-4 text-gray-900 dark:text-gray-200 font-bold'><Link href="/">Matrix Art</Link></span>
+ <div className='flex flex-1 items-center lg:flex-row flex-col'>
+ <div className='flex grow-[1] h-full relative items-center'>
+ <form className='w-[200px] text-gray-900 dark:text-gray-200'>
+ <div className='flex flex-row box-border items-center cursor-text duration-300 rounded-sm border dark:border-slate-400 border-slate-500 py-1.5 px-2 focus-within:border-teal-400'>
+ <input className='bg-transparent min-w-[20px] focus:outline-none flex-[1]' type="text" placeholder='Search & Discover' />
+ <span className='inline-flex items-center justify-center cursor-pointer'>
+ <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" className='fill-gray-900 dark:fill-gray-200'><path d="M0 0h24v24H0z" fill="none" /><path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z" /></svg>
+ </span>
+ </div>
+ </form>
+ </div>
+
+ <nav className='flex flex-shrink-0 relative mr-0 h-full'>
+ <span className='px-4 h-auto min-w-[24px] flex items-center whitespace-nowrap cursor-pointer text-gray-900 dark:text-gray-200 font-medium'><Link href="/register">Join</Link></span>
+ <span className='px-4 h-auto min-w-[24px] flex items-center whitespace-nowrap cursor-pointer text-gray-900 dark:text-gray-200 font-medium'><Link href="/login">Log in</Link></span>
+ </nav>
+ </div>
+ <span className='lg:opacity-100 opacity-0 inline-block bg-gray-900 dark:bg-gray-200 w-[1px] h-[27px]'></span>
+ <div className='relative lg:m-0 mt-4'>
+ <div className='flex'>
+ <button className='text-teal-400 bg-transparent relative h-[54px] min-w-[150px] z-[2] cursor-auto font-semibold'>Submit</button>
+ </div>
+ </div>
+ </header>
+ </>
+ );
+ }
+}
+\ No newline at end of file
diff --git a/pages/Home.tsx b/pages/Home.tsx
@@ -4,6 +4,7 @@ import { RingLoader } from 'react-spinners';
import { ImageEvent, ImageGalleryEvent } from '../helpers/event_types';
import Link from 'next/link';
import Head from 'next/head';
+import Header from '../components/Header';
type ImageEvents = ImageEvent | ImageGalleryEvent;
@@ -141,32 +142,7 @@ export default class Home extends Component<Props, State>{
<Head>
<title key="title">Matrix Art | Home</title>
</Head>
- <header className='flex fixed top-0 left-0 right-0 bottom-0 lg:h-[108px] h-[216px] z-[100] items-center lg:flex-row flex-col'>
- <span className='flex items-center h-full lg:mx-10 my-4 text-gray-900 dark:text-gray-200 font-bold'><Link href="/">Matrix Art</Link></span>
- <div className='flex flex-1 items-center lg:flex-row flex-col'>
- <div className='flex grow-[1] h-full relative items-center'>
- <form className='w-[200px] text-gray-900 dark:text-gray-200'>
- <div className='flex flex-row box-border items-center cursor-text duration-300 rounded-sm border dark:border-slate-400 border-slate-500 py-1.5 px-2 focus-within:border-teal-400'>
- <input className='bg-transparent min-w-[20px] focus:outline-none flex-[1]' type="text" placeholder='Search & Discover' />
- <span className='inline-flex items-center justify-center cursor-pointer'>
- <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" className='fill-gray-900 dark:fill-gray-200'><path d="M0 0h24v24H0z" fill="none" /><path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z" /></svg>
- </span>
- </div>
- </form>
- </div>
-
- <nav className='flex flex-shrink-0 relative mr-0 h-full'>
- <span className='px-4 h-auto min-w-[24px] flex items-center whitespace-nowrap cursor-pointer text-gray-900 dark:text-gray-200 font-medium'><Link href="/register">Join</Link></span>
- <span className='px-4 h-auto min-w-[24px] flex items-center whitespace-nowrap cursor-pointer text-gray-900 dark:text-gray-200 font-medium'><Link href="/login">Log in</Link></span>
- </nav>
- </div>
- <span className='lg:opacity-100 opacity-0 inline-block bg-gray-900 dark:bg-gray-200 w-[1px] h-[27px]'></span>
- <div className='relative lg:m-0 mt-4'>
- <div className='flex'>
- <button className='text-teal-400 bg-transparent relative h-[54px] min-w-[150px] z-[2] cursor-auto font-semibold'>Submit</button>
- </div>
- </div>
- </header>
+ <Header></Header>
<main className='lg:pt-[108px] pt-[216px] z-0'>
<div className='z-[100] sticky lg:top-[108px] top-[216px] bg-[#fefefe]/[.95] dark:bg-[#14181E]/[.95]'>
<div className='h-[72px] px-10 w-full relative grid grid-cols-[1fr_auto_1fr] items-center' id='section-grid'>
@@ -218,9 +194,9 @@ export default class Home extends Component<Props, State>{
render_image_box(thumbnail_url: string, id: string, post_id: string, sender: string, caption: string) {
// TODO show creators display name instead of mxid and show avatar image
- const direct_link = `/post/${id}`;
+ const direct_link = `/post/${post_id}`;
return (
- <li className='flex-grow-1 h-[270px]' key={post_id}>
+ <li className='flex-grow-1 h-[270px]' key={id}>
<Link href={direct_link}>
<div className='relative h-[270px] cursor-pointer'>
<img className='relative max-w-full h-[270px] object-cover align-bottom z-0' src={this.props.client?.thumbnailLink(thumbnail_url, "scale", 270, 270)}></img>
@@ -244,4 +220,4 @@ function isImageGalleryEvent(event: ImageEvents): event is ImageGalleryEvent {
function isImageEvent(event: ImageEvents): event is ImageEvent {
return event.type === "m.image" && event.redacted_because === undefined;
-}
-\ No newline at end of file
+};
+\ No newline at end of file
