refactor(templates): remove React.FC usage from CLI landing page components

packages/create-next-stack/prod-assets/templates/LandingPage/components/Container.tsx

@@ -1,4 +1,4 @@
-import { ComponentProps, FC } from "react";
+import { ComponentProps } from "react";
 import { classNames } from "../utils/class-names";
 import styles from "./Container.module.css";
 
@@ -7,13 +7,13 @@ type ContainerProps = ComponentProps<"div"> & {
   center?: boolean;
 };
 
-export const Container: FC<ContainerProps> = ({
+export const Container = ({
   wide = false,
   center = false,
   className,
   children,
   ...props
-}) => {
+}: ContainerProps) => {
   return (
     <div
       className={classNames(
@@ -27,4 +27,4 @@ export const Container: FC<ContainerProps> = ({
       {children}
     </div>
   );
-};
+};

packages/create-next-stack/prod-assets/templates/LandingPage/components/InlineCode.tsx

@@ -1,12 +1,12 @@
-import { ComponentProps, FC } from "react";
+import { ComponentProps } from "react";
 import { classNames } from "../utils/class-names";
 import styles from "./InlineCode.module.css";
 
-export const InlineCode: FC<ComponentProps<"code">> = ({
+export const InlineCode = ({
   className,
   ...props
-}) => {
+}: ComponentProps<"code">) => {
   return (
     <code className={classNames(styles.inlineCode, className)} {...props} />
   );
-};
+};

packages/create-next-stack/prod-assets/templates/LandingPage/components/Link.tsx

@@ -1,8 +1,8 @@
-import React, { ComponentProps } from "react";
+import { ComponentProps } from "react";
 import { classNames } from "../utils/class-names";
 import styles from "./Link.module.css";
 
 type LinkProps = ComponentProps<"a">;
-export const Link: React.FC<LinkProps> = ({ className, ...restProps }) => {
+export const Link = ({ className, ...restProps }: LinkProps) => {
   return <a className={classNames(styles.link, className)} {...restProps} />;
-};
+};

packages/create-next-stack/prod-assets/templates/LandingPage/components/Paragraph.tsx

@@ -1,7 +1,7 @@
-import { ComponentProps, FC } from "react";
+import { ComponentProps } from "react";
 import { classNames } from "../utils/class-names";
 import styles from "./Paragraph.module.css";
 
-export const Paragraph: FC<ComponentProps<"p">> = ({ className, ...props }) => {
+export const Paragraph = ({ className, ...props }: ComponentProps<"p">) => {
   return <p className={classNames(styles.paragraph, className)} {...props} />;
-};
+};

packages/create-next-stack/prod-assets/templates/LandingPage/components/Section.tsx

@@ -1,15 +1,15 @@
-import { ComponentProps, FC } from "react";
+import { ComponentProps } from "react";
 import { classNames } from "../utils/class-names";
 import styles from "./Section.module.css";
 
-export const Section: FC<ComponentProps<"section">> = ({
+export const Section = ({
   className,
   children,
   ...props
-}) => {
+}: ComponentProps<"section">) => {
   return (
     <section className={classNames(styles.section, className)} {...props}>
       {children}
     </section>
   );
-};
+};

packages/create-next-stack/prod-assets/templates/LandingPage/components/Subtitle.tsx

@@ -1,7 +1,7 @@
-import { ComponentProps, FC } from "react";
+import { ComponentProps } from "react";
 import { classNames } from "../utils/class-names";
 import styles from "./Subtitle.module.css";
 
-export const Subtitle: FC<ComponentProps<"p">> = ({ className, ...props }) => {
+export const Subtitle = ({ className, ...props }: ComponentProps<"p">) => {
   return <p className={classNames(styles.subtitle, className)} {...props} />;
-};
+};

packages/create-next-stack/prod-assets/templates/LandingPage/components/TechnologyGrid.tsx

@@ -1,4 +1,3 @@
-import { FC } from "react";
 import { Technology } from "../technologies";
 import { classNames } from "../utils/class-names";
 import styles from "./TechnologyGrid.module.css";
@@ -8,15 +7,15 @@ type TechnologyGridProps = {
   technologies: Technology[];
   className: string;
 };
-export const TechnologyGrid: FC<TechnologyGridProps> = ({
+export const TechnologyGrid = ({
   technologies,
   className,
-}) => {
+}: TechnologyGridProps) => {
   return (
     <div className={classNames(styles.technologyGrid, className)}>
       {technologies.map((technology) => (
         <TechnologyGridItem key={technology.name} {...technology} />
       ))}
     </div>
   );
-};
+};

packages/create-next-stack/prod-assets/templates/LandingPage/components/TechnologyGridItem.tsx

@@ -1,4 +1,3 @@
-import { FC } from "react";
 import { H3 } from "./headings";
 import { Link } from "./Link";
 import { Paragraph } from "./Paragraph";
@@ -12,11 +11,11 @@ type TechnologyGridItemProps = {
     url: string;
   }>;
 };
-export const TechnologyGridItem: FC<TechnologyGridItemProps> = ({
+export const TechnologyGridItem = ({
   name,
   description,
   links,
-}) => {
+}: TechnologyGridItemProps) => {
   return (
     <div className={styles.technologyGridItem}>
       <H3>{name}</H3>
@@ -30,4 +29,4 @@ export const TechnologyGridItem: FC<TechnologyGridItemProps> = ({
       </div>
     </div>
   );
-};
+};

packages/create-next-stack/prod-assets/templates/LandingPage/components/headings.tsx

@@ -1,19 +1,19 @@
-import { ComponentProps, FC } from "react";
+import { ComponentProps } from "react";
 import { classNames } from "../utils/class-names";
 import styles from "./headings.module.css";
 
-export const H1: FC<ComponentProps<"h1">> = ({ className, ...props }) => {
+export const H1 = ({ className, ...props }: ComponentProps<"h1">) => {
   return <h1 className={classNames(styles.h1, className)} {...props} />;
 };
 
-export const H2: FC<ComponentProps<"h2">> = ({ className, ...props }) => {
+export const H2 = ({ className, ...props }: ComponentProps<"h2">) => {
   return <h2 className={classNames(styles.h2, className)} {...props} />;
 };
 
-export const H3: FC<ComponentProps<"h3">> = ({ className, ...props }) => {
+export const H3 = ({ className, ...props }: ComponentProps<"h3">) => {
   return <h3 className={classNames(styles.h3, className)} {...props} />;
 };
 
-export const H4: FC<ComponentProps<"h4">> = ({ className, ...props }) => {
+export const H4 = ({ className, ...props }: ComponentProps<"h4">) => {
   return <h4 className={classNames(styles.h4, className)} {...props} />;
-};
+};