Skip to content

Commit

Permalink
Merge branch 'preview'
Browse files Browse the repository at this point in the history
  • Loading branch information
@pdelfan
pdelfan committed Nov 28, 2024
2 parents 0ca2b41 + f3ac86b commit fb32e3b
Show file tree
Hide file tree
Showing 5 changed files with 50 additions and 38 deletions.
2 changes: 1 addition & 1 deletion src/components/inputs/editor/BottomEditorBar.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -95,7 +95,7 @@ export default function BottomEditorBar(props: Props) {
languages={languages}
onSelectLanguages={onSelectLanguages}
/>
<CharacterCount charCount={charCount} />
<CharacterCount charCount={charCount} max={300} />
</div>
</div>
</div>
Expand Down
7 changes: 4 additions & 3 deletions src/components/inputs/editor/CharacterCount.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,17 +2,18 @@ import { CircularProgressbar } from "react-circular-progressbar";

interface Props {
charCount: number;
max: number;
}

export default function CharacterCount(props: Props) {
const { charCount } = props;
const percentage = (100 * charCount) / 300;
const { charCount, max } = props;
const percentage = (100 * charCount) / max;

return (
<div className="flex gap-2.5">
{percentage > 100 && (
<span className="text-status-danger w-8 font-medium">
{300 - charCount}
{max - charCount}
</span>
)}
<CircularProgressbar
Expand Down
6 changes: 3 additions & 3 deletions src/components/inputs/editor/Editor.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@ export default function Editor(props: Props) {
const [languages, setLanguages] = useState<Language[]>([]);
const [images, setImages] = useState<UploadImage[]>();
const [embedSuggestions, setEmbedSuggestions] = useState<Set<string>>(
new Set("")
new Set(""),
);
const [linkEmbed, setLinkEmbed] = useState("");
const [linkCard, setLinkCard] = useState<LinkMeta | null>(null);
Expand All @@ -49,7 +49,7 @@ export default function Editor(props: Props) {
const quoteAuthor = quote?.author.displayName || quote?.author.handle;
const placeholderText = getComposerPlaceholder(
replyTo ? "reply" : quote ? "quote" : "post",
replyAuthor ?? quoteAuthor
replyAuthor ?? quoteAuthor,
);

const editor = useEditor({
Expand Down Expand Up @@ -152,7 +152,7 @@ export default function Editor(props: Props) {
numberOfImages={images?.length ?? 0}
/>

<ScrollArea.Root className="max-h-[80svh] md:h-[30svh] my-3 bg-skin-secondary p-3 rounded-2xl overflow-auto">
<ScrollArea.Root className="max-h-[80svh] md:h-[32svh] my-3 bg-skin-secondary p-3 rounded-2xl overflow-auto">
<ScrollArea.Scrollbar>
<ScrollArea.Thumb />
</ScrollArea.Scrollbar>
Expand Down
72 changes: 41 additions & 31 deletions src/components/inputs/editor/UploadPreview.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,8 @@ import Image from "next/image";
import { SetStateAction, useState } from "react";
import Textarea from "../textarea/Textarea";
import { CgClose } from "react-icons/cg";
import CharacterCount from "./CharacterCount";
import { MAX_ALT_TEXT_LENGTH } from "@/lib/consts/general";

interface Props {
images: UploadImage[];
Expand All @@ -19,7 +21,7 @@ export default function UploadPreview(props: Props) {

const handleRemove = (image: UploadImage) => {
onUpdate((prev) =>
prev?.filter((prevImage) => prevImage.url !== image.url)
prev?.filter((prevImage) => prevImage.url !== image.url),
);
};

Expand Down Expand Up @@ -74,43 +76,51 @@ export default function UploadPreview(props: Props) {
<Textarea
rows={6}
autoFocus={false}
maxLength={MAX_ALT_TEXT_LENGTH}
placeholder="Describe what's happening in this image"
defaultValue={selectedImage.altText ?? ""}
onChange={(e) =>
setAltText(e.currentTarget.value)
}
className="resize-none"
/>
<div className="mt-2 flex justify-end gap-3">
<Button
onClick={() => {
setShowAltTextModal(false);
setAltText("");
}}
className="border-skin-base text-skin-base hover:bg-skin-secondary rounded-full border px-4 py-2 text-sm font-semibold"
>
Cancel
</Button>
<Button
onClick={() => {
setShowAltTextModal(false);
onUpdate((prev) =>
prev?.map((prevImage) =>
prevImage.url === selectedImage.url
? Object.assign(prevImage, {
altText:
altText !== selectedImage.altText
? altText
: selectedImage.altText,
})
: prevImage
)
);
}}
className="bg-primary hover:bg-primary-dark text-skin-icon-inverted rounded-full px-6 py-2 text-sm font-semibold"
>
Save
</Button>
<div className="flex flex-wrap gap-2 items-center justify-between mt-2 ">
<CharacterCount
charCount={altText.length}
max={MAX_ALT_TEXT_LENGTH}
/>
<div className="flex justify-end gap-3">
<Button
onClick={() => {
setShowAltTextModal(false);
setAltText("");
}}
className="border-skin-base text-skin-base hover:bg-skin-secondary rounded-full border px-4 py-2 text-sm font-semibold"
>
Cancel
</Button>
<Button
onClick={() => {
setShowAltTextModal(false);
onUpdate((prev) =>
prev?.map((prevImage) =>
prevImage.url === selectedImage.url
? Object.assign(prevImage, {
altText:
altText !==
selectedImage.altText
? altText
: selectedImage.altText,
})
: prevImage,
),
);
}}
className="bg-primary hover:bg-primary-dark text-skin-icon-inverted rounded-full px-6 py-2 text-sm font-semibold"
>
Save
</Button>
</div>
</div>
</div>
</div>
Expand Down
1 change: 1 addition & 0 deletions src/lib/consts/general.ts
View file
Original file line number Diff line number Diff line change
@@ -1,2 +1,3 @@
export const MAX_KNOWN_FOLLOWERS = 3;
export const DEFAULT_SERVICE = "https://bsky.social";
export const MAX_ALT_TEXT_LENGTH = 2000;

0 comments on commit fb32e3b

Please sign in to comment.