Next.js Discord

Discord Forum

ShadCN/UI struggle :p

Answered
Laysan Albatross posted this in #help-forum
Open in Discord
Laysan AlbatrossOP
Do ya know, why <CardPrevious> and <CardNext> is not rendered? 
const CardProjects = ({ href, title, imgSrc, company, tasks, description, ...props }) => (
  <Carousel className="h-full w-full overflow-hidden px-4 xl:w-1/2">
    <CarouselContent>
      <CarouselItem>
        <Card className={cn('border-gray-700 border-opacity-60')} {...props}>
          <CardHeader>
            <CardTitle>
              <p className="mb-3 text-2xl font-bold leading-8 tracking-tight">{title}</p>
              <Link
                href={href}
                className="text-base font-medium leading-6 text-primary-500 hover:text-primary-400"
                aria-label={`Link to ${company}`}
              >
                {company}
              </Link>
            </CardTitle>
          </CardHeader>
          <CardContent className="grid gap-4">
            <div>
              <Image
                alt={title}
                src={imgSrc}
                className="h-48 object-cover object-center xl:h-48"
                width={800}
                height={500}
              />
              <div className="p-6">
                <p className="prose mb-3 max-w-none text-gray-400">{description}</p>
                <ul className="pb-3 text-oneCyan">
                  {tasks.map((task, index) => (
                    <li key={index}>{task}</li>
                  ))}
                </ul>
              </div>
            </div>
          </CardContent>
          <CardFooter>
            <CarouselNext />
            <CarouselPrevious />
          </CardFooter>
        </Card>
      </CarouselItem>
      <CarouselItem>{title}</CarouselItem>
    </CarouselContent>
  </Carousel>
)
export default CardProjects
Answered by Brown bear
yea, or any parents that it might inherit those styles from
View full answer

32 Replies

Laysan AlbatrossOP
its in the CardFooter
but I also tried moving it out of the CardFooter, also not displayed
@Laysan Albatross but I also tried moving it out of the CardFooter, also not displayed
Brown bear
they have to be direct children to <Carousel> They can't be in <CarouselContent>
Laysan AlbatrossOP
its also not displayed when I put them under <CarouselContent>
@Laysan Albatross its also not displayed when I put them under <CarouselContent>
Brown bear
they cant be in <CarouselContent>, they have to be under <Carousel>
This is the example in the docs:

<Carousel className="w-full max-w-xs">
<CarouselContent>
{Array.from({ length: 5 }).map((_, index) => (
<CarouselItem key={index}>
<div className="p-1">
<Card>
<CardContent className="flex aspect-square items-center justify-center p-6">
<span className="text-4xl font-semibold">{index + 1}</span>
</CardContent>
</Card>
</div>
</CarouselItem>
))}
</CarouselContent>
<CarouselPrevious />
<CarouselNext />
</Carousel>
Laysan AlbatrossOP
yea I know
tried that, nothing displayed
Brown bear
hmm
Laysan AlbatrossOP
const CardProjects = ({ href, title, imgSrc, company, tasks, description, ...props }) => (
  <Carousel className="h-full w-full overflow-hidden p-4 xl:w-1/2">
    <CarouselContent>
      <CarouselItem>
        <Card className={cn('border-gray-700 border-opacity-60')} {...props}>
          <CardHeader>
            <CardTitle>
              <p className="mb-3 text-2xl font-bold leading-8 tracking-tight">{title}</p>
              <Link
                href={href}
                className="text-base font-medium leading-6 text-primary-500 hover:text-primary-400"
                aria-label={`Link to ${company}`}
              >
                {company}
              </Link>
            </CardTitle>
          </CardHeader>
          <CardContent className="grid gap-4">
            <div>
              <Image
                alt={title}
                src={imgSrc}
                className="h-48 object-cover object-center xl:h-48"
                width={800}
                height={500}
              />
              <div className="p-6">
                <p className="prose mb-3 max-w-none text-gray-400">{description}</p>
                <ul className="pb-3 text-oneCyan">
                  {tasks.map((task, index) => (
                    <li key={index}>{task}</li>
                  ))}
                </ul>
              </div>
            </div>
          </CardContent>
          <CardFooter></CardFooter>
        </Card>
      </CarouselItem>
      <CarouselItem>{title}</CarouselItem>
    </CarouselContent>
    <CarouselNext />
    <CarouselPrevious />
  </Carousel>
)
nooothing 😦
Brown bear
are they in the dom?
Laysan AlbatrossOP
whats that xd
@Laysan Albatross whats that xd
Brown bear
are they in the elements section in the browser dev tools
Laysan AlbatrossOP
u mean the react dev tools or normal dev tools?
cause for react dev tools, I need to build my page realquick
Laysan AlbatrossOP
seems to be this button element, i guess
@Laysan Albatross seems to be this button element, i guess
Brown bear
so its there, just hidden... hmm
does the element have any styles for visibility or display that are hiding it? Thats the only thing I can think of
Laysan AlbatrossOP
you mean the <CarouselPrevious> element itself?
@Laysan Albatross you mean the <CarouselPrevious> element itself?
Brown bear
yea, or any parents that it might inherit those styles from
Answer
Laysan AlbatrossOP
the element itself - no. That are just the default styles from shadcnui
parents, hmm
the Carousel is the only parent element with css styling
Brown bear
the z-index could be too far back/ things are in front of it
Laysan AlbatrossOP
i love u hahaha I just checked for the Carousel styles
it was "overflow-hidden"
idk why I put that there
@Laysan Albatross it was "overflow-hidden"
Brown bear
hmm
Laysan AlbatrossOP
its displaying now ❤️
@Laysan Albatross its displaying now ❤️
Brown bear
cool