Skip to content
Snippets Groups Projects
Commit 616865bd authored by Matt Kirby's avatar Matt Kirby
Browse files

Fixed issues with absolute positioning

parent 93ec3dc5
No related branches found
No related tags found
1 merge request!8create "Basic components"
......@@ -34,7 +34,7 @@ const NavBar: FC<PropsWithChildren<NavBarProps>> = ({
return (
<>
<div className="min-h-full min-w-full">
<Disclosure as="nav" className="bg-c-pink fixed w-full">
<Disclosure as="nav" className="bg-c-pink fixed w-full z-10">
{({ open }) => (
<>
<div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
......
import { Post } from "@/types/post"
import { FC, PropsWithChildren } from "react"
import { Bars3Icon, HeartIcon, ChatBubbleLeftIcon } from '@heroicons/react/24/outline'
import { EyeSlashIcon, HeartIcon, ChatBubbleLeftIcon } from '@heroicons/react/24/outline'
import LikeStack from "./LikeStack"
import Comment from "../comments/Comment"
import styles from '../../styles/AnswerCard.module.css'
type AnswerCardProps = {
post: Post;
......@@ -15,7 +16,7 @@ const AnswerCard: FC<PropsWithChildren<AnswerCardProps>> = ({
}) => {
return (
<div className="flex-1 rounded-3xl bg-white text-lg shadow-lg overflow-hidden">
<div className="flex-1 rounded-3xl bg-white text-lg shadow-lg overflow-hidden relative">
<div className="p-4">
<p className="text-sm text-gray-600">{`${post.User.Name}'s answer`}</p>
<div>
......@@ -41,6 +42,7 @@ const AnswerCard: FC<PropsWithChildren<AnswerCardProps>> = ({
<LikeStack Users={[post.User, post.User, post.User, post.User, post.User, post.User]} />
</div>
</div>
......@@ -48,6 +50,21 @@ const AnswerCard: FC<PropsWithChildren<AnswerCardProps>> = ({
<p className="text-xs text-gray-500 hover:text-c-pink">View all 3 comments</p>
<Comment Comment={{Data: "asdfg", User: post.User}} />
</div>
{/* <div className={styles.hidden}>
<div className="flex justify-center flex-col items-center">
<EyeSlashIcon className="h-10 w-10 text-c-pink"/>
<p className="text-sm text-c-pink">This post is hidden</p>
<button
className="rounded-md bg-white px-3.5 py-2 mt-2 text-xs font-semibold text-c-pink shadow-sm hover:bg-c-pink hover:text-white focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-pink-400"
>
Post your daily
</button>
</div>
</div> */}
</div>
)
}
......
.hidden {
/* From https://css.glass */
background: rgba(180, 180, 180, 0.18);
border-radius: 16px;
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(8.1px);
height: 100%;
width: 100%;
position: absolute;
top: 0;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
\ No newline at end of file
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment