fix: types and strictness

src/components/Heading.tsx

@@ -1,4 +1,4 @@
-import { HTMLAttributes } from 'react';
+import type { HTMLAttributes } from 'react';
 
 import clsxm from '@utils/clsxm';
 
@@ -17,7 +17,7 @@ export const Heading: React.FC<HeadingProps> = ({
   ...props
 }) => {
   // Use the 'as' prop to dynamically determine the component type
-  const Component = as || 'h2';
+  const Component = as ?? 'h2';
 
   let headingClasses = '';
   switch (Component) {

src/components/Layouts/DefaultLayout.tsx

@@ -4,7 +4,9 @@ import MDXProviderWrapper from '../../utils/MDXProviderWrapper';
 import Footer from '../footer';
 import { PolitePop } from '../PolitePop';
 
-const DefaultLayout = ({ children }) => {
+const DefaultLayout: React.FC<{ children?: React.ReactNode }> = ({
+  children,
+}) => {
   return (
     <MDXProviderWrapper>
       <div className="absolute top-[-5px] z-[100] h-6 w-full bg-pink-400" />

src/components/Post/TableOfContents.tsx

@@ -12,7 +12,7 @@ type TableOfContentsProps = {
 // This is a tweaked version of Alex Khomenko's useHighlighted hook.
 // Shout out to Alex for the great starting point!
 // https://claritydev.net/blog/nextjs-blog-remark-interactive-table-of-contents
-function useHighlighted(id) {
+function useHighlighted(id: string) {
   const observer = useRef<IntersectionObserver>();
   const [activeId, setActiveId] = useState('');
 

src/components/soldOut.tsx

@@ -1,9 +1,50 @@
-import * as classes from '../styles/soldout.module.scss';
+const soldOut = () => {
+  return (
+    <>
+      <style jsx>{`
+        .soldout {
+          border: 5px solid #ff3333;
+          color: white;
+          border-radius: 14px;
+          padding: 1rem;
+          margin: 0 auto;
+          transform: rotate(10deg);
+          background: rgba(255, 30, 30, 0.9);
+          width: 70%;
+          height: 30%;
+          bottom: 25%;
+          left: 15%;
+          display: flex;
+          align-self: center;
+          align-items: center;
+          justify-content: center;
+          position: absolute;
+          z-index: 1;
+          font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
+          font-size: 36px;
 
-const soldOut = () => (
-  <figure className={classes['sold-out'] as string}>
-    <div>Sold Out!</div>
-  </figure>
-);
+          &:hover {
+            & > div::after {
+              content: '(Sorry)';
+              font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;
+              font-weight: 500;
+              font-size: 9pt;
+              display: block;
+              text-align: center;
+              text-decoration: none;
+              position: absolute;
+              transform: rotate(-90deg);
+              left: 74%;
+              top: 41%;
+            }
+          }
+        }
+      `}</style>
+      <figure className="soldout">
+        <div>Sold Out!</div>
+      </figure>
+    </>
+  );
+};
 
 export default soldOut;

src/utils/MDXProviderWrapper.tsx

@@ -1,15 +1,15 @@
-import React, { Children, type AnchorHTMLAttributes } from 'react';
+import React, { Children } from 'react';
 import type {
+  AnchorHTMLAttributes,
   ButtonHTMLAttributes,
   HTMLAttributes,
-  HtmlHTMLAttributes,
   HTMLProps,
   ReactElement,
 } from 'react';
 import Link from 'next/link';
 import Script from 'next/script';
 import { MDXProvider } from '@mdx-js/react';
-import { MDXComponents } from 'mdx/types';
+import type { MDXComponents } from 'mdx/types';
 import { Highlight, themes } from 'prism-react-renderer';
 
 import clsxm from '@utils/clsxm';
@@ -83,10 +83,6 @@ const P: React.FC<HTMLAttributes<HTMLParagraphElement>> = (props) => (
   <p className="my-2 text-xl" {...props} />
 );
 
-type BaseMdxComponentProps = {
-  children: React.ReactNode;
-};
-
 const Blockquote: React.FC<HTMLAttributes<HTMLQuoteElement>> = ({
   children,
 }) => {
@@ -97,9 +93,7 @@ const Blockquote: React.FC<HTMLAttributes<HTMLQuoteElement>> = ({
   );
 };
 
-interface CustomLinkProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
-  // custom props here if needed
-}
+type CustomLinkProps = AnchorHTMLAttributes<HTMLAnchorElement>;
 
 const CustomLink: React.FC<CustomLinkProps> = ({ children, ...props }) => {
   return <a {...props}>{children}</a>;

src/utils/resend/subscribeToMailingList.ts

@@ -0,0 +1,20 @@
+'use server';
+
+type MailingListSubscriber = {
+  email: string;
+  name?: string;
+  details: unknown;
+};
+
+const subscribeToMailingList = ({
+  email,
+  name,
+  details,
+}: MailingListSubscriber) => {
+  console.log('Subscribing to mailing list...');
+  console.log('Email:', email);
+  console.log('Name:', name);
+  console.log('Details:', details);
+};
+
+export default subscribeToMailingList;