user info

lib/pages/user_info_page.dart

@@ -1,9 +1,12 @@
 import 'package:fluent_ui/fluent_ui.dart';
+import 'package:pixes/components/color_scheme.dart';
 import 'package:pixes/components/loading.dart';
+import 'package:pixes/components/md.dart';
+import 'package:pixes/foundation/app.dart';
 import 'package:pixes/foundation/image_provider.dart';
 import 'package:pixes/network/network.dart';
-import 'package:pixes/network/res.dart';
 import 'package:pixes/utils/translation.dart';
+import 'package:url_launcher/url_launcher_string.dart';
 
 class UserInfoPage extends StatefulWidget {
   const UserInfoPage(this.id, {super.key});
@@ -21,14 +24,20 @@ class _UserInfoPageState extends LoadingState<UserInfoPage, UserDetails> {
       child: Column(
         children: [
           const SizedBox(height: 16),
-          ClipRRect(
+          Container(
+            width: 64,
+            height: 64,
+            decoration: BoxDecoration(
+              borderRadius: BorderRadius.circular(64),
+              border: Border.all(color: ColorScheme.of(context).outlineVariant, width: 0.6)),
+            child: ClipRRect(
               borderRadius: BorderRadius.circular(64),
               child: Image(
                 image: CachedImageProvider(data.avatar),
                 width: 64,
                 height: 64,
               ),
-          ),
+            ),),
           const SizedBox(height: 8),
           Text(data.name, style: const TextStyle(fontSize: 18, fontWeight: FontWeight.w500)),
           const SizedBox(height: 4),
@@ -41,11 +50,48 @@ class _UserInfoPageState extends LoadingState<UserInfoPage, UserDetails> {
             ),
             style: const TextStyle(fontSize: 14),
           ),
+          const SizedBox(height: 8,),
+          buildHeader("Infomation".tl),
+          buildItem(icon: MdIcons.comment_outlined, title: "Comment".tl, content: data.comment),
+          buildItem(icon: MdIcons.cake_outlined, title: "Birthday".tl, content: data.birth),
+          buildItem(icon: MdIcons.location_city_outlined, title: "Region", content: data.region),
+          buildItem(icon: MdIcons.work_outline, title: "Job".tl, content: data.job),
+          buildItem(icon: MdIcons.person_2_outlined, title: "Gender".tl, content: data.gender),
+          const SizedBox(height: 8,),
+          buildHeader("Social Network".tl),
+          buildItem(title: "Webpage", content: data.webpage, onTap: () => launchUrlString(data.webpage!)),
+          buildItem(title: "Twitter", content: data.twitterUrl, onTap: () => launchUrlString(data.twitterUrl!)),
+          buildItem(title: "pawoo", content: data.pawooUrl, onTap: () => launchUrlString(data.pawooUrl!))
         ],
       ),
     );
   }
 
+  Widget buildItem({IconData? icon, required String title, required String? content, VoidCallback? onTap}) {
+    if(content == null || content.isEmpty) {
+      return const SizedBox.shrink();
+    }
+    return Card(
+      margin: const EdgeInsets.symmetric(horizontal: 12, vertical: 2),
+      padding: EdgeInsets.zero,
+      child: ListTile(
+        leading: icon == null ? null : Icon(icon, size: 20,),
+        title: Text(title),
+        subtitle: SelectableText(content),
+        onPressed: onTap,
+      ),
+    );
+  }
+
+  Widget buildHeader(String title) {
+    return SizedBox(
+      width: double.infinity,
+      child: Text(
+        title,
+        style: const TextStyle(fontWeight: FontWeight.w600),
+      ).toAlign(Alignment.centerLeft)).paddingLeft(16).paddingVertical(4);
+  }
+
   @override
   Future<Res<UserDetails>> loadData() {
     return Network().getUserDetails(widget.id);