info/developer-roadmap
1
0
Fork 0
mirror of https://github.com/kamranahmedse/developer-roadmap.git synced 2025-09-09 08:40:40 +02:00
Code Issues Releases Wiki Activity

Update tell us more

Browse Source
This commit is contained in:
Kamran Ahmed
2025-05-27 16:47:00 +01:00
parent 1ba3583708
commit 2e43e0615f
2 changed files with 12 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
src/components/UserPersona/UpdatePersonaModal.tsx
View File

@@ -57,9 +57,10 @@ export function UpdatePersonaModal(props: UpdatePersonaModalProps) {
bodyClassName="p-4" bodyClassName="p-4"
> >
<div className="mb-8 text-left"> <div className="mb-8 text-left">
<h2 className="text-lg font-semibold">Update your persona</h2> <h2 className="text-lg font-semibold">Tell us more about yourself</h2>
<p className="mt-1 text-sm text-balance text-gray-500"> <p className="mt-1 text-sm text-balance text-gray-500">
Update your persona to get the best out of the AI Tutor. We'll use this information to help you get the best out of the AI
Tutor.
</p> </p>
</div> </div>

18
src/components/UserPersona/UserPersonaForm.tsx
View File

@@ -1,6 +1,6 @@
import { useId, useRef, useState } from 'react'; import { useId, useRef, useState } from 'react';
import { SelectNative } from '../SelectNative'; import { SelectNative } from '../SelectNative';
import { Loader2Icon, MessageCircle, PlayIcon } from 'lucide-react'; import { Loader2Icon, MessageCircle } from 'lucide-react';
import { cn } from '../../lib/classname'; import { cn } from '../../lib/classname';
export type UserPersonaFormData = { export type UserPersonaFormData = {
@@ -53,7 +53,7 @@ export function UserPersonaForm(props: UserPersonaFormProps) {
id={expertiseFieldId} id={expertiseFieldId}
value={expertise} value={expertise}
onChange={(e) => setExpertise(e.target.value)} onChange={(e) => setExpertise(e.target.value)}
className="border-gray-300 focus:border-gray-500 focus:ring-1 focus:ring-gray-500" className="border-gray-300 text-sm h-[40px] focus:border-gray-500 focus:ring-1 focus:ring-gray-500"
> >
<option value="" selected hidden> <option value="" selected hidden>
Select your expertise Select your expertise
@@ -77,7 +77,7 @@ export function UserPersonaForm(props: UserPersonaFormProps) {
htmlFor={goalFieldId} htmlFor={goalFieldId}
> >
What is your goal?{' '} What is your goal?{' '}
{hasInitialGoal && !defaultValues?.goal && `Tell us more (optional)`} {hasInitialGoal && !defaultValues?.goal && `Tell us more`}
</label> </label>
{!hasInitialGoal && ( {!hasInitialGoal && (
@@ -93,7 +93,7 @@ export function UserPersonaForm(props: UserPersonaFormProps) {
].map((goalTemplate) => ( ].map((goalTemplate) => (
<button <button
key={goalTemplate} key={goalTemplate}
className="rounded-lg border border-gray-200 bg-gray-50 px-4 py-2 text-sm text-gray-600 shadow-sm transition-all hover:border-gray-300 hover:bg-gray-100 hover:shadow" className="rounded-lg border border-gray-200 bg-gray-50 px-4 py-2 text-sm text-gray-600 transition-all hover:border-gray-300 hover:bg-gray-100 hover:border-gray-400"
onClick={() => { onClick={() => {
if (goalTemplate !== 'Other (tell us more)') { if (goalTemplate !== 'Other (tell us more)') {
setGoal(goalTemplate); setGoal(goalTemplate);
@@ -116,7 +116,7 @@ export function UserPersonaForm(props: UserPersonaFormProps) {
ref={goalRef} ref={goalRef}
id={goalFieldId} id={goalFieldId}
className={cn( className={cn(
'block min-h-24 w-full resize-none rounded-lg border border-gray-300 bg-white px-4 py-3 text-sm shadow-sm outline-none placeholder:text-gray-400 focus:border-gray-500 focus:ring-1 focus:ring-gray-500', 'block min-h-24 w-full resize-none rounded-lg border border-gray-300 bg-white px-4 py-3 text-sm outline-none placeholder:text-gray-400 focus:border-gray-500 focus:ring-1 focus:ring-gray-500',
!hasInitialGoal && 'hidden', !hasInitialGoal && 'hidden',
)} )}
placeholder={`e.g. need to find a job as soon as possible`} placeholder={`e.g. need to find a job as soon as possible`}
@@ -135,7 +135,7 @@ export function UserPersonaForm(props: UserPersonaFormProps) {
<input <input
id={commitFieldId} id={commitFieldId}
className="block w-full resize-none rounded-lg border border-gray-300 bg-white px-4 py-3 text-sm shadow-sm outline-none placeholder:text-gray-400 focus:border-gray-500 focus:ring-1 focus:ring-gray-500" className="block w-full resize-none rounded-lg border border-gray-300 bg-white px-4 h-[40px] text-sm outline-none placeholder:text-gray-400 focus:border-gray-500 focus:ring-1 focus:ring-gray-500"
placeholder="e.g. 10 hours per week" placeholder="e.g. 10 hours per week"
value={commit} value={commit}
onChange={(e) => setCommit(e.target.value)} onChange={(e) => setCommit(e.target.value)}
@@ -145,7 +145,7 @@ export function UserPersonaForm(props: UserPersonaFormProps) {
<button <button
disabled={isLoading || !hasFormCompleted} disabled={isLoading || !hasFormCompleted}
type="submit" type="submit"
className="mt-6 flex h-11 w-full items-center justify-center gap-2 rounded-lg bg-black px-6 py-2 text-sm text-white shadow-sm transition-all hover:bg-gray-900 disabled:pointer-events-none disabled:opacity-50" className="mt-6 flex h-11 w-full items-center justify-center gap-2 rounded-lg bg-black px-6 py-2 text-sm text-white transition-all hover:bg-gray-900 disabled:pointer-events-none disabled:opacity-50"
> >
{isLoading ? ( {isLoading ? (
<Loader2Icon className="size-4 animate-spin stroke-[2.5]" /> <Loader2Icon className="size-4 animate-spin stroke-[2.5]" />
@@ -153,8 +153,8 @@ export function UserPersonaForm(props: UserPersonaFormProps) {
<> <>
{defaultValues ? ( {defaultValues ? (
<> <>
<PlayIcon className="size-4" /> <MessageCircle className="size-4" />
Update Persona Update Information
</> </>
) : ( ) : (
<> <>