type Props = {
img: string;
title: string;
content: string;
color: string;
};
export default function CardComponent({
img,
title,
content,
color,
}: Props) {
return (
<>
<div className={`container bg-orange-700 w-[300px] h-[300px]`}></div>
</>
);
}
Page.tsx
export default function Home() {
return (
<main>
<div className="flex flex-nowrap p-5 gap-5">
{posts.map((post) => (
<CardComponent
key={post.title}
img={post.img}
title={post.title}
content={post.content}
color={post.color}
/>
))}
</div>
<div className="flex flex-nowrap p-5 gap-5">
<div className={`container bg-orange-700 w-[300px] h-[300px]`}></div>
</div>
</main>
);
}
Exactly the same code but when I loop it with a separate file, the width does not match the height. And, I am just curious why is this happening?
"flex-nowrap" does not let items to go to next row, if total width of all items and gaps does not fit container width, so flex needs to fit all 6 items in one row, so it shrinks their width.
Related
I am trying to set the background image under my components. But it always is on top, so my elements are under it.
Or in the second variant, all works fine, except that I can't apply blur-xl only to the background. it applies to background and Layout elements.
bg-repeat-y needs me to copy down my image, am I right?
import moons from './../assets/moon.svg'
const Background = ({ children }) => {
return (
<div className='bg-white '>
<div className='min-h-screen min-w-screen bg-repeat-y' style={{ backgroundImage: `url(${moons})` }}>
<div className="div"></div>
</div>
{children}
</div>
);
}
export default Background;
This Background element wraps other elements in Laoyout in react-router-dom
export const AppLayout = () => (
<div>
<Background>
<NewNavbar />
<Outlet />
<Footer />
</Background>
</div>
);
Help me, please!
try this, the blur will be applied between your components & background image
export const AppLayout = () => (
<Background>
<div class="backdrop-blur-xl h-full">
<NewNavbar />
<Outlet />
<footer />
</div>
</Background>
);
if you have any queries, refer to this link
https://play.tailwindcss.com/yX9aAMagRj
For the first variant/approach that you mentioned, you can set the z-index of the background to negative using the class -z-10 . Then your background will not come over your other elements.
I'm facing a strange problem while setting width and height of the video tag. I'm using Image component (from next/image), which is setting its height automatically.
It always shows height of 413px even if I use image with 150x150 dimensions. I'm not seeing any absolute height rule in CSS inspector even for parent elements or this Image component.
Actually it is the desired behavior (width/height) of the Image. I'm trying to do the same thing with the video tag. But it shrinks itself down to actual height of the video if video is smaller in height.
Video should not change it's height because it shares same CSS properties and has same container as Image. I'm also using object-fit:cover property.
Code for the component is:
import React, { useState } from 'react';
import Image from 'next/image';
import { IExclusiveCard } from '../../../typings/types';
import Link from 'next/link';
import useNFTMetadata from '../../../hooks/useNftMetaData';
import { BsFillPlayFill, BsPauseFill } from 'react-icons/bs';
const ExclusiveCard: React.FC<IExclusiveCard> = ({
id,
photo_name,
metadataUri,
cardInfo,
cardType,
cardInfoBg,
title,
desc,
collectionType,
asset_url,
thumbnail,
}) => {
let { data } = useNFTMetadata(metadataUri as string);
if (!metadataUri?.trim() && thumbnail && asset_url) {
data = {
asset_url,
thumbnail,
};
}
const [videoPaused, setVideoPaused] = useState(true);
let href = '';
if (collectionType === 'continuous') {
href = `/exclusives/${id}/auction`;
} else if (collectionType === 'editions') {
href = `/editions/${id}/mint`;
}
const image = data?.thumbnail || data?.image || photo_name;
const description = desc || data?.description || '';
return (
<Link href={href}>
<a className='h-full block'>
<div
className="token-card--items h-full w-[382px] md:w-full md:min-w-[216px] md:max-w-[216px] md:h-[317px] lg:w-[290px] laptop-x:w-[300px] laptop-m:w-[350px] desktop-m:w-[350px] rounded-3xl overflow-hidden bg-primary lg:rounded-2xl"
key={id}
>
<div className="token-img-cont-box h-full relative">
<div className="tokens-img-wrap h-full relative">
<div className="exclusive--card-img h-full w-full relative md:h-[317px]">
{/* If thumbnail exists, show video instead of an image */}
{!videoPaused && data?.asset_url ? (
<video
style={{
height: '100%',
objectFit: 'cover',
}}
src={data?.asset_url}
autoPlay
loop
muted
onEnded={() => setVideoPaused(true)}
/>
) :
image ? (
<Image
// src={image}
src={"https://picsum.photos/id/1/150/150"}
alt="tokens-card-img"
className="token-card-img h-full w-full object-cover"
width="382px"
height="520px"
/>
) : (
<div className="slim-nft-card-placeholder-bg rounded-[20px]"></div>
)}
</div>
<div className="tokens-card-top-cont flex justify-end items-start absolute top-0 left-0 p-5 w-full md:p-2">
<span
className={[
'card-updates-info text-fig-15 uppercase text-secondary block text-center font-primary font-normal rounded-[100%] w-[62px] h-[62px] leading-[62px] laptop-x:text-fig-12 laptop-x:w-[45px] laptop-x:h-[45px] laptop-x:leading-[45px] lg:w-[36px] lg:h-[36px] lg:text-fig-xs lg:leading-[36px]',
`bg-${cardInfoBg}`,
].join(' ')}
>
{cardInfo}
</span>
</div>
<div className="token-card-content-box pt-[13px] pb-4 px-6 absolute bottom-0 left-0 z-50 lg:px-4 w-full">
<h3 className="card-title font-primary font-normal text-fig-32 text-left text-secondary uppercase mb-4 laptop-x:text-fig-24 lg:text-fig-base lg:mb-2">
{title || data?.properties?.title}
</h3>
<p className="desc mb-8 text-fig-xs text-left text-secondary font-primary font-normal md:text-fig-xs md:mb-2">
{/* Truncate desc or data?.description if it is greater than 30 characters */}
{description.length > 50
? description.slice(0, 50) + '...'
: description}
</p>
<div
className={`token-cards-bottom flex ${
data?.thumbnail ? 'justify-between' : 'justify-end'
} w-full`}
>
{data?.thumbnail && (
<h3 className="card-type font-primary font-normal text-fig-32 text-right laptop-x:text-fig-24 text-white uppercase lg:text-fig-15 lg:mb-0">
{videoPaused ? (
<BsFillPlayFill
onClick={(ev) => {
ev.preventDefault();
setVideoPaused(false);
}}
className="text-4xl"
/>
) : (
<BsPauseFill
onClick={(ev) => {
ev.preventDefault();
setVideoPaused(true);
}}
className="text-4xl"
/>
)}
</h3>
)}
<h3 className="card-type font-primary font-normal text-fig-32 text-right laptop-x:text-fig-24 text-darkgray uppercase lg:text-fig-15 lg:mb-0">
{cardType}
</h3>
</div>
</div>
</div>
</div>
</div>
</a>
</Link>
);
};
export default ExclusiveCard;
I'm not sure what I'm missing here. What should I do to get same size of video like Image when I click play icon?
I made a custom switch in tailwind problem is that when it witch transiton doesnt work I think its becouse of this line
${isSwitched ? ' right-1 ' : 'left-1'}
import type { StateUpdater } from "preact/hooks"
type SwitchButtonProps = {
textLeft: String,
textRight: String,
isSwitched: boolean,
setIsSwitched: StateUpdater<boolean>
}
export const SwitchButton = ({ textLeft, textRight, isSwitched, setIsSwitched }: SwitchButtonProps) => {
return (
<div class="mx-8 shadow rounded border h-10 mt-4 flex p-1 relative items-center bg-gray-200">
<div class="w-full flex justify-center"
onClick={() => setIsSwitched(false)}
>
<button>{textLeft}</button>
</div>
<div class="w-full flex justify-center"
onClick={() => setIsSwitched(true)}>
<button>{textRight}</button>
</div>
<span
class={` bg-white shadow text-gray-800 flex items-center justify-center w-1/2 rounded h-8 transition-all top-[4px] absolute
${isSwitched ? ' right-1 ' : 'left-1'}
`}>
{isSwitched ? textRight : textLeft}
</span>
</div>
)
}
Hello so I have been working on this for hours and tried brute forcing it, with as many different solutions I could think of, but I don't seem to be getting it to work.
Goal: make the cards take up more width, when the screen is bigger
This is my root component:
function App() {
const event = new Date(Date.UTC(2000, 11, 20, 3, 0, 0));
return (
<div className="bg-gray-200 p-8 min-h-screen flex items-center justify-center antialiased text-gray-900 flex-col">
<Expenses date={event}></Expenses>
<Expenses date={event}></Expenses>
<Expenses date={event}></Expenses>
</div>
);
}
export default App;
This is the Expenses Component
export default function Expenses(props) {
return (
<div className="">
<ExpenseItem time={props.date}></ExpenseItem>
</div>
);
}
This is the Expense Item Component
export default function ExpenseItem(props) {
return (
<div className="bg-white rounded-lg overflow-hidden border flex h-auto mt-4 shadow">
<CalendarItem date={props.time}></CalendarItem>
<div className="p-4">
<h4 className="font-semibold text-lg">All my money for software engineering</h4>
<div>10000€</div>
<div className="mt-4 inline-block bg-indigo-300 text-white px-4 py-1 rounded-lg shadow-lg uppercase tracking-wide font-semibold text-sm ">
Delete
</div>
</div>
</div>
);
}
I am grateful for every input! Thank you!
Add "width: 100%" to the card and its parent component. When Browser resize(expand or shrink), they will resize too. You can handle the detail of their size by giving some width to the parent and the parent's width will be limit width of the card component.
I'm trying to create a grid layout that alternates the number of columns in each row. So, for example, the first row would have one column and the second row would have two columns then the third row would go back to one column. At this point, I only have a grid that has two columns for each row.
Anyone have any suggestions on how to do this? Thanks!
Here's what I have now:
<div className="grid grid-cols-2 gap-10">
{projects.map(({ node }, index) => {
const title = node.frontmatter.title || node.fields.slug
const client = node.frontmatter.client
const category = node.frontmatter.category
const image = node.frontmatter.image.childImageSharp.fluid
const description = node.frontmatter.description
return (
<div className="col-span-1">
<Link to={node.fields.slug}>
<BgImg fluid={image} className="h-104 bg-cover bg-no-repeat flex flex-col justify-end hover:shadow-2xl transition-all ease-linear duration-300" key={node.id}>
</BgImg>
</Link>
<div className="py-5">
<h3 className="text-2xl font-regular"><span className="font-semibold">{client}</span><span className="mx-1">—</span>{title}</h3>
<p className="text-xl mb-4 font-light">{description}</p>
</div>
</div>
)
})}
</div>
If you're looking to have the 1-column rows span the whole width like this:
[content] [content]
[ content ]
[content] [content]
Rather than like this:
[content] [content]
[content]
[content] [content]
Then this should be fairly simple to accomplish in TailwindCSS like this:
<div className="grid grid-cols-2 gap-10">
{projects.map(({ node }, index) => {
const title = node.frontmatter.title || node.fields.slug
const client = node.frontmatter.client
const category = node.frontmatter.category
const image = node.frontmatter.image.childImageSharp.fluid
const description = node.frontmatter.description
return (
<div className={index % 3 == 2 ? "col-span-2" : "col-span-1"}>
<Link to={node.fields.slug}>
<BgImg fluid={image} className="h-104 bg-cover bg-no-repeat flex flex-col justify-end hover:shadow-2xl transition-all ease-linear duration-300" key={node.id}>
</BgImg>
</Link>
<div className="py-5">
<h3 className="text-2xl font-regular"><span className="font-semibold">{client}</span><span className="mx-1">—</span>{title}</h3>
<p className="text-xl mb-4 font-light">{description}</p>
</div>
</div>
)
})}
</div>