bockster6669 Comments - Answer Overflow

the only solution I can come with is to get the boundingBox of the text and set the button's size to this bouding box, but I hope there is a css way to do this

5 replies

KPCKevin Powell - Community

•Created by bockster6669 on 1/12/2025 in #front-end

Hover effect

good statement yes, but I am looking for a way of reviewing the icon on hover and changing the width of the button. Actually I have manage to do this type of style on my other button, which first shows icon and on hover it reviews its text, but I managed to did it, because I knew the width and height of my icon and I just set the width and height on my button to not be bigger than the icon initially, but I don't know how to make the same when firstly I want to show text and on hover the icon. Example: Here is icon first and then button

 <button
      className="min-w-[52px] max-w-[52px] hover:max-w-[200px] flex items-center justify-end p-3 group transition-all gap-3 overflow-hidden"
    >
      <span className="shrink-0 group-hover:opacity-100 text-xl">
        Back To Top
      </span>
      <ChevronUp width={28} height={28} className="shrink-0" />
    </button>

 <button
      className="min-w-[52px] max-w-[52px] hover:max-w-[200px] flex items-center justify-end p-3 group transition-all gap-3 overflow-hidden"
    >
      <span className="shrink-0 group-hover:opacity-100 text-xl">
        Back To Top
      </span>
      <ChevronUp width={28} height={28} className="shrink-0" />
    </button>

5 replies

KPCKevin Powell - Community

•Created by bockster6669 on 12/16/2024 in #front-end

Grid auto column

I will try it later, thank you for the suggestion

4 replies

PPrisma

•Created by bockster6669 on 9/11/2024 in #help-and-questions

Search text with Prisma

hi, thank you, but can you help for this now? I am having strange problem, why when formattedQuery is undefined it doesn't finds any posts, but if I refer directly undefined to search then it finds all posts?

  const formattedQuery = formatSearchQuery(searchInputParam);

  try {
      const posts = await PostRepo.findMany({
        where: {
          title: {
            search: formattedQuery,
          },
        },

  const formattedQuery = formatSearchQuery(searchInputParam);

  try {
      const posts = await PostRepo.findMany({
        where: {
          title: {
            search: formattedQuery,
          },
        },

For example* I can use

orderBy: {
 createdAt: undefined,
}

orderBy: {
 createdAt: undefined,
}

and this will work find, the posts will not be sorted by any mean but I can not use

const variable = undefined
orderBy: {
 createdAt: variable ,
}

const variable = undefined
orderBy: {
 createdAt: variable ,
}

This will not work! I am getting error:

Error occurred while fetching posts: PrismaClientValidationError: 
Invalid `prisma.post.findMany()` invocation:

{
  where: {
    title: {
      search: "undefined"
    }
  },
  include: {
    author: true,
    tags: true,
    comments: {
      include: {
        author: true
      }
    }
  },
  orderBy: {
    createdAt: "undefined"
               ~~~~~~~~~~~
  }
}

Error occurred while fetching posts: PrismaClientValidationError: 
Invalid `prisma.post.findMany()` invocation:

{
  where: {
    title: {
      search: "undefined"
    }
  },
  include: {
    author: true,
    tags: true,
    comments: {
      include: {
        author: true
      }
    }
  },
  orderBy: {
    createdAt: "undefined"
               ~~~~~~~~~~~
  }
}

4 replies

PPrisma

•Created by bockster6669 on 9/3/2024 in #help-and-questions

Prisma Types

PostModel.findMany return only Post[] instead of Post[] & Tag: {name: string}

6 replies

PPrisma

•Created by bockster6669 on 9/3/2024 in #help-and-questions

Prisma Types

PostFindUniqueResult is the correct type, but PostModel.findMany doesnt return it

6 replies

PPrisma

•Created by bockster6669 on 9/3/2024 in #help-and-questions

Prisma Types

same as this one and so on

  type PostFindManyResult = Prisma.Result<
  typeof db.post,
  {
    include: {
      tags: {
        select: {
          name: true,
        },
      },
    },
  },
  'findMany'
>;

  const posts:PostFindManyResult = await PostModel.findMany({
    include: {
      tags: {
        select: {
          name: true,
        },
      },
    },
  });

  type PostFindManyResult = Prisma.Result<
  typeof db.post,
  {
    include: {
      tags: {
        select: {
          name: true,
        },
      },
    },
  },
  'findMany'
>;

  const posts:PostFindManyResult = await PostModel.findMany({
    include: {
      tags: {
        select: {
          name: true,
        },
      },
    },
  });