Add following and followers pages and some layout tweaks

This commit is contained in:
Joonas 2023-11-20 13:42:57 +02:00
parent 1e25c30cf3
commit 07df91cb5d
5 changed files with 39 additions and 37 deletions

View File

@ -155,7 +155,7 @@ export function Post({
</div> </div>
<div className="flex relative flex-col gap-2 w-full"> <div className="flex relative flex-col gap-2 w-full">
<div className="absolute right-0"> <div className="absolute right-0">
<Text className="subtitle text-[12px] text-ctp-subtext1/50"> <Text className="subtitle text-[12px] text-ctp-subtext1/25">
{new Date(post.createdAt).toLocaleDateString("en-fi", { {new Date(post.createdAt).toLocaleDateString("en-fi", {
year: "numeric", year: "numeric",
month: "long", month: "long",

View File

@ -60,19 +60,21 @@ export default function Login() {
const error = useActionData<ActionFunction>(); const error = useActionData<ActionFunction>();
return ( return (
<Card> <div className="flex flex-col gap-5">
<Title>Login</Title> <Title>Login</Title>
<Form className="flex flex-col gap-3" method="POST"> <Card>
<FormLabel> <Form className="flex flex-col gap-3" method="POST">
<Text>Username</Text> <FormInput type="text" name="username" />{" "} <FormLabel>
<Text type="error">{error ? error : ""}</Text> <Text>Username</Text> <FormInput type="text" name="username" />{" "}
</FormLabel> <Text type="error">{error ? error : ""}</Text>
<FormLabel> </FormLabel>
<Text>Password</Text> <FormInput type="password" name="password" />{" "} <FormLabel>
<Text type="error">{error ? error : ""}</Text> <Text>Password</Text> <FormInput type="password" name="password" />{" "}
</FormLabel> <Text type="error">{error ? error : ""}</Text>
<Button type="submit">Login</Button> </FormLabel>
</Form> <Button type="submit">Login</Button>
</Card> </Form>
</Card>
</div>
); );
} }

View File

@ -190,10 +190,7 @@ export default function PostRoute() {
</Form> </Form>
</div> </div>
) : ( ) : (
<> ""
<Title>Twitter clone</Title>
<SubTitle>Made with Remix</SubTitle>
</>
)} )}
{data.replies.map((reply) => ( {data.replies.map((reply) => (
<div key={reply.id}> <div key={reply.id}>

View File

@ -61,24 +61,28 @@ export default function Register() {
const errors = useActionData<ActionFunction>(); const errors = useActionData<ActionFunction>();
return ( return (
<Card> <div className="flex flex-col gap-5">
<Title>Register</Title> <Title>Register</Title>
<Form className="flex flex-col gap-3" method="POST"> <Card>
<FormLabel> <Form className="flex flex-col gap-3" method="POST">
<Text>Username</Text> <FormInput type="text" name="username" />{" "} <FormLabel>
<Text type="error">{errors?.username ? errors.username : ""}</Text> <Text>Username</Text> <FormInput type="text" name="username" />{" "}
</FormLabel> <Text type="error">{errors?.username ? errors.username : ""}</Text>
<FormLabel> </FormLabel>
<Text>Password</Text> <FormInput type="password" name="password" />{" "} <FormLabel>
<Text type="error">{errors?.password ? errors.password : ""}</Text> <Text>Password</Text> <FormInput type="password" name="password" />{" "}
</FormLabel> <Text type="error">{errors?.password ? errors.password : ""}</Text>
<FormLabel> </FormLabel>
<Text>Repeat password</Text>{" "} <FormLabel>
<FormInput type="password" name="rpassword" />{" "} <Text>Repeat password</Text>{" "}
<Text type="error">{errors?.rpassword ? errors.rpassword : ""}</Text> <FormInput type="password" name="rpassword" />{" "}
</FormLabel> <Text type="error">
<Button type="submit">Register</Button> {errors?.rpassword ? errors.rpassword : ""}
</Form> </Text>
</Card> </FormLabel>
<Button type="submit">Register</Button>
</Form>
</Card>
</div>
); );
} }

View File

@ -1,7 +1,6 @@
/** @type {import('@remix-run/dev').AppConfig} */ /** @type {import('@remix-run/dev').AppConfig} */
export default { export default {
ignoredRouteFiles: ["**/.*"], ignoredRouteFiles: ["**/.*"],
browserNodeBuiltinsPolyfill: { modules: { crypto: true } },
// appDirectory: "app", // appDirectory: "app",
// assetsBuildDirectory: "public/build", // assetsBuildDirectory: "public/build",
// publicPath: "/build/", // publicPath: "/build/",