@authdog/react-elements 0.0.30 → 0.0.31

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (12) hide show
  1. package/.turbo/turbo-build.log +31 -31
  2. package/CHANGELOG.md +6 -0
  3. package/dist/index.js +1 -1
  4. package/dist/index.js.map +1 -1
  5. package/dist/index.mjs +1 -1
  6. package/dist/index.mjs.map +1 -1
  7. package/dist/styles.css +35 -18
  8. package/package.json +1 -1
  9. package/src/components/core/user-profile.tsx +30 -32
  10. /package/src/stories/{Button.stories.tsx → Button._stories.tsx} +0 -0
  11. /package/src/stories/{Navbar.stories.tsx → Navbar._stories.tsx} +0 -0
  12. /package/src/stories/{PlaceholderAlert.stories.tsx → PlaceholderAlert._stories.tsx} +0 -0
package/src/components/core/user-profile.tsx CHANGED
@@ -50,9 +50,9 @@ export const UserProfile = ({
50
50
  }
51
51
 
52
52
  return (
53
- <div className="grid grid-cols-[16rem,1fr] h-screen bg-gray-100">
54
- <div className="h-full border-r p-6 bg-white flex flex-col min-w-0">
55
- <div className="mb-6">
53
+ <div className="grid grid-cols-[14rem,1fr] w-full bg-transparent">
54
+ <div className="h-full border-r p-3 md:p-4 bg-transparent flex flex-col min-w-0">
55
+ <div className="mb-3 md:mb-4">
56
56
  <h1 className="text-xl font-bold">Account</h1>
57
57
  <p className="text-sm text-gray-500">Manage your account info.</p>
58
58
  </div>
@@ -79,8 +79,8 @@ export const UserProfile = ({
79
79
  </nav>
80
80
  </div>
81
81
 
82
- <div className="h-full p-10 overflow-y-auto min-w-0 bg-white">
83
- <div className="flex justify-between items-center mb-6">
82
+ <div className="h-full p-3 md:p-5 min-w-0 bg-transparent">
83
+ <div className="flex justify-between items-center mb-3 md:mb-4">
84
84
  <h2 className="text-xl font-semibold">
85
85
  {activeTab === "profile" ? "Profile details" : "Security settings"}
86
86
  </h2>
@@ -90,10 +90,10 @@ export const UserProfile = ({
90
90
  </div>
91
91
 
92
92
  {activeTab === "profile" ? (
93
- <div className="space-y-8">
93
+ <div className="space-y-5 md:space-y-6">
94
94
  {/* Profile Section */}
95
95
  <div>
96
- <h3 className="text-sm font-medium mb-4">Profile</h3>
96
+ <h3 className="text-sm font-medium mb-3">Profile</h3>
97
97
  <div className="flex items-center justify-between">
98
98
  <div className="flex items-center">
99
99
  <Avatar className="h-12 w-12 mr-4 border">
@@ -110,8 +110,8 @@ export const UserProfile = ({
110
110
 
111
111
  {/* Email Addresses Section */}
112
112
  <div>
113
- <h3 className="text-sm font-medium mb-4">Email addresses</h3>
114
- <div className="space-y-3">
113
+ <h3 className="text-sm font-medium mb-3">Email addresses</h3>
114
+ <div className="space-y-2.5">
115
115
 
116
116
  {/* {JSON.stringify(user)} */}
117
117
 
@@ -126,18 +126,16 @@ export const UserProfile = ({
126
126
  </div>
127
127
  ))} */}
128
128
 
129
- {
130
- user.emails.map((email: any, idx: number) => (
131
- <div className="flex items-center justify-between" key={email.value}>
132
- <span>{email.value}</span>
133
- {idx === 0 && (
134
- <Badge variant="outline" className="text-xs bg-gray-100 text-gray-700 hover:bg-gray-100">
135
- Primary
136
- </Badge>
137
- )}
138
- </div>
139
- ))
140
- }
129
+ {user.emails.map((email: any, idx: number) => (
130
+ <div className="flex items-center justify-between" key={email.value}>
131
+ <span>{email.value}</span>
132
+ {idx === 0 && (
133
+ <Badge variant="outline" className="text-xs bg-gray-100 text-gray-700 hover:bg-gray-100">
134
+ Primary
135
+ </Badge>
136
+ )}
137
+ </div>
138
+ ))}
141
139
  {/* <Button variant="ghost" size="sm" className="flex items-center text-gray-700">
142
140
  {renderIcon(PlusCircle)}
143
141
  Add email address
@@ -147,8 +145,8 @@ export const UserProfile = ({
147
145
 
148
146
  {/* Phone Number Section */}
149
147
  {/* <div>
150
- <h3 className="text-sm font-medium mb-4">Phone number</h3>
151
- <div className="space-y-3">
148
+ <h3 className="text-sm font-medium mb-3">Phone number</h3>
149
+ <div className="space-y-2.5">
152
150
  <div className="flex items-center justify-between">
153
151
  <span>+1 (555) 123-4567</span>
154
152
  <Badge variant="outline" className="text-xs bg-gray-100 text-gray-700 hover:bg-gray-100">
@@ -164,8 +162,8 @@ export const UserProfile = ({
164
162
 
165
163
  {/* Connected Accounts Section */}
166
164
  <div>
167
- <h3 className="text-sm font-medium mb-4">Connected accounts</h3>
168
- <div className="space-y-3">
165
+ <h3 className="text-sm font-medium mb-3">Connected accounts</h3>
166
+ <div className="space-y-2.5">
169
167
  <div className="flex items-center justify-between" key={user.provider}>
170
168
  <div className="flex items-center">
171
169
  <div className="mr-2">
@@ -178,11 +176,11 @@ export const UserProfile = ({
178
176
  </div>
179
177
  </div>
180
178
  ) : (
181
- <div className="space-y-8">
179
+ <div className="space-y-5 md:space-y-6">
182
180
  {/* Security Settings */}
183
181
  <div key="two-factor">
184
- <h3 className="text-sm font-medium mb-4">Two-factor authentication</h3>
185
- <div className="space-y-3">
182
+ <h3 className="text-sm font-medium mb-3">Two-factor authentication</h3>
183
+ <div className="space-y-2.5">
186
184
  <div className="flex items-center justify-between">
187
185
  <div>
188
186
  <p className="font-medium">Two-factor authentication</p>
@@ -196,8 +194,8 @@ export const UserProfile = ({
196
194
  </div>
197
195
 
198
196
  <div key="password">
199
- <h3 className="text-sm font-medium mb-4">Password</h3>
200
- <div className="space-y-3">
197
+ <h3 className="text-sm font-medium mb-3">Password</h3>
198
+ <div className="space-y-2.5">
201
199
  <div className="flex items-center justify-between">
202
200
  <div>
203
201
  <p className="font-medium">Change password</p>
@@ -211,8 +209,8 @@ export const UserProfile = ({
211
209
  </div>
212
210
 
213
211
  <div key="sessions">
214
- <h3 className="text-sm font-medium mb-4">Active sessions</h3>
215
- <div className="space-y-3">
212
+ <h3 className="text-sm font-medium mb-3">Active sessions</h3>
213
+ <div className="space-y-2.5">
216
214
  <div className="flex items-center justify-between">
217
215
  <div>
218
216
  <p className="font-medium">Current session</p>