lostecho/everyone-can-use-english
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Improve layout (#510)

Browse Source 
* fix assessment layout

* improve player layout

* refactor sidebar

* default system theme

* may toggle theme

* fix calendar in dark theme

* fix style in dark mode

* improve player layout
This commit is contained in:
an-lee
2024-04-11 16:03:17 +08:00
committed by GitHub
parent a3ceba97ea
commit ac39ccaf6f
32 changed files with 544 additions and 373 deletions
Download Patch File Download Diff File Expand all files Collapse all files

78
enjoy/src/renderer/components/posts/posts.tsx
View File

@@ -1,15 +1,26 @@
import { useContext, useEffect, useState } from "react";
import { AppSettingsProviderContext } from "@renderer/context";
import { PostCard, LoaderSpin } from "@renderer/components";
import { toast, Button, Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from "@renderer/components//ui";
import {
toast,
Button,
Select,
SelectTrigger,
SelectValue,
SelectContent,
SelectItem,
Separator,
} from "@renderer/components//ui";
import { t } from "i18next";
export const Posts = (props: { userId?: string }) => {
const { userId } = props;
const { webApi } = useContext(AppSettingsProviderContext);
const [loading, setLoading] = useState<boolean>(true);
const [type, setType] = useState<'all' | 'recording' | 'medium' | 'story' | 'prompt' | 'gpt'>("all");
const [by, setBy] = useState<'all' | 'following'>("following");
const [type, setType] = useState<
"all" | "recording" | "medium" | "story" | "prompt" | "gpt"
>("all");
const [by, setBy] = useState<"all" | "following">("following");
const [posts, setPosts] = useState<PostType[]>([]);
const [nextPage, setNextPage] = useState(1);
@@ -34,7 +45,7 @@ export const Posts = (props: { userId?: string }) => {
items: 10,
userId,
by,
type
type,
})
.then((res) => {
if (page === 1) {
@@ -63,40 +74,69 @@ export const Posts = (props: { userId?: string }) => {
return (
<div className="max-w-screen-sm mx-auto">
<div className="flex justify-end space-x-4 py-4">
{
!userId && <Select value={by} onValueChange={(value: 'all' | 'following') => setBy(value)}>
{!userId && (
<Select
value={by}
onValueChange={(value: "all" | "following") => setBy(value)}
>
<SelectTrigger>
<SelectValue />
</SelectTrigger>
<SelectContent>
<SelectItem key="following" value="following">{t('following')}</SelectItem>
<SelectItem key="all" value="all">{t('allUsers')}</SelectItem>
<SelectItem key="following" value="following">
{t("following")}
</SelectItem>
<SelectItem key="all" value="all">
{t("allUsers")}
</SelectItem>
</SelectContent>
</Select>
}
)}
<Select value={type} onValueChange={(value: 'all' | 'recording' | 'medium' | 'story' | 'prompt' | 'gpt') => setType(value)}>
<Select
value={type}
onValueChange={(
value: "all" | "recording" | "medium" | "story" | "prompt" | "gpt"
) => setType(value)}
>
<SelectTrigger>
<SelectValue />
</SelectTrigger>
<SelectContent>
<SelectItem key="all" value="all">{t('allTypes')}</SelectItem>
<SelectItem key="recording" value="recording">{t('recordingType')}</SelectItem>
<SelectItem key="prompt" value="prompt">{t('promptType')}</SelectItem>
<SelectItem key="gpt" value="gpt">{t('gptType')}</SelectItem>
<SelectItem key="medium" value="medium">{t('mediumType')}</SelectItem>
<SelectItem key="story" value="story">{t('storyType')}</SelectItem>
<SelectItem key="all" value="all">
{t("allTypes")}
</SelectItem>
<SelectItem key="recording" value="recording">
{t("recordingType")}
</SelectItem>
<SelectItem key="prompt" value="prompt">
{t("promptType")}
</SelectItem>
<SelectItem key="gpt" value="gpt">
{t("gptType")}
</SelectItem>
<SelectItem key="medium" value="medium">
{t("mediumType")}
</SelectItem>
<SelectItem key="story" value="story">
{t("storyType")}
</SelectItem>
</SelectContent>
</Select>
</div>
{posts.length === 0 && (
<div className="text-center text-muted-foreground py-4">{t("noOneSharedYet")}</div>
<div className="text-center text-muted-foreground py-4">
{t("noOneSharedYet")}
</div>
)}
<div className="space-y-4">
<div className="space-y-6">
{posts.map((post) => (
<PostCard key={post.id} post={post} handleDelete={handleDelete} />
<>
<PostCard key={post.id} post={post} handleDelete={handleDelete} />
<Separator />
</>
))}
</div>