chore: migrate from ESLint/Prettier to Oxc

packages/ui/src/Home/About/AboutDescription.tsx

@@ -8,7 +8,7 @@ export const AboutDescription: React.FC<AboutDescriptionProps> = () => {
   const t = useTranslations()
 
   return (
-    <div className="dark:text-gray-lighter my-6 max-w-md text-center text-black">
+    <div className="my-6 max-w-md text-center text-black dark:text-gray-lighter">
       <Typography as="p" variant="text1" className="my-6">
         {t.rich("home.about.description", {
           strong: (children) => {

packages/ui/src/Home/About/AboutList/AboutItem.tsx

@@ -9,10 +9,8 @@ export const AboutItem: React.FC<AboutItemProps> = (props) => {
 
   return (
     <li className="flex items-center justify-between sm:justify-start">
-      <strong className="w-24 text-sm text-black lg:w-32 dark:text-white">
-        {label}
-      </strong>
-      <span className="dark:text-gray-lighter block text-sm font-normal text-black">
+      <strong className="w-24 text-sm text-black lg:w-32 dark:text-white">{label}</strong>
+      <span className="block text-sm font-normal text-black dark:text-gray-lighter">
         {link != null ? (
           <a className="hover:underline" href={link}>
             {value}

packages/ui/src/Home/About/AboutList/AboutList.tsx

@@ -9,14 +9,8 @@ export const AboutList: React.FC<AboutListProps> = () => {
 
   return (
     <ul className="my-6 list-none space-y-3">
-      <AboutItem
-        label={t("home.about.pronouns.label")}
-        value={t("home.about.pronouns.value")}
-      />
-      <AboutItem
-        label={t("home.about.birth-date.label")}
-        value={<BirthDate />}
-      />
+      <AboutItem label={t("home.about.pronouns.label")} value={t("home.about.pronouns.value")} />
+      <AboutItem label={t("home.about.birth-date.label")} value={<BirthDate />} />
       <AboutItem
         label={t("home.about.nationality.label")}
         value={t("home.about.nationality.value")}

packages/ui/src/Home/About/AboutLogo.tsx

@@ -8,13 +8,7 @@ export const AboutLogo: React.FC<AboutLogoProps> = () => {
 
   return (
     <div className="max-h-[370px] max-w-[370px] px-2 py-6">
-      <Image
-        src="/images/logo.webp"
-        alt={t("meta.title")}
-        width={800}
-        height={800}
-        priority
-      />
+      <Image src="/images/logo.webp" alt={t("meta.title")} width={800} height={800} priority />
     </div>
   )
 }

packages/ui/src/Home/About/SocialMediaList/SocialMediaIcons/Icon.tsx

@@ -7,10 +7,7 @@ export const Icon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => {
     <svg
       xmlns="http://www.w3.org/2000/svg"
       viewBox="0 0 24 24"
-      className={classNames(
-        "size-8 fill-current text-black dark:text-white",
-        className,
-      )}
+      className={classNames("size-8 fill-current text-black dark:text-white", className)}
       {...rest}
     >
       {children}

packages/ui/src/Home/About/SocialMediaList/SocialMediaList.tsx

@@ -24,24 +24,15 @@ export const SocialMediaList: React.FC<SocialMediaListProps> = () => {
         <NPMIcon />
       </SocialMediaItem>
 
-      <SocialMediaItem
-        link="https://twitter.com/theoludwig_"
-        ariaLabel="X/Twitter"
-      >
+      <SocialMediaItem link="https://twitter.com/theoludwig_" ariaLabel="X/Twitter">
         <TwitterIcon />
       </SocialMediaItem>
 
-      <SocialMediaItem
-        link="https://www.youtube.com/@theo_ludwig"
-        ariaLabel="YouTube"
-      >
+      <SocialMediaItem link="https://www.youtube.com/@theo_ludwig" ariaLabel="YouTube">
         <YouTubeIcon />
       </SocialMediaItem>
 
-      <SocialMediaItem
-        link="https://www.twitch.tv/theoludwig"
-        ariaLabel="Twitch"
-      >
+      <SocialMediaItem link="https://www.twitch.tv/theoludwig" ariaLabel="Twitch">
         <TwitchIcon />
       </SocialMediaItem>
 

packages/ui/src/Home/Interests/InterestItem.tsx

@@ -14,11 +14,7 @@ export const InterestItem: React.FC<InterestItemProps> = (props) => {
         {title}
       </Typography>
 
-      <Typography
-        as="p"
-        variant="text1"
-        className="dark:text-gray-lighter my-2 text-black"
-      >
+      <Typography as="p" variant="text1" className="my-2 text-black dark:text-gray-lighter">
         {description}
       </Typography>
     </div>

packages/ui/src/Home/Interests/Interests.tsx

@@ -2,11 +2,7 @@ import { GIT_REPO_LINK } from "@repo/utils/constants"
 import { useTranslations } from "next-intl"
 import { FaGit, FaMicrochip } from "react-icons/fa"
 import { Link } from "../../Design/Link/Link.tsx"
-import {
-  Section,
-  SectionContent,
-  SectionTitle,
-} from "../../Layout/Section/Section.tsx"
+import { Section, SectionContent, SectionTitle } from "../../Layout/Section/Section.tsx"
 import { InterestItem } from "./InterestItem.tsx"
 
 export interface InterestsProps {}
@@ -59,13 +55,7 @@ export const Interests: React.FC<InterestsProps> = () => {
       <SectionContent shadowContainer>
         <div className="max-w-full">
           {items.map((item) => {
-            return (
-              <InterestItem
-                key={item.id}
-                title={item.title}
-                description={item.description}
-              />
-            )
+            return <InterestItem key={item.id} title={item.title} description={item.description} />
           })}
         </div>
 
@@ -74,7 +64,7 @@ export const Interests: React.FC<InterestsProps> = () => {
             {items.map((item) => {
               return (
                 <li className="m-2 size-8" key={item.id} title={item.title}>
-                  <item.Icon className="text-primary dark:text-primary-dark block size-full" />
+                  <item.Icon className="block size-full text-primary dark:text-primary-dark" />
                 </li>
               )
             })}

packages/ui/src/Home/OpenSource/OpenSource.tsx

@@ -1,9 +1,5 @@
 import { useTranslations } from "next-intl"
-import {
-  Section,
-  SectionDescription,
-  SectionTitle,
-} from "../../Layout/Section/Section.tsx"
+import { Section, SectionDescription, SectionTitle } from "../../Layout/Section/Section.tsx"
 import { Repository } from "./Repository.tsx"
 
 export interface OpenSourceProps {}
@@ -14,9 +10,7 @@ export const OpenSource: React.FC<OpenSourceProps> = () => {
   return (
     <Section verticalSpacing horizontalSpacing id="open-source">
       <SectionTitle>{t("home.open-source.title")}</SectionTitle>
-      <SectionDescription>
-        {t("home.open-source.description")}
-      </SectionDescription>
+      <SectionDescription>{t("home.open-source.description")}</SectionDescription>
 
       <div className="flex max-w-full flex-col items-center">
         <ul className="grid list-none grid-cols-1 gap-6 md:w-10/12 md:grid-cols-2">

packages/ui/src/Home/OpenSource/Repository.tsx

@@ -20,9 +20,7 @@ export const Repository: React.FC<RepositoryProps> = (props) => {
         >
           <Typography as="h3" variant="text1" className="flex items-center">
             <GitHubIcon className="mr-2 h-6" />
-            <span className="text-primary dark:text-primary-dark font-semibold">
-              {name}
-            </span>
+            <span className="font-semibold text-primary dark:text-primary-dark">{name}</span>
           </Typography>
           <p className="mt-4">{description}</p>
         </SectionContent>

packages/ui/src/Home/Portfolio/PortfolioItem.tsx

@@ -26,10 +26,7 @@ export const PortfolioItem: React.FC<PortfolioItemProps> = (props) => {
         href={link}
         aria-label={title}
       >
-        <SectionContent
-          className="relative cursor-pointer items-center p-0 sm:p-0"
-          shadowContainer
-        >
+        <SectionContent className="relative cursor-pointer items-center p-0 sm:p-0" shadowContainer>
           <div className="flex justify-center">
             <Image
               className="size-[300px] rounded-xl transition-opacity duration-500 group-hover:opacity-15 dark:group-hover:opacity-5"