feat(packages/ui):make components dynamic

packages/ui/components/index.ts

@@ -21,3 +21,4 @@ export * from "./checkbox";
 export * from "./toaster";
 export * from "./card";
 export * from "./form";
+export * from "./typography";

packages/ui/components/typography/blockquote.tsx

@@ -0,0 +1,5 @@
+import { PropsWithChildren } from "react";
+
+export function TypographyBlockquote(props: PropsWithChildren) {
+  return <blockquote className="mt-6 border-l-2 pl-6 italic">{props.children}</blockquote>;
+}

packages/ui/components/typography/h1.tsx

@@ -0,0 +1,9 @@
+import { PropsWithChildren } from "react";
+
+export function TypographyH1(props: PropsWithChildren) {
+  return (
+    <h1 className="scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl">
+      {props.children}
+    </h1>
+  );
+}

packages/ui/typography/h2.tsx → packages/ui/components/typography/h2.tsx

@@ -1,7 +1,9 @@
-export function TypographyH2() {
+import { PropsWithChildren } from "react";
+
+export function TypographyH2(props: PropsWithChildren) {
   return (
     <h2 className="scroll-m-20 border-b pb-2 text-3xl font-semibold tracking-tight transition-colors first:mt-0">
-      The People of the Kingdom
+      {props.children}
     </h2>
   );
 }

packages/ui/components/typography/h3.tsx

@@ -0,0 +1,5 @@
+import { PropsWithChildren } from "react";
+
+export function TypographyH3(props: PropsWithChildren) {
+  return <h3 className="scroll-m-20 text-2xl font-semibold tracking-tight">{props.children}</h3>;
+}

packages/ui/components/typography/h4.tsx

@@ -0,0 +1,5 @@
+import { PropsWithChildren } from "react";
+
+export function TypographyH4(props: PropsWithChildren) {
+  return <h4 className="scroll-m-20 text-xl font-semibold tracking-tight">{props.children}</h4>;
+}

packages/ui/components/typography/index.ts

@@ -0,0 +1,12 @@
+export * from "./h1";
+export * from "./h2";
+export * from "./h3";
+export * from "./h4";
+export * from "./inline-code";
+export * from "./large";
+export * from "./lead";
+export * from "./list";
+export * from "./muted";
+export * from "./p";
+export * from "./small";
+export * from "./blockquote";

packages/ui/typography/Inline-code.tsx → packages/ui/components/typography/inline-code.tsx

@@ -1,7 +1,9 @@
-export function TypographyInlineCode() {
+import { PropsWithChildren } from "react";
+
+export function TypographyInlineCode(props: PropsWithChildren) {
   return (
     <code className="bg-muted relative rounded px-[0.3rem] py-[0.2rem] font-mono text-sm font-semibold">
-      @radix-ui/react-alert-dialog
+      {props.children}
     </code>
   );
 }

packages/ui/components/typography/large.tsx

@@ -0,0 +1,5 @@
+import { PropsWithChildren } from "react";
+
+export function TypographyLarge(props: PropsWithChildren) {
+  return <div className="text-lg font-semibold">{props.children}</div>;
+}

packages/ui/components/typography/lead.tsx

@@ -0,0 +1,5 @@
+import { PropsWithChildren } from "react";
+
+export function TypographyLead(props: PropsWithChildren) {
+  return <p className="text-muted-foreground text-xl">{props.children}</p>;
+}

packages/ui/components/typography/list.tsx

@@ -0,0 +1,11 @@
+import { PropsWithChildren } from "react";
+
+export function TypographyList(props: PropsWithChildren) {
+  return (
+    <ul className="my-6 ml-6 list-disc [&>li]:mt-2">
+      <li>{props.children}</li>
+      <li>{props.children}</li>
+      <li>{props.children}</li>
+    </ul>
+  );
+}

packages/ui/components/typography/muted.tsx

@@ -0,0 +1,5 @@
+import { PropsWithChildren } from "react";
+
+export function TypographyMuted(props: PropsWithChildren) {
+  return <p className="text-muted-foreground text-sm">{props.children}</p>;
+}

packages/ui/components/typography/p.tsx

@@ -0,0 +1,5 @@
+import { PropsWithChildren } from "react";
+
+export function TypographyP(props: PropsWithChildren) {
+  return <p className="leading-7 [&:not(:first-child)]:mt-6">{props.children}</p>;
+}

packages/ui/components/typography/small.tsx

@@ -0,0 +1,5 @@
+import { PropsWithChildren } from "react";
+
+export function TypographySmall(props: PropsWithChildren) {
+  return <small className="text-sm font-medium leading-none">{props.children}</small>;
+}