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>
)
}
Related
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 tried to style file input button to look kind of like all buttons in my app. I use tailwind for styling.
Below example of button on hover:
The shadow is not hidden or cut off. But if I try to use the same style on file input - it looks like this:
The shadow is cut off. Looks like there is an overflow hidden but there isn't.
File input code:
<div className="flex flex-col gap-y-2 overflow-visible">
<label htmlFor="art_cover">Art cover</label>
<input
type="file"
name="art_cover"
id="art_cover"
onChange={({ currentTarget }: ChangeEvent<HTMLInputElement>) => {
currentTarget.files && formik.setFieldValue('art_cover', currentTarget.files[0]);
}}
className="text-gray-400 file:border-solid file:btn-style file:text-primary-light file:mr-3"
/>
</div>
Tailwind reused style that I use for buttons:
.btn-style {
#apply rounded-full bg-transparent border-2 border-primary-accent font-bold px-4 md:px-5 py-1 md:py-1.5 cursor-pointer
transition text-center text-sm md:text-base hover:bg-primary-accent hover:text-secondary-dark hover:shadow-accent;
}
.shadow-accent {
#apply drop-shadow-[0_0_15px_rgba(78,255,166,0.3)];
}
Fixed by changing my input implementation using this answer.
<div className="flex flex-col gap-y-2">
<label htmlFor="art_cover">Art cover</label>
<label htmlFor="art_cover" className="flex items-center">
<div className="btn-style text-primary-light mr-3">Choose file</div>
<p className="text-gray-400">{formik.values.art_cover === undefined ? 'No file chosen' : formik.values.art_cover['name']}</p>
</label>
<input
type="file"
name="art_cover"
id="art_cover"
onChange={({ currentTarget }: ChangeEvent<HTMLInputElement>) => {
currentTarget.files && formik.setFieldValue('art_cover', currentTarget.files[0]);
}}
className="hidden"
/>
</div>
Works like a charm
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 am trying to make tooltips for icons in my header, and right now I have made a component to make the icon and tooltip into one div, with tailwind styles in that
JSX Component:
const HeaderIcon = ({ icon, redirect = window.location.pathname.replace('/', ""), text = ""}:IconProps) => (
<div className="group relative flex items-center justify-center h-12 w-12 mt-2 mb-2 mx-5 cursor-pointer">
<button onClick={() => goto(redirect)} className="items-center inline-flex">{icon}</button>
<span className="group-hover:visible absolute rounded-md shadow-md text-white bg-gray-900 text-xs font-bold transition-all duration-100 p-2 text-center min-w-max invisible">
{text}
</span>
</div>
)
Here goto is a redirect function, icon is a JSX element from react-feather (icon library), redirect is a string telling the button where to redirect to, and text is the tooltip text. What tailwind classes should I use to position the tooltips under the icons, centered.
If there is any other things you may want then just ask and I will edit the code in.
you need to create a new variant group-hover for the plugin visibility in the Tailwind configuration:
// tailwind.config.js
module.exports = {
// ...
variants: {
extend: {
visibility: ['group-hover'],
}
},
}
On the following div:
<div className='border border-gray-400
text-gray-600
hover:border-gray-600
focus:border-green-500
focus-within:border-green-500'>
I want the hover state not to happen when an element is an in-focus state. How can I make it so?
Thanks!
Use the css :not selector, e.g. hover(:not focus):border-gray-600
Try this, border need to define width, so in this example I gave just 2 when it hovered.
check official Doc
<div className='hover:border-2 border-gray-400 text-gray-600
hover:border-gray-600
focus:border-green-500 focus-within:border-green-500'>
export const FramelessInput = ({ name }) => {
const [focused, setFocused] = useState(false);
return (
<div
className={classNames(
'w-[200px] rounded-sm border border-transparent text-gray-600 focus-within:border-green-500',
!focused && 'hover:border-gray-600'
)}
>
<input
type="text"
placeholder={name}
onFocus={(e) => setFocused(true)}
onBlur={(e) => setFocused(false)}
className="block text-sm leading-4 font-sans p-3 h-10 focus:outline-none"
/>
</div>
);
};
Try use property "ring"
<div className='border border-gray-400
text-gray-600
ring-green-500
focus-within:ring-2'>