buttons

src/components/NewPostWidget.tsx

@@ -1,7 +1,6 @@
 import { useState } from 'react'
-import FancyTextEditor, { TextInputKeyDownEvent } from './FancyTextEditor.tsx'
-import PrimaryButton from './PrimaryButton.tsx'
-import SecondaryButton from './SecondaryButton.tsx'
+import FancyTextEditor, { TextInputKeyDownEvent } from './inputs/FancyTextEditor.tsx'
+import Button from './buttons/Button.tsx'
 import { openFileDialog } from '../utils/openFileDialog.ts'
 
 interface NewPostWidgetProps {
@@ -86,13 +85,15 @@ export default function NewPostWidget({ onSubmit, isSubmitting = false }: NewPos
       )}
 
       <div className="flex justify-between items-center pt-2">
-        <SecondaryButton onClick={onAddMediaClicked}>+ add media</SecondaryButton>
-        <PrimaryButton
+        <Button secondary onClick={onAddMediaClicked}>
+          + add media
+        </Button>
+        <Button
           onClick={handleSubmit}
           disabled={isSubmitting || (content.trim() === '' && attachments.length === 0)}
         >
           post
-        </PrimaryButton>
+        </Button>
       </div>
     </div>
   )

src/components/SecondaryButton.tsx

@@ -1,27 +0,0 @@
-import { PropsWithChildren } from 'react'
-interface PrimaryButtonProps {
-  disabled?: boolean
-  type?: 'submit' | 'button'
-  onClick?: () => void
-  className?: string
-}
-
-export default function SecondaryButton({
-  disabled = false,
-  type = 'button',
-  onClick = () => {},
-  className: extraClasses = '',
-  children,
-}: PropsWithChildren<PrimaryButtonProps>) {
-  return (
-    <button
-      type={type}
-      disabled={disabled}
-      onClick={onClick}
-      className={`secondary-button ${extraClasses}
-      `}
-    >
-      {children}
-    </button>
-  )
-}

src/components/SecondaryLinkButton.tsx

@@ -1,18 +0,0 @@
-import { PropsWithChildren } from 'react'
-
-interface SecondaryLinkButtonProps {
-  href: string
-  className?: string
-}
-
-export default function SecondaryLinkButton({
-  href,
-  className: extraClasses = '',
-  children,
-}: PropsWithChildren<SecondaryLinkButtonProps>) {
-  return (
-    <a href={href} className={`secondary-button text-center ${extraClasses}`}>
-      {children}
-    </a>
-  )
-}

src/components/SecondaryNavButton.tsx

@@ -1,19 +0,0 @@
-import { PropsWithChildren } from 'react'
-import { Link } from 'react-router-dom'
-
-interface SecondaryNavButtonProps {
-  to: string
-  className?: string
-}
-
-export default function SecondaryNavButton({
-  to,
-  className: extraClasses = '',
-  children,
-}: PropsWithChildren<SecondaryNavButtonProps>) {
-  return (
-    <Link to={to} className={`secondary-button text-center ${extraClasses}`}>
-      {children}
-    </Link>
-  )
-}

src/components/buttons/AnchorButton.tsx

@@ -3,15 +3,18 @@ import { PropsWithChildren } from 'react'
 interface PrimaryLinkButtonProps {
   href: string
   className?: string
+  secondary?: boolean
 }
 
-export default function PrimaryLinkButton({
+export default function AnchorButton({
   href,
   className: extraClasses = '',
   children,
+  secondary = false,
 }: PropsWithChildren<PrimaryLinkButtonProps>) {
+  const klass = secondary ? 'secondary-button' : 'primary-button'
   return (
-    <a href={href} className={`primary-button text-center ${extraClasses}`}>
+    <a href={href} className={`${klass} text-center ${extraClasses}`}>
       {children}
     </a>
   )

src/components/buttons/Button.tsx

@@ -5,21 +5,24 @@ interface PrimaryButtonProps {
   type?: 'submit' | 'button'
   onClick?: () => void
   className?: string
+  secondary?: boolean
 }
 
-export default function PrimaryButton({
+export default function Button({
   disabled = false,
   type = 'button',
   onClick = () => {},
   className: extraClasses = '',
   children,
+  secondary = false,
 }: PropsWithChildren<PrimaryButtonProps>) {
+  const klass = secondary ? 'secondary-button' : 'primary-button'
   return (
     <button
       type={type}
       disabled={disabled}
       onClick={onClick}
-      className={`primary-button ${extraClasses}`}
+      className={`${klass} ${extraClasses}`}
     >
       {children}
     </button>

src/components/buttons/LinkButton.tsx

@@ -0,0 +1,28 @@
+import { PropsWithChildren } from 'react'
+import { Link } from 'react-router-dom'
+
+interface LinkButtonProps {
+  to: string | To
+  className?: string
+  secondary?: boolean
+}
+
+interface To {
+  pathname: string
+  search?: string
+  hash?: string
+}
+
+export default function LinkButton({
+  to,
+  className: extraClasses = '',
+  secondary = false,
+  children,
+}: PropsWithChildren<LinkButtonProps>) {
+  const klass = secondary ? 'secondary-button' : 'primary-button'
+  return (
+    <Link to={to} className={`${klass} text-center ${extraClasses}`}>
+      {children}
+    </Link>
+  )
+}

src/components/buttons/NavButton.tsx

@@ -1,10 +1,16 @@
 import { PropsWithChildren } from 'react'
 import { Link } from 'react-router-dom'
 interface NavLinkButtonProps {
-  to: string
+  to: string | To
 }
 
-export default function NavLinkButton({ to, children }: PropsWithChildren<NavLinkButtonProps>) {
+interface To {
+  pathname: string
+  search?: string
+  hash?: string
+}
+
+export default function NavButton({ to, children }: PropsWithChildren<NavLinkButtonProps>) {
   return (
     <Link className={`text-primary-500`} to={to}>
       {children}