+
Sign {signText}
@@ -123,28 +125,30 @@ function Auth({
width="100%"
aria-label="Password"
/>
-
+
) : null}
{authProviders?.length ? (
<>
+
+
+ Or sign {signText.toLowerCase()} with one of the following
+
{authProviders?.map((provider) => {
return provider.enabled ? (
-
+
)
}
@@ -71,7 +71,7 @@ function FileDropdown({
return (
-
Jump to {files.length} {files.length === 1 ? "file" : "files"}
-
-
+
+
{content}
-
+
)
}
diff --git a/src/app/(drift)/(posts)/new/components/new.tsx b/src/app/(drift)/(posts)/new/components/new.tsx
index cee5cea1..ae64bb46 100644
--- a/src/app/(drift)/(posts)/new/components/new.tsx
+++ b/src/app/(drift)/(posts)/new/components/new.tsx
@@ -20,11 +20,27 @@ import dynamic from "next/dynamic"
import ButtonDropdown from "@components/button-dropdown"
import clsx from "clsx"
import { Spinner } from "@components/spinner"
-
-const DatePicker = dynamic(() => import("react-datepicker"), {
- ssr: false,
- loading: () =>
-})
+import { cn } from "@lib/cn"
+import { Calendar as CalendarIcon } from "react-feather"
+
+const DatePicker = dynamic(
+ () => import("@components/date-picker").then((m) => m.DatePicker),
+ {
+ ssr: false,
+ loading: () => (
+
+ )
+ }
+)
const emptyDoc = {
title: "",
@@ -273,24 +289,7 @@ function Post({
>
Add a File
-
- }
- placeholderText="Won't expire"
- selected={expiresAt}
- showTimeInput={true}
- // @ts-expect-error fix time input type
- customTimeInput={
}
- timeInputLabel="Time:"
- dateFormat="MM/dd/yyyy h:mm aa"
- clearButtonTitle={"Clear"}
- // TODO: investigate why this causes margin shift if true
- enableTabLoop={false}
- minDate={new Date()}
- className="max-w-[200px] flex-1"
- />
+
{
return (
// TODO: investigate tooltip not showing
-
+
{" "}
<>{time}
diff --git a/src/app/components/calendar.tsx b/src/app/components/calendar.tsx
new file mode 100644
index 00000000..3b4dae61
--- /dev/null
+++ b/src/app/components/calendar.tsx
@@ -0,0 +1,64 @@
+"use client"
+
+import * as React from "react"
+import { ChevronLeft, ChevronRight } from "react-feather"
+import { DayPicker } from "react-day-picker"
+
+import { cn } from "@lib/cn"
+import { buttonVariants } from "@components/button"
+
+export type CalendarProps = React.ComponentProps
+
+function Calendar({
+ className,
+ classNames,
+ showOutsideDays = true,
+ ...props
+}: CalendarProps) {
+ return (
+ ,
+ IconRight: ({}) =>
+ }}
+ {...props}
+ />
+ )
+}
+Calendar.displayName = "Calendar"
+
+export { Calendar }
diff --git a/src/app/components/date-picker.tsx b/src/app/components/date-picker.tsx
new file mode 100644
index 00000000..ea8ae29b
--- /dev/null
+++ b/src/app/components/date-picker.tsx
@@ -0,0 +1,46 @@
+"use client"
+
+import * as React from "react"
+import { format } from "date-fns"
+import { Calendar as CalendarIcon } from "react-feather"
+
+import { cn } from "@lib/cn"
+import { Button } from "@components/button"
+import { Calendar } from "@components/calendar"
+import { Popover, PopoverContent, PopoverTrigger } from "@components/popover"
+
+export function DatePicker({
+ expiresAt,
+ setExpiresAt
+}: {
+ expiresAt?: Date
+ setExpiresAt: React.Dispatch>
+}) {
+ return (
+
+
+
+
+
+ {
+ setExpiresAt(date)
+ }}
+ initialFocus
+ fromDate={new Date()}
+ />
+
+
+ )
+}
diff --git a/src/app/components/header/index.tsx b/src/app/components/header/index.tsx
index 7d212a2e..8562ec0c 100644
--- a/src/app/components/header/index.tsx
+++ b/src/app/components/header/index.tsx
@@ -115,6 +115,13 @@ export default function Header() {
Settings
+
+ Theme
+
{isAdmin && Admin}
{isAuthenticated !== undefined && (
<>
@@ -124,13 +131,6 @@ export default function Header() {
{isAuthenticated === false && (
Sign In
)}
-
- {resolvedTheme === "dark" ? "Light" : "Dark"}
-
)}
@@ -149,7 +149,7 @@ function NavLink({ href, disabled, children }: NavLinkProps) {
const baseClasses =
"text-sm text-muted-foreground font-medium transition-colors hover:text-primary"
const activeClasses = "text-primary border-primary"
- const disabledClasses = "text-gray-400 hover:text-gray-400 cursor-default"
+ const disabledClasses = "text-gray-600 hover:text-gray-400 cursor-not-allowed"
const segments = useSelectedLayoutSegments()
const activeSegment = segments[segments.length - 1]
diff --git a/src/app/components/input/index.tsx b/src/app/components/input/index.tsx
index d8896018..8ed85003 100644
--- a/src/app/components/input/index.tsx
+++ b/src/app/components/input/index.tsx
@@ -11,12 +11,12 @@ const Input = React.forwardRef(
({ className, type, label, hideLabel, ...props }, ref) => {
const id = React.useId()
return (
-
+
{label && !hideLabel ? (