ronantakizawa/codereview-bench huggingface dataset:
Repository: srbhr/Resume-Matcher
File: webapp/app/_components/footer/footer.tsx (TypeScript)

Code before:
            <div className="p-2 rounded-xl hover:p-2 hover:bg-[#44365F] transition duration-300">
              <Image
                className="hover:bg-[#44365F]"
                src="/icons/productHunt-light.svg"
                width={20}
                height={20}
                alt="GitHub Octocat Logo"
              />{" "}
            </div>
          </a>
          <a
            href="https://github.com/srbhr/Resume-Matcher"
            title="Github"
            target="_blank"
            rel="noopener noreferrer"
          >
            <div className="p-2 rounded-xl hover:p-2 hover:bg-[#44365F] transition duration-300">
              <Image
                className="hover:bg-[#44365F]"
                src="/icons/github-light.svg"
                width={20}
                height={20}
                alt="GitHub Octocat Logo"
              />
            </div>
          </a>
        </div>
      </div>
    </section>
  );
};
export default Footer;


Review comment (suggestion):
1. In a previous [comment](https://github.com/srbhr/Resume-Matcher/pull/212#discussion_r1375309401), I suggested that the `<div>` wrapper was redundant, as we can simply apply the styles on the `<a>` instead.

As a bonus this would cut down the size of the rendered DOM tree,  and keep the DOM (and React component) lean.

```suggestion
          <a
            className="p-2 rounded-xl hover:p-2 hover:bg-[#44365F] transition duration-300"
            href="https://github.com/srbhr/Resume-Matcher"
            title="Github"
            target="_blank"
            rel="noopener noreferrer"
          >
            <Image
              className="hover:bg-[#44365F]"
              src="/icons/github-light.svg"
              width={20}
              height={20}
              alt="GitHub Octocat Logo"
            />
          </a>
```

Code after:
            width={20}
            height={20}
            alt="Product Hunt Logo"
          />
        </a>
        <a
          className="p-2 rounded-xl hover:p-2 hover:bg-[#44365F] transition duration-300"
          href="https://github.com/srbhr/Resume-Matcher"
          title="GitHub"
          target="_blank"
          rel="noopener noreferrer"
        >
          <Image
            className="hover:bg-[#44365F]"
            src="/icons/github-light.svg"
            width={20}
            height={20}
            alt="GitHub Logo"
          />
        </a>
      </div>
    </section>
  );
};
export default Footer;
Repository: srbhr/Resume-Matcher
File: webapp/app/_components/footer/footer.tsx (TypeScript)

Code before:
          href="https://discord.com/invite/t3Y9HEuV34"
          title="Discord Logo"
          target="_blank"
          rel="noopener noreferrer"
        >
          <Image
            className="hover:bg-[#44365F]"
            src="/icons/discord-light.svg"
            width={20}
            height={20}
            alt="Discord Logo"
          />
        </a>
        <a
          className="p-2 rounded-xl hover:p-2 hover:bg-[#44365F] transition duration-300"
          href="https://www.producthunt.com/posts/resume-matcher"
          title="Producthunt Logo"
          target="_blank"
          rel="noopener noreferrer"
        >
          <Image
            className="hover:bg-[#44365F]"
            src="/icons/productHunt-light.svg"
            width={20}
            height={20}
            alt="Producthunt Logo"
          />
        </a>
        <a
          className="p-2 rounded-xl hover:p-2 hover:bg-[#44365F] transition duration-300"
          href="https://github.com/srbhr/Resume-Matcher"
          title="Github Logo"
          target="_blank"
          rel="noopener noreferrer"
        >
          <Image
            className="hover:bg-[#44365F]"
            src="/icons/github-light.svg"
            width={20}
            height={20}
            alt="GitHub Logo"
          />
        </a>
      </div>
    </section>
  );
};
export default Footer;


Review comment (suggestion):
Correction: The mispeling of `Producthunt` should be corrected to `Product Hunt` in the suggestion below.

```suggestion
            alt="Product Hunt Logo"
```

Code after:
          href="https://discord.com/invite/t3Y9HEuV34"
          title="Discord"
          target="_blank"
          rel="noopener noreferrer"
        >
          <Image
            className="hover:bg-[#44365F]"
            src="/icons/discord-light.svg"
            width={20}
            height={20}
            alt="Discord Logo"
          />
        </a>
        <a
          className="p-2 rounded-xl hover:p-2 hover:bg-[#44365F] transition duration-300"
          href="https://www.producthunt.com/posts/resume-matcher"
          title="Product Hunt"
          rel="noopener noreferrer"
        >
          <Image
            className="hover:bg-[#44365F]"
            src="/icons/productHunt-light.svg"
            width={20}
            height={20}
            alt="Product Hunt Logo"
          />
        </a>
        <a
          className="p-2 rounded-xl hover:p-2 hover:bg-[#44365F] transition duration-300"
          href="https://github.com/srbhr/Resume-Matcher"
          title="GitHub"
          target="_blank"
          rel="noopener noreferrer"
        >
          <Image
            className="hover:bg-[#44365F]"
            src="/icons/github-light.svg"
            width={20}
            height={20}
            alt="GitHub Logo"
          />
        </a>
      </div>
    </section>
  );
};
export default Footer;
Repository: srbhr/Resume-Matcher
File: webapp/app/_components/footer/footer.tsx (TypeScript)

Code before:
            className="hover:bg-[#44365F]"
            src="/icons/discord-light.svg"
            width={20}
            height={20}
            alt="Discord Logo"
          />
        </a>
        <a
          className="p-2 rounded-xl hover:p-2 hover:bg-[#44365F] transition duration-300"
          href="https://www.producthunt.com/posts/resume-matcher"
          title="Producthunt Logo"
          target="_blank"
          rel="noopener noreferrer"
        >
          <Image
            className="hover:bg-[#44365F]"
            src="/icons/productHunt-light.svg"
            width={20}
            height={20}
            alt="Producthunt Logo"
          />
        </a>
        <a
          className="p-2 rounded-xl hover:p-2 hover:bg-[#44365F] transition duration-300"
          href="https://github.com/srbhr/Resume-Matcher"
          title="Github Logo"
          target="_blank"
          rel="noopener noreferrer"
        >
          <Image
            className="hover:bg-[#44365F]"
            src="/icons/github-light.svg"
            width={20}
            height={20}
            alt="GitHub Logo"
          />
        </a>
      </div>
    </section>
  );
};
export default Footer;


Review comment (suggestion):
Minor accessibility improvement: The `title` attribute of the `<a>`  should describe the link itself rather than the image. Also the image already has the `alt` attribute value applied that describes the underlying icon image.

```suggestion
          title="GitHub"
```

💡 Also note, the spelling correction from `Github Logo` to `GitHub Logo` with the capitalised `H`.

Code after:
            className="hover:bg-[#44365F]"
            src="/icons/discord-light.svg"
            width={20}
            height={20}
            alt="Discord Logo"
          />
        </a>
        <a
          className="p-2 rounded-xl hover:p-2 hover:bg-[#44365F] transition duration-300"
          href="https://www.producthunt.com/posts/resume-matcher"
          title="Product Hunt"
          rel="noopener noreferrer"
        >
          <Image
            className="hover:bg-[#44365F]"
            src="/icons/productHunt-light.svg"
            width={20}
            height={20}
            alt="Product Hunt Logo"
          />
        </a>
        <a
          className="p-2 rounded-xl hover:p-2 hover:bg-[#44365F] transition duration-300"
          href="https://github.com/srbhr/Resume-Matcher"
          title="GitHub"
          target="_blank"
          rel="noopener noreferrer"
        >
          <Image
            className="hover:bg-[#44365F]"
            src="/icons/github-light.svg"
            width={20}
            height={20}
            alt="GitHub Logo"
          />
        </a>
      </div>
    </section>
  );
};
export default Footer;
Repository: srbhr/Resume-Matcher
File: apps/frontend/app/layout.tsx (TypeScript)

Code before:
import type { Metadata } from 'next';
import { Geist, Space_Grotesk } from 'next/font/google';

const spaceGrotesk = Space_Grotesk({
  variable: '--font-space-grotesk',
  subsets: ['latin'],
});

const geist = Geist({
  variable: '--font-geist',
  subsets: ['latin'],
});

export const metadata: Metadata = {
  title: 'Resume Matcher',
  description: 'Build your resume with Resume Matcher',
  applicationName: 'Resume Matcher',
  keywords: ['resume', 'matcher', 'job', 'application'],
};

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en-US">
      <body
        className={`${geist.variable} ${spaceGrotesk.variable} antialiased bg-white text-gray-900`}
      >
        <div>{children}</div>
      </body>

Review comment (suggestion):
> import './css/globals.css';

`import './(default)/css/globals.css';`

These changes are required to fix above error

Code after:
import type { Metadata } from 'next';
import { Geist, Space_Grotesk } from 'next/font/google';
import './(default)/css/globals.css';

const spaceGrotesk = Space_Grotesk({
  variable: '--font-space-grotesk',
  subsets: ['latin'],
  display: 'swap',
});

const geist = Geist({
  variable: '--font-geist',
  subsets: ['latin'],
  display: 'swap',
});

export const metadata: Metadata = {
  title: 'Resume Matcher',
  description: 'Build your resume with Resume Matcher',
  applicationName: 'Resume Matcher',
  keywords: ['resume', 'matcher', 'job', 'application'],
};

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en-US">
      <body
        className={`${geist.variable} ${spaceGrotesk.variable} antialiased bg-white text-gray-900`}
Repository: srbhr/Resume-Matcher
File: apps/frontend/app/layout.tsx (TypeScript)

Code before:
import type { Metadata } from 'next';
import { Geist, Space_Grotesk } from 'next/font/google';

const spaceGrotesk = Space_Grotesk({
  variable: '--font-space-grotesk',
  subsets: ['latin'],
});

const geist = Geist({
  variable: '--font-geist',
  subsets: ['latin'],
});

export const metadata: Metadata = {
  title: 'Resume Matcher',
  description: 'Build your resume with Resume Matcher',
  applicationName: 'Resume Matcher',
  keywords: ['resume', 'matcher', 'job', 'application'],
};

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en-US">
      <body
        className={`${geist.variable} ${spaceGrotesk.variable} antialiased bg-white text-gray-900`}
      >
        <div>{children}</div>
      </body>
    </html>
  );
}


Review comment (suggestion):
```suggestion
  variable: '--font-space-grotesk',
  subsets: ['latin'],
  display: 'swap',
```

Code after:
import type { Metadata } from 'next';
import { Geist, Space_Grotesk } from 'next/font/google';
import './(default)/css/globals.css';

const spaceGrotesk = Space_Grotesk({
  variable: '--font-space-grotesk',
  subsets: ['latin'],
  display: 'swap',
});

const geist = Geist({
  variable: '--font-geist',
  subsets: ['latin'],
  display: 'swap',
});

export const metadata: Metadata = {
  title: 'Resume Matcher',
  description: 'Build your resume with Resume Matcher',
  applicationName: 'Resume Matcher',
  keywords: ['resume', 'matcher', 'job', 'application'],
};

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en-US">
      <body
        className={`${geist.variable} ${spaceGrotesk.variable} antialiased bg-white text-gray-900`}
      >
        <div>{children}</div>
      </body>
    </html>
Repository: srbhr/Resume-Matcher
File: apps/frontend/app/layout.tsx (TypeScript)

Code before:
import type { Metadata } from 'next';
import { Geist, Space_Grotesk } from 'next/font/google';

const spaceGrotesk = Space_Grotesk({
  variable: '--font-space-grotesk',
  subsets: ['latin'],
});

const geist = Geist({
  variable: '--font-geist',
  subsets: ['latin'],
});

export const metadata: Metadata = {
  title: 'Resume Matcher',
  description: 'Build your resume with Resume Matcher',
  applicationName: 'Resume Matcher',
  keywords: ['resume', 'matcher', 'job', 'application'],
};

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en-US">
      <body
        className={`${geist.variable} ${spaceGrotesk.variable} antialiased bg-white text-gray-900`}
      >
        <div>{children}</div>
      </body>
    </html>
  );
}


Review comment (suggestion):
```suggestion
  variable: '--font-geist',
  subsets: ['latin'],
  display: 'swap',
```

Code after:
import type { Metadata } from 'next';
import { Geist, Space_Grotesk } from 'next/font/google';
import './(default)/css/globals.css';

const spaceGrotesk = Space_Grotesk({
  variable: '--font-space-grotesk',
  subsets: ['latin'],
  display: 'swap',
});

const geist = Geist({
  variable: '--font-geist',
  subsets: ['latin'],
  display: 'swap',
});

export const metadata: Metadata = {
  title: 'Resume Matcher',
  description: 'Build your resume with Resume Matcher',
  applicationName: 'Resume Matcher',
  keywords: ['resume', 'matcher', 'job', 'application'],
};

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en-US">
      <body
        className={`${geist.variable} ${spaceGrotesk.variable} antialiased bg-white text-gray-900`}
      >
        <div>{children}</div>
      </body>
    </html>
  );
}
Repository: srbhr/Resume-Matcher
File: apps/frontend/app/layout.tsx (TypeScript)

Code before:
import type { Metadata } from 'next';
import { Geist, Space_Grotesk } from 'next/font/google';

const spaceGrotesk = Space_Grotesk({
  variable: '--font-space-grotesk',
  subsets: ['latin'],
});

const geist = Geist({
  variable: '--font-geist',
  subsets: ['latin'],
});

export const metadata: Metadata = {
  title: 'Resume Matcher',
  description: 'Build your resume with Resume Matcher',
  applicationName: 'Resume Matcher',
  keywords: ['resume', 'matcher', 'job', 'application'],
};

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en-US">
      <body
        className={`${geist.variable} ${spaceGrotesk.variable} antialiased bg-white text-gray-900`}
      >

Review comment (suggestion):
There's one error that occurred
<img width="1062" alt="Screenshot 2025-05-30 at 10 08 11 PM" src="https://github.com/user-attachments/assets/4ac99d98-6148-427e-bd50-9523f097f9d5" />


To fix those please update [`apps/frontend/app/(default)/layout.tsx`](https://github.com/srbhr/Resume-Matcher/blob/main/apps/frontend/app/(default)/layout.tsx) with below code.

```typescript
import { ResumePreviewProvider } from '@/components/common/resume_previewer_context';

export default function DefaultLayout({ children }: { children: React.ReactNode }) {
	return (
		<ResumePreviewProvider>
			<main className="min-h-screen flex flex-col">
				{children}
			</main>
		</ResumePreviewProvider>
	);
}
```

Code after:
import type { Metadata } from 'next';
import { Geist, Space_Grotesk } from 'next/font/google';
import './(default)/css/globals.css';

const spaceGrotesk = Space_Grotesk({
  variable: '--font-space-grotesk',
  subsets: ['latin'],
  display: 'swap',
});

const geist = Geist({
  variable: '--font-geist',
  subsets: ['latin'],
  display: 'swap',
});

export const metadata: Metadata = {
  title: 'Resume Matcher',
  description: 'Build your resume with Resume Matcher',
  applicationName: 'Resume Matcher',
  keywords: ['resume', 'matcher', 'job', 'application'],
};

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en-US">
Repository: srbhr/Resume-Matcher
File: apps/frontend/app/(default)/layout.tsx (TypeScript)

Code before:
import './css/globals.css';
import type { Metadata } from 'next';
import { Geist, Space_Grotesk } from 'next/font/google';
import { ResumePreviewProvider } from '@/components/common/resume_previewer_context';

// Load Google fonts with optimal settings
const spaceGrotesk = Space_Grotesk({
  variable: '--font-space-grotesk',
  subsets: ['latin'],
  display: 'swap',
});
const geist = Geist({
  variable: '--font-geist',
  subsets: ['latin'],
  display: 'swap',
});

export const metadata: Metadata = {
  title: 'Resume Matcher',
  description: 'Build your resume with Resume Matcher',
  applicationName: 'Resume Matcher',
  keywords: ['resume', 'matcher', 'job', 'application'],
};

export default function DefaultLayout({ children }: { children: React.ReactNode }) {
  return (
    <ResumePreviewProvider>
      <main className="min-h-screen flex flex-col">{children}</main>
    </ResumePreviewProvider>
  );
}


Review comment (suggestion):
@SoorajSNBlaze333 could you please replace the complete code in the file with the below code because this code is already present in the outer layout?

```typescript
import { ResumePreviewProvider } from '@/components/common/resume_previewer_context';

export default function DefaultLayout({ children }: { children: React.ReactNode }) {
	return (
		<ResumePreviewProvider>
			<main className="min-h-screen flex flex-col">
				{children}
			</main>
		</ResumePreviewProvider>
	);
}
```

Code after:
import { ResumePreviewProvider } from '@/components/common/resume_previewer_context';

export default function DefaultLayout({ children }: { children: React.ReactNode }) {
  return (
    <ResumePreviewProvider>
      <main className="min-h-screen flex flex-col">{children}</main>
    </ResumePreviewProvider>
  );
}
Repository: sst/opentui
File: packages/core/src/Renderable.ts (TypeScript)

Code before:

export function isDimensionType(value: any): value is number | "auto" | `${number}%` {
  return isPositionType(value)
}

export function isFlexBasisType(value: any): value is number | "auto" | undefined {
  if (value === undefined || value === "auto") {
    return true
  }
  if (typeof value === "number" && !Number.isNaN(value)) {
    return true
  }
  return false
}

export function isSizeType(value: any): value is number | `${number}%` | undefined {
  if (value === undefined) {
    return true
  }
  if (typeof value === "number" && !Number.isNaN(value)) {
    return true
  }
  return isValidPercentage(value)
}

export function isGapType(value: any): value is number | undefined {
  if (value === undefined) {
    return true
  }
  if (typeof value === "number" && !Number.isNaN(value)) {
    return true
  }
  return isValidPercentage(value)
}

export abstract class Renderable extends EventEmitter {
  private static renderableNumber = 1
  static renderablesByNumber: Map<number, Renderable> = new Map()

  public readonly id: string
  public readonly num: number
  protected _ctx: RenderContext
  private _x: number = 0
  private _y: number = 0
  protected _width: number | "auto" | `${number}%`
  protected _height: number | "auto" | `${number}%`
  protected _widthValue: number = 0
  protected _heightValue: number = 0
  private _zIndex: number
  protected _visible: boolean
  public selectable: boolean = false

Review comment (suggestion):
❓ this is a direct clone of `isSizeType` but didn't know if we wanted to be explicit in it's usage

Code after:
}

export function isPostionTypeType(value: any): value is PositionTypeString {
  return value === "relative" || value === "absolute"
}

export function isDimensionType(value: any): value is number | "auto" | `${number}%` {
  return isPositionType(value)
}

export function isFlexBasisType(value: any): value is number | "auto" | undefined {
  if (value === undefined || value === "auto") {
    return true
  }
  if (typeof value === "number" && !Number.isNaN(value)) {
    return true
  }
  return false
}

export function isSizeType(value: any): value is number | `${number}%` | undefined {
  if (value === undefined) {
    return true
  }
  if (typeof value === "number" && !Number.isNaN(value)) {
    return true
  }
  return isValidPercentage(value)
}

export abstract class Renderable extends EventEmitter {
  private static renderableNumber = 1
  static renderablesByNumber: Map<number, Renderable> = new Map()

  public readonly id: string
  public readonly num: number
  protected _ctx: RenderContext
  private _x: number = 0
  private _y: number = 0
  protected _width: number | "auto" | `${number}%`
  protected _height: number | "auto" | `${number}%`
  protected _widthValue: number = 0
  protected _heightValue: number = 0
  private _zIndex: number
  protected _visible: boolean
  public selectable: boolean = false
  protected buffered: boolean
  protected frameBuffer: OptimizedBuffer | null = null
  private _dirty: boolean = false

  protected focusable: boolean = false
Repository: sst/opentui
File: packages/solid/src/elements/hooks.ts (TypeScript)

Code before:
  onMount(() => {
    renderer.on("resize", callback)
  })

  onCleanup(() => {
    renderer.off("resize", callback)
  })
}

export const useTerminalDimensions = () => {
  const renderer = useRenderer()
  const [terminalDimensions, setTerminalDimensions] = createSignal<{
    width: number
    height: number
  }>({ width: renderer.width, height: renderer.height })

  const callback = (width: number, height: number) => {
    setTerminalDimensions({ width, height })
  }

  onResize(callback)

  return terminalDimensions
}

export const useKeyboard = (callback: (key: ParsedKey) => void) => {
  const keyHandler = getKeyHandler()
  onMount(() => {
    keyHandler.on("keypress", callback)
  })

  onCleanup(() => {
    keyHandler.off("keypress", callback)
  })
}

export const useSelectionHandler = (callback: (selection: Selection) => void) => {
  const renderer = useRenderer()

  onMount(() => {
    renderer.on("selection", callback)
  })

  onCleanup(() => {
    renderer.off("selection", callback)
  })
}

export const createComponentTimeline = (options: TimelineOptions = {}): Timeline => {
  const renderer = useRenderer()
  const timeline = new Timeline(options)

Review comment (suggestion):
⚠️  this will be a breaking change for consumers (_even though alpha_) so might be a good idea to document this and/or export both for now (_one aliased and mark `useKeyHandler` as deprecated_)

Code after:
  onMount(() => {
    renderer.on("resize", callback)
  })

  onCleanup(() => {
    renderer.off("resize", callback)
  })
}

export const useTerminalDimensions = () => {
  const renderer = useRenderer()
  const [terminalDimensions, setTerminalDimensions] = createSignal<{
    width: number
    height: number
  }>({ width: renderer.width, height: renderer.height })

  const callback = (width: number, height: number) => {
    setTerminalDimensions({ width, height })
  }

  onResize(callback)

  return terminalDimensions
}

export const useKeyboard = (callback: (key: ParsedKey) => void) => {
  const keyHandler = getKeyHandler()
  onMount(() => {
    keyHandler.on("keypress", callback)
  })

  onCleanup(() => {
    keyHandler.off("keypress", callback)
  })
}

/**
 * @deprecated renamed to useKeyboard
 */
export const useKeyHandler = useKeyboard

export const useSelectionHandler = (callback: (selection: Selection) => void) => {
  const renderer = useRenderer()

  onMount(() => {
    renderer.on("selection", callback)
  })

  onCleanup(() => {
    renderer.off("selection", callback)
  })