Added and ran tailwind prettier

components/app/links/link-card-placeholder.tsx

@@ -1,15 +1,15 @@
 export default function LinkCardPlaceholder() {
  return (
- <li className="flex items-center bg-white p-4 rounded-lg shadow hover:shadow-md transition-all">
- <div className="w-10 h-10 rounded-full mr-2 bg-gray-200 animate-pulse" />
+ <li className="flex items-center rounded-lg bg-white p-4 shadow transition-all hover:shadow-md">
+ <div className="mr-2 h-10 w-10 animate-pulse rounded-full bg-gray-200" />
  <div>
- <div className="flex items-center space-x-2 mb-2.5">
- <div className="w-28 h-5 rounded-md bg-gray-200 animate-pulse" />
- <div className="w-5 h-5 rounded-full bg-gray-200 animate-pulse" />
- <div className="w-5 h-5 rounded-full bg-gray-200 animate-pulse" />
- <div className="w-20 h-5 rounded-md bg-gray-200 animate-pulse" />
+ <div className="mb-2.5 flex items-center space-x-2">
+ <div className="h-5 w-28 animate-pulse rounded-md bg-gray-200" />
+ <div className="h-5 w-5 animate-pulse rounded-full bg-gray-200" />
+ <div className="h-5 w-5 animate-pulse rounded-full bg-gray-200" />
+ <div className="h-5 w-20 animate-pulse rounded-md bg-gray-200" />
  </div>
- <div className="w-72 h-4 rounded-md bg-gray-200 animate-pulse" />
+ <div className="h-4 w-72 animate-pulse rounded-md bg-gray-200" />
  </div>
  </li>
  );

components/app/links/link-card.tsx

@@ -62,32 +62,32 @@ export default function LinkCard({ props }: { props: LinkProps }) {
  const expired = expiresAt && new Date() > new Date(expiresAt);
 
  return (
- <div className="relative bg-white p-3 pr-1 sm:p-4 rounded-lg shadow hover:shadow-md transition-all">
+ <div className="relative rounded-lg bg-white p-3 pr-1 shadow transition-all hover:shadow-md sm:p-4">
  <LinkQRModal />
  <AddEditLinkModal />
  <ArchiveLinkModal />
  <DeleteLinkModal />
- <div className="absolute top-0 left-0 rounded-l-lg overflow-hidden w-1.5 h-full flex flex-col">
- {archived && <div className="bg-gray-400 h-full w-full" />}
+ <div className="absolute top-0 left-0 flex h-full w-1.5 flex-col overflow-hidden rounded-l-lg">
+ {archived && <div className="h-full w-full bg-gray-400" />}
  {expired ? (
- <div className="bg-amber-500 h-full w-full" />
+ <div className="h-full w-full bg-amber-500" />
  ) : (
- <div className="bg-green-500 h-full w-full" />
+ <div className="h-full w-full bg-green-500" />
  )}
  </div>
- <li className="relative flex justify-between items-center">
- <div className="relative flex items-center space-x-2 sm:space-x-4 shrink">
+ <li className="relative flex items-center justify-between">
+ <div className="relative flex shrink items-center space-x-2 sm:space-x-4">
  <BlurImage
  src={`https://www.google.com/s2/favicons?sz=64&domain_url=${apexDomain}`}
  alt={apexDomain}
- className="w-8 h-8 sm:w-10 sm:h-10 rounded-full"
+ className="h-8 w-8 rounded-full sm:h-10 sm:w-10"
  width={20}
  height={20}
  />
  <div>
- <div className="flex items-center space-x-2 max-w-fit">
+ <div className="flex max-w-fit items-center space-x-2">
  <a
- className="text-blue-800 text-sm sm:text-base font-semibold truncate w-24 sm:w-full"
+ className="w-24 truncate text-sm font-semibold text-blue-800 sm:w-full sm:text-base"
  href={linkConstructor({ key, domain })}
  target="_blank"
  rel="noreferrer"
@@ -107,41 +107,41 @@ export default function LinkCard({ props }: { props: LinkProps }) {
  <CopyButton url={linkConstructor({ key, domain })} />
  <button
  onClick={() => setShowLinkQRModal(true)}
- className="group p-1.5 rounded-full bg-gray-100 hover:bg-blue-100 hover:scale-105 active:scale-95 transition-all duration-75"
+ className="group rounded-full bg-gray-100 p-1.5 transition-all duration-75 hover:scale-105 hover:bg-blue-100 active:scale-95"
  >
  <span className="sr-only">Download QR</span>
- <QR className="text-gray-700 group-hover:text-blue-800 transition-all" />
+ <QR className="text-gray-700 transition-all group-hover:text-blue-800" />
  </button>
  <Link href={`/${slug}/${encodeURI(key)}`}>
- <a className="flex items-center space-x-1 rounded-md bg-gray-100 px-2 py-0.5 hover:scale-105 active:scale-95 transition-all duration-75">
- <Chart className="w-4 h-4" />
- <p className="text-sm text-gray-500 whitespace-nowrap">
+ <a className="flex items-center space-x-1 rounded-md bg-gray-100 px-2 py-0.5 transition-all duration-75 hover:scale-105 active:scale-95">
+ <Chart className="h-4 w-4" />
+ <p className="whitespace-nowrap text-sm text-gray-500">
  {isValidating ? (
  <LoadingDots color="#71717A" />
  ) : (
  nFormatter(clicks)
  )}
- <span className="hidden sm:inline-block ml-1">clicks</span>
+ <span className="ml-1 hidden sm:inline-block">clicks</span>
  </p>
  </a>
  </Link>
  </div>
- <h3 className="text-sm font-medium text-gray-700 truncate max-w-[200px] md:max-w-md lg:max-w-2xl xl:max-w-3xl">
+ <h3 className="max-w-[200px] truncate text-sm font-medium text-gray-700 md:max-w-md lg:max-w-2xl xl:max-w-3xl">
  {url}
  </h3>
  </div>
  </div>
 
  <div className="flex items-center">
- <p className="text-sm hidden sm:block text-gray-500 whitespace-nowrap mr-3">
+ <p className="mr-3 hidden whitespace-nowrap text-sm text-gray-500 sm:block">
  Added {timeAgo(createdAt)}
  </p>
- <p className="text-sm sm:hidden text-gray-500 whitespace-nowrap mr-1">
+ <p className="mr-1 whitespace-nowrap text-sm text-gray-500 sm:hidden">
  {timeAgo(createdAt, true)}
  </p>
  <Popover
  content={
- <div className="w-full sm:w-40 p-2 grid gap-1">
+ <div className="grid w-full gap-1 p-2 sm:w-40">
  {slug && exceededUsage ? (
  <Tooltip
  content={
@@ -156,7 +156,7 @@ export default function LinkCard({ props }: { props: LinkProps }) {
  />
  }
  >
- <div className="w-full text-gray-300 cursor-not-allowed font-medium text-sm p-2 text-left transition-all duration-75">
+ <div className="w-full cursor-not-allowed p-2 text-left text-sm font-medium text-gray-300 transition-all duration-75">
  Edit
  </div>
  </Tooltip>
@@ -166,7 +166,7 @@ export default function LinkCard({ props }: { props: LinkProps }) {
  setOpenPopover(false);
  setShowAddEditLinkModal(true);
  }}
- className="w-full font-medium text-sm text-gray-500 p-2 text-left rounded-md hover:bg-gray-100 transition-all duration-75"
+ className="w-full rounded-md p-2 text-left text-sm font-medium text-gray-500 transition-all duration-75 hover:bg-gray-100"
  >
  Edit
  </button>
@@ -176,7 +176,7 @@ export default function LinkCard({ props }: { props: LinkProps }) {
  setOpenPopover(false);
  setShowArchiveLinkModal(true);
  }}
- className="w-full font-medium text-sm text-gray-500 p-2 text-left rounded-md hover:bg-gray-100 transition-all duration-75"
+ className="w-full rounded-md p-2 text-left text-sm font-medium text-gray-500 transition-all duration-75 hover:bg-gray-100"
  >
  Archive
  </button>
@@ -185,7 +185,7 @@ export default function LinkCard({ props }: { props: LinkProps }) {
  setOpenPopover(false);
  setShowDeleteLinkModal(true);
  }}
- className="w-full font-medium text-sm text-red-600 hover:bg-red-600 hover:text-white p-2 text-left rounded-md transition-all duration-75"
+ className="w-full rounded-md p-2 text-left text-sm font-medium text-red-600 transition-all duration-75 hover:bg-red-600 hover:text-white"
  >
  Delete
  </button>
@@ -198,9 +198,9 @@ export default function LinkCard({ props }: { props: LinkProps }) {
  <button
  type="button"
  onClick={() => setOpenPopover(!openPopover)}
- className="rounded-md px-1 py-2 hover:bg-gray-100 active:bg-gray-200 transition-all duration-75"
+ className="rounded-md px-1 py-2 transition-all duration-75 hover:bg-gray-100 active:bg-gray-200"
  >
- <ThreeDots className="w-5 h-5 text-gray-500" />
+ <ThreeDots className="h-5 w-5 text-gray-500" />
  </button>
  </Popover>
  </div>

components/app/links/link-filters/index.tsx

@@ -16,22 +16,22 @@ export default function LinkFilters() {
  {/* Mobile filters */}
  <button
  onClick={() => setShowFilters(!showFilters)}
- className="flex justify-between items-center space-x-2 sm:hidden bg-white w-full my-5 px-3 py-2.5 rounded-md shadow hover:shadow-md active:scale-95 transition-all duration-75"
+ className="my-5 flex w-full items-center justify-between space-x-2 rounded-md bg-white px-3 py-2.5 shadow transition-all duration-75 hover:shadow-md active:scale-95 sm:hidden"
  >
  <div className="flex items-center space-x-2 text-gray-700">
  <Filter className="h-4 w-4 shrink-0" />
  <p className="text-sm">Filters</p>
  </div>
  <ChevronDown
- className={`w-5 h-5 text-gray-400 ${
- showFilters ? "transform rotate-180" : ""
+ className={`h-5 w-5 text-gray-400 ${
+ showFilters ? "rotate-180 transform" : ""
  } transition-all duration-75`}
  />
  </button>
  <AnimatePresence>
  {showFilters && (
  <motion.div
- className="border-t border-gray-200 w-full flex flex-col space-y-2 py-5 sm:hidden"
+ className="flex w-full flex-col space-y-2 border-t border-gray-200 py-5 sm:hidden"
  {...AnimationSettings}
  >
  <LinkSort />
@@ -42,7 +42,7 @@ export default function LinkFilters() {
  </AnimatePresence>
 
  {/* Desktop filters */}
- <div className="w-full my-5 hidden sm:flex justify-end">
+ <div className="my-5 hidden w-full justify-end sm:flex">
  <LinkSort />
  {/* Weird workaround because if I put `space-x-2` in the parent it misaligns the popover dropdown */}
  <div className="w-4" />

components/app/links/link-filters/link-sort.tsx

@@ -33,7 +33,7 @@ export default function LinkSort() {
  return (
  <Popover
  content={
- <div className="w-full md:w-48 p-2">
+ <div className="w-full p-2 md:w-48">
  {sortOptions.map(({ display, slug }) => (
  <button
  key={slug}
@@ -52,10 +52,10 @@ export default function LinkSort() {
  query: finalQuery,
  });
  }}
- className="flex items-center justify-between space-x-2 px-1 py-2 w-full rounded-md hover:bg-gray-100 active:bg-gray-200"
+ className="flex w-full items-center justify-between space-x-2 rounded-md px-1 py-2 hover:bg-gray-100 active:bg-gray-200"
  >
  <div className="flex items-center justify-start space-x-2">
- <SortDesc className="w-4 h-4" />
+ <SortDesc className="h-4 w-4" />
  <p className="text-sm text-gray-700">{display}</p>
  </div>
  {selectedSort.slug === slug && (
@@ -70,15 +70,15 @@ export default function LinkSort() {
  >
  <button
  onClick={() => setOpenPopover(!openPopover)}
- className="flex justify-between items-center space-x-2 bg-white w-full sm:w-48 px-3 py-2.5 rounded-md shadow hover:shadow-md active:scale-95 transition-all duration-75"
+ className="flex w-full items-center justify-between space-x-2 rounded-md bg-white px-3 py-2.5 shadow transition-all duration-75 hover:shadow-md active:scale-95 sm:w-48"
  >
  <div className="flex items-center space-x-2 text-gray-700">
  <Sort className="h-4 w-4 shrink-0" />
  <p className="text-sm">Sort by</p>
  </div>
  <ChevronDown
- className={`w-5 h-5 text-gray-400 ${
- openPopover ? "transform rotate-180" : ""
+ className={`h-5 w-5 text-gray-400 ${
+ openPopover ? "rotate-180 transform" : ""
  } transition-all duration-75`}
  />
  </button>

components/app/links/link-filters/status-filter.tsx

@@ -52,7 +52,7 @@ export default function StatusFilter() {
  return (
  <Popover
  content={
- <div className="w-full md:w-44 p-2">
+ <div className="w-full p-2 md:w-44">
  {statuses.map(({ display, slug, color }) => (
  <button
  key={slug}
@@ -83,10 +83,10 @@ export default function StatusFilter() {
  query: finalQuery,
  });
  }}
- className="flex items-center justify-between p-2 w-full rounded-md hover:bg-gray-100 active:bg-gray-200"
+ className="flex w-full items-center justify-between rounded-md p-2 hover:bg-gray-100 active:bg-gray-200"
  >
  <div className="flex items-center justify-start space-x-2">
- <div className={`rounded-full w-2 h-2 ${color}`} />
+ <div className={`h-2 w-2 rounded-full ${color}`} />
  <p className="text-sm text-gray-700">{display}</p>
  </div>
  {(status === "all" ||
@@ -102,14 +102,14 @@ export default function StatusFilter() {
  >
  <button
  onClick={() => setOpenPopover(!openPopover)}
- className="flex justify-between items-center space-x-2 bg-white w-full sm:w-44 px-3 py-2.5 rounded-md shadow hover:shadow-md active:scale-95 transition-all duration-75"
+ className="flex w-full items-center justify-between space-x-2 rounded-md bg-white px-3 py-2.5 shadow transition-all duration-75 hover:shadow-md active:scale-95 sm:w-44"
  >
  <div className="flex items-center space-x-2 text-gray-700">
  <div className="flex -space-x-1">
  {statuses.map(({ slug, color }) => (
  <div
  key={slug}
- className={`rounded-full w-3.5 h-3.5 ${
+ className={`h-3.5 w-3.5 rounded-full ${
  selectedStatus.includes(slug) ? color : "bg-gray-200"
  } border border-white`}
  />
@@ -118,8 +118,8 @@ export default function StatusFilter() {
  <p className="text-sm">Status</p>
  </div>
  <ChevronDown
- className={`w-5 h-5 text-gray-400 ${
- openPopover ? "transform rotate-180" : ""
+ className={`h-5 w-5 text-gray-400 ${
+ openPopover ? "rotate-180 transform" : ""
  } transition-all duration-75`}
  />
  </button>

components/app/links/link-filters/user-filter.tsx

@@ -29,7 +29,7 @@ export default function UserFilter() {
  return (
  <Popover
  content={
- <div className="w-full md:w-56 p-2">
+ <div className="w-full p-2 md:w-56">
  {users.map(({ id, name, email }) => (
  <button
  key={id}
@@ -45,7 +45,7 @@ export default function UserFilter() {
  query: finalQuery,
  });
  }}
- className="flex items-center space-x-2 p-2 w-full rounded-md hover:bg-gray-100 active:bg-gray-200"
+ className="flex w-full items-center space-x-2 rounded-md p-2 hover:bg-gray-100 active:bg-gray-200"
  >
  <BlurImage
  src={`https://avatar.tobi.sh/${email}`}
@@ -54,7 +54,7 @@ export default function UserFilter() {
  height={28}
  className="rounded-full"
  />
- <p className="text-sm text-gray-700 truncate">{name || email}</p>
+ <p className="truncate text-sm text-gray-700">{name || email}</p>
  </button>
  ))}
  </div>
@@ -64,11 +64,11 @@ export default function UserFilter() {
  >
  <button
  onClick={() => setOpenPopover(!openPopover)}
- className="flex justify-between items-center space-x-1 bg-white w-full md:w-56 px-3 py-2 rounded-md shadow hover:shadow-md active:scale-95 transition-all duration-75"
+ className="flex w-full items-center justify-between space-x-1 rounded-md bg-white px-3 py-2 shadow transition-all duration-75 hover:shadow-md active:scale-95 md:w-56"
  >
- <div className="flex items-center space-x-2 text-gray-700 w-44">
+ <div className="flex w-44 items-center space-x-2 text-gray-700">
  <Search className="h-4 w-4 shrink-0" />
- <p className="text-sm truncate">
+ <p className="truncate text-sm">
  {currentUser?.name || currentUser?.email || "All Users..."}
  </p>
  </div>
@@ -86,14 +86,14 @@ export default function UserFilter() {
  query: finalQuery,
  });
  }}
- className="p-1 rounded-full hover:bg-gray-100 active:bg-gray-200 transition-all duration-75"
+ className="rounded-full p-1 transition-all duration-75 hover:bg-gray-100 active:bg-gray-200"
  >
  <X className="h-4 w-4" />
  </div>
  ) : (
  <ChevronDown
- className={`cursor-pointer w-5 h-5 text-gray-400 ${
- openPopover ? "transform rotate-180" : ""
+ className={`h-5 w-5 cursor-pointer text-gray-400 ${
+ openPopover ? "rotate-180 transform" : ""
  } transition-all duration-75`}
  />
  )}

components/app/links/no-links-placeholder.tsx

@@ -6,8 +6,8 @@ export default function NoLinksPlaceholder({
  AddEditLinkButton: () => JSX.Element;
 }) {
  return (
- <div className="border border-gray-200 rounded-md bg-white py-12 flex flex-col justify-center items-center">
- <h2 className="text-xl font-semibold text-gray-700 z-10">
+ <div className="flex flex-col items-center justify-center rounded-md border border-gray-200 bg-white py-12">
+ <h2 className="z-10 text-xl font-semibold text-gray-700">
  You don't have any links yet!
  </h2>
  <BlurImage