Public
Script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
/** @jsxImportSource https://esm.sh/hono@latest/jsx */
import type { FC } from 'hono/jsx';
import RootLayout from "https://esm.town/v/iamseeley/RootLayout";
import UserLinks from "https://esm.town/v/iamseeley/UserLinks";
import UserProfileHeader from "https://esm.town/v/iamseeley/UserProfileHeader";
import UserWidgets from "https://esm.town/v/iamseeley/UserWidgets";
interface Link {
id?: number;
label: string;
url: string;
}
interface EditProfilePageProps {
user: {
id: number;
username: string;
email: string;
name: string;
bio: string;
avatar: string;
profile_theme: string;
links: Link[];
location?: string;
currentlyListening?: string;
currentlyReading?: {
title?: string;
author?: string;
coverImage?: string;
};
currentlyWatching?: {
title?: string;
platform?: string;
posterImage?: string;
};
profile_img?: string;
updated_at: string;
};
message?: string;
}
const themeMap = {
theme1: 'bg-blue-100 text-blue-800',
theme2: 'bg-green-100 text-green-800',
theme3: 'bg-yellow-100 text-yellow-800',
};
const themes = [
{ name: 'Blue', value: 'theme1' },
{ name: 'Green', value: 'theme2' },
{ name: 'Yellow', value: 'theme3' },
];
const EditProfilePage: FC<EditProfilePageProps> = ({ user, message }) => {
const handleThemeChange = (event) => {
const selectedTheme = event.target.value;
const previewDiv = document.getElementById('profile-preview');
Object.values(themeMap).forEach((themeClass) => {
previewDiv.classList.remove(...themeClass.split(' '));
});
previewDiv.classList.add(...themeMap[selectedTheme].split(' '));
};
return (
<RootLayout title={user.name} currentPath={`/edit-profile/${user.username}`}>
<section className="flex flex-col gap-4 mb-8">
<h2 className="text-2xl font-bold text-neutral-800 md:m-auto max-w-md md:text-center">edit your now page</h2>
<form id="edit-profile-form" action={`/edit-profile/${user.username}`} method="post" className="space-y-5" encType="multipart/form-data">
{/* Profile Information Section */}
<div className="border-b-2 border-dotted border-neutral-300 pb-8">
<h3 className="text-lg font-semibold text-neutral-800 mb-2">Profile Information</h3>
<div className="flex flex-col gap-4">
<div>
<label htmlFor="profile_img" className="text-sm font-medium text-neutral-800">Profile Image</label>
<input
id="profile_img"
type="file"
name="profile_img"
accept="image/*"
className="py-2"
/>
</div>
<div>
<label htmlFor="username" className="text-sm font-medium text-neutral-800">Username</label>
<input
id="username"
type="text"
name="username"
value={user.username}
className="w-full mt-1 px-4 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
placeholder="Your username"
required
hx-get={`/check-username?username=${user.username}`}
hx-target="#username-feedback"
hx-trigger="keyup changed delay:500ms"
/>
<div id="username-feedback" className="text-sm text-red-500"></div>
</div>
<div>
<label htmlFor="email" className="text-sm font-medium text-neutral-800">Email</label>
Val Town is a social website to write and deploy JavaScript.
Build APIs and schedule functions from your browser.
Comments
Nobody has commented on this val yet: be the first!
May 23, 2024