fix: shop page ui

4 weeks ago · 7bf610bb5a
20 changed files with 519 additions and 87 deletions
--- a/assets/images/done.png
+++ b/assets/images/done.png
--- a/assets/svg/lock.svg
+++ b/assets/svg/lock.svg
@ -0,0 +1,9 @@
+<svg width="19" height="24" viewBox="0 0 19 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9.33333 0C6.11683 0 3.5 2.61683 3.5 5.83333L3.5 9.33333H2.33333C1.71449 9.33333 1.121 9.57917 0.683417 10.0168C0.245833 10.4543 0 11.0478 0 11.6667L0 21C0 21.6188 0.245833 22.2123 0.683417 22.6499C1.121 23.0875 1.71449 23.3333 2.33333 23.3333H16.3333C16.9522 23.3333 17.5457 23.0875 17.9832 22.6499C18.4208 22.2123 18.6667 21.6188 18.6667 21V11.6667C18.6667 11.0478 18.4208 10.4543 17.9832 10.0168C17.5457 9.57917 16.9522 9.33333 16.3333 9.33333H15.1667V5.83333C15.1667 2.61683 12.5498 0 9.33333 0ZM5.83333 5.83333C5.83333 3.90367 7.40367 2.33333 9.33333 2.33333C11.263 2.33333 12.8333 3.90367 12.8333 5.83333V9.33333H5.83333V5.83333ZM10.5 18.3435V21H8.16667V18.3435C7.75878 18.1099 7.43127 17.7582 7.2273 17.3347C7.02333 16.9113 6.9525 16.4359 7.02413 15.9714C7.09576 15.5069 7.3065 15.0749 7.62856 14.7326C7.95062 14.3902 8.36887 14.1535 8.82817 14.0537C9.16934 13.978 9.52316 13.9799 9.86348 14.0594C10.2038 14.1388 10.5219 14.2936 10.7944 14.5124C11.0669 14.7312 11.2867 15.0085 11.4377 15.3236C11.5887 15.6388 11.6669 15.9839 11.6667 16.3333C11.666 16.7414 11.5578 17.142 11.353 17.4949C11.1482 17.8478 10.854 18.1405 10.5 18.3435Z" fill="url(#paint0_linear_1_11445)"/>
+<defs>
+<linearGradient id="paint0_linear_1_11445" x1="8.43011" y1="4.58333" x2="8.4301" y2="25.8333" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="#B4BEB9"/>
+</linearGradient>
+</defs>
+</svg>
--- a/lib/common_ui/resources/my_assets.dart
+++ b/lib/common_ui/resources/my_assets.dart
@ -34,6 +34,7 @@ class MyAssets {
  static const String member2 = 'assets/images/member_2.png';
  static const String member3 = 'assets/images/member_3.png';
  static const String member4 = 'assets/images/member_4.png';
+  static const String done = 'assets/images/done.png';

  /// ----- Svg -----
  static const String sampleSvg = 'assets/svg/sample.svg';
@ -52,6 +53,7 @@ class MyAssets {
  static const String iconLogout = 'assets/svg/icon_logout.svg';
  static const String iconInfo = 'assets/svg/icon_info.svg';
  static const String gem = 'assets/svg/gem.svg';
+  static const String lock = 'assets/svg/lock.svg';


  /// ----- Audios -----
--- a/lib/core/utils/number_format.dart
+++ b/lib/core/utils/number_format.dart
@ -0,0 +1,11 @@
+extension NumberFormat on double? {
+  num get priceFormat {
+    if (this == null) {
+      return 0;
+    }
+    if (this! % 1 == 0) {
+      return this!.toInt();
+    }
+    return this!;
+  }
+}
--- a/lib/core/widgets/button/enum/my_button_type.dart
+++ b/lib/core/widgets/button/enum/my_button_type.dart
@ -0,0 +1,4 @@
+enum MyButtonType {
+  defaultType,
+  activeType,
+}
--- a/lib/core/widgets/button/my_gradient_button.dart
+++ b/lib/core/widgets/button/my_gradient_button.dart
@ -1,8 +1,7 @@
 import 'package:flutter/material.dart';
-import 'package:shia_game_flutter/common_ui/resources/my_spaces.dart';
-import 'package:shia_game_flutter/core/utils/gap.dart';
-import 'package:shia_game_flutter/core/widgets/container/my_container.dart';
-import 'package:shia_game_flutter/core/widgets/text/gradient_text.dart';
+import 'package:shia_game_flutter/core/widgets/button/enum/my_button_type.dart';
+import 'package:shia_game_flutter/core/widgets/button/styles/active_style.dart';
+import 'package:shia_game_flutter/core/widgets/button/styles/default_style.dart';

 class MyGradientButton extends StatelessWidget {
  const MyGradientButton({
@ -11,42 +10,30 @@ class MyGradientButton extends StatelessWidget {
    this.title,
    this.fontSize,
    this.icon,
+    this.type = MyButtonType.defaultType,
  });

  final VoidCallback? onTap;
  final String? title;
  final double? fontSize;
  final Widget? icon;
+  final MyButtonType type;

  @override
  Widget build(BuildContext context) {
-    return MyContainer(
-      height: 32,
-      width: 116,
-      onTap: onTap,
-      borderColor: Color(0XFF6D2ADA),
-      borderRadius: BorderRadius.all(Radius.circular(5)),
-      gradient: LinearGradient(
-        begin: AlignmentDirectional.topStart,
-        end: AlignmentDirectional.bottomEnd,
-        colors: [Color(0XFF823FEB), Color(0XFF4F09BF)],
+    return switch (type) {
+      MyButtonType.defaultType => DefaultStyle(
+        onTap: onTap,
+        title: title,
+        fontSize: fontSize,
+        icon: icon,
      ),
-      child: Row(
-        mainAxisAlignment: MainAxisAlignment.center,
-        children: [
-          GradientText(
-            text: title,
-            color: Color(0XFF9C8CC2),
-            shadowColor: Color(0xFF1B0D31),
-            offset: Offset(0, 1.69),
-            fontSize: fontSize ?? 12,
-          ),
-          if (icon != null) ...{
-            MySpaces.s6.gapWidth,
-            icon ?? SizedBox.shrink(),
-          },
-        ],
+      MyButtonType.activeType => ActiveStyle(
+        onTap: onTap,
+        title: title,
+        fontSize: fontSize,
+        icon: icon,
      ),
-    );
+    };
  }
 }
--- a/lib/core/widgets/button/styles/active_style.dart
+++ b/lib/core/widgets/button/styles/active_style.dart
@ -0,0 +1,58 @@
+import 'package:flutter/material.dart';
+import 'package:shia_game_flutter/common_ui/resources/my_spaces.dart';
+import 'package:shia_game_flutter/core/utils/gap.dart';
+import 'package:shia_game_flutter/core/widgets/container/my_container.dart';
+import 'package:shia_game_flutter/core/widgets/text/gradient_text.dart';
+
+class ActiveStyle extends StatelessWidget {
+  const ActiveStyle({
+    super.key,
+    this.onTap,
+    this.title,
+    this.fontSize,
+    this.icon,
+  });
+
+  final VoidCallback? onTap;
+  final String? title;
+  final double? fontSize;
+  final Widget? icon;
+
+  @override
+  Widget build(BuildContext context) {
+    return MyContainer(
+      height: 32,
+      width: 116,
+      onTap: onTap,
+      borderRadius: BorderRadius.all(Radius.circular(5)),
+      borderGradient: LinearGradient(
+        begin: AlignmentDirectional.centerStart,
+        end: AlignmentDirectional.centerEnd,
+        colors: [
+          Color(0xFF2E7630),
+          Color(0xFF2E7630).withValues(alpha: 0),
+        ]
+      ),
+      color: Color(0XFF172A19),
+      child: Row(
+        mainAxisAlignment: MainAxisAlignment.center,
+        children: [
+          GradientText(
+            text: title,
+            gradientColor: [
+              Color(0XFF54C221),
+              Color(0XFF358111),
+            ],
+            shadowColor: Color(0xFF0A1F0F),
+            offset: Offset(0, 1.69),
+            fontSize: fontSize ?? 12,
+          ),
+          if (icon != null) ...{
+            MySpaces.s6.gapWidth,
+            icon ?? SizedBox.shrink(),
+          },
+        ],
+      ),
+    );
+  }
+}
--- a/lib/core/widgets/button/styles/default_style.dart
+++ b/lib/core/widgets/button/styles/default_style.dart
@ -0,0 +1,52 @@
+import 'package:flutter/material.dart';
+import 'package:shia_game_flutter/common_ui/resources/my_spaces.dart';
+import 'package:shia_game_flutter/core/utils/gap.dart';
+import 'package:shia_game_flutter/core/widgets/container/my_container.dart';
+import 'package:shia_game_flutter/core/widgets/text/gradient_text.dart';
+
+class DefaultStyle extends StatelessWidget {
+  const DefaultStyle({
+    super.key,
+    this.onTap,
+    this.title,
+    this.fontSize,
+    this.icon,
+  });
+
+  final VoidCallback? onTap;
+  final String? title;
+  final double? fontSize;
+  final Widget? icon;
+
+  @override
+  Widget build(BuildContext context) {
+    return MyContainer(
+      height: 32,
+      width: 116,
+      onTap: onTap,
+      borderColor: Color(0XFF6D2ADA),
+      borderRadius: BorderRadius.all(Radius.circular(5)),
+      gradient: LinearGradient(
+        begin: AlignmentDirectional.topStart,
+        end: AlignmentDirectional.bottomEnd,
+        colors: [Color(0XFF823FEB), Color(0XFF4F09BF)],
+      ),
+      child: Row(
+        mainAxisAlignment: MainAxisAlignment.center,
+        children: [
+          GradientText(
+            text: title,
+            color: Color(0XFF9C8CC2),
+            shadowColor: Color(0xFF1B0D31),
+            offset: Offset(0, 1.69),
+            fontSize: fontSize ?? 12,
+          ),
+          if (icon != null) ...{
+            MySpaces.s6.gapWidth,
+            icon ?? SizedBox.shrink(),
+          },
+        ],
+      ),
+    );
+  }
+}
--- a/lib/core/widgets/text/gradient_text.dart
+++ b/lib/core/widgets/text/gradient_text.dart
@ -7,6 +7,7 @@ class GradientText extends StatelessWidget {
    super.key,
    this.text,
    this.color = const Color(0xFFFFFFFF),
+    this.gradientColor,
    this.fontSize = 14,
    this.shadowColor = const Color(0xFF000000),
    this.blurRadius = 0,
@ -17,6 +18,7 @@ class GradientText extends StatelessWidget {

  final String? text;
  final Color color;
+  final List<Color>? gradientColor;
  final double? fontSize;
  final Color shadowColor;
  final double blurRadius;
@ -31,7 +33,7 @@ class GradientText extends StatelessWidget {
      shaderCallback: (bounds) => LinearGradient(
        begin: Alignment.topCenter,
        end: Alignment.bottomCenter,
-        colors: [
+        colors: gradientColor ?? [
          context.primaryColor,
          context.primaryColor,
          color,
--- a/lib/features/shop/presentation/ui/widgets/shop_item/shop_item_widget.dart
+++ b/lib/features/shop/presentation/ui/widgets/shop_item/shop_item_widget.dart
@ -0,0 +1,41 @@
+import 'package:flutter/material.dart';
+import 'package:shia_game_flutter/common_ui/resources/my_spaces.dart';
+import 'package:shia_game_flutter/core/widgets/container/my_container.dart';
+import 'package:shia_game_flutter/features/shop/domain/entity/shop_entity.dart';
+import 'package:shia_game_flutter/features/shop/presentation/ui/widgets/shop_item/styles/book_style.dart';
+import 'package:shia_game_flutter/features/shop/presentation/ui/widgets/shop_item/styles/boost_style.dart';
+import 'package:shia_game_flutter/features/shop/presentation/ui/widgets/shop_item/styles/character_style.dart';
+import 'package:shia_game_flutter/features/shop/presentation/ui/widgets/shop_item/styles/gem_style.dart';
+import 'package:shia_game_flutter/features/shop/presentation/ui/widgets/shop_item/styles/pro_membership_style.dart';
+
+class ShopItemWidget extends StatelessWidget {
+  const ShopItemWidget({
+    super.key,
+    required this.shop,
+  });
+
+  final ShopEntity shop;
+
+  @override
+  Widget build(BuildContext context) {
+    return MyContainer(
+      color: Color(0XFF1B0B38),
+      borderColor: Color(0XFF462A79),
+      borderRadius: BorderRadius.all(Radius.circular(MySpaces.s14)),
+      padding: EdgeInsets.all(MySpaces.s12),
+      child: MyContainer(
+        color: Color(0XFF070D1C),
+        borderRadius: BorderRadius.all(Radius.circular(7)),
+        padding: EdgeInsets.all(7),
+        child: switch(shop.type) {
+          ShopType.gem => GemStyle(shop: shop),
+          ShopType.boost => BoostStyle(shop: shop),
+          ShopType.character => CharacterStyle(shop: shop),
+          ShopType.book => BookStyle(shop: shop),
+          ShopType.proMembership => ProMembershipStyle(shop: shop),
+          _ => GemStyle(shop: shop),
+        },
+      ),
+    );
+  }
+}
--- a/lib/features/shop/presentation/ui/widgets/shop_item/styles/book_style.dart
+++ b/lib/features/shop/presentation/ui/widgets/shop_item/styles/book_style.dart
@ -0,0 +1,60 @@
+import 'package:flutter/material.dart';
+import 'package:shia_game_flutter/common_ui/resources/my_spaces.dart';
+import 'package:shia_game_flutter/common_ui/resources/my_text_style.dart';
+import 'package:shia_game_flutter/common_ui/theme/my_theme.dart';
+import 'package:shia_game_flutter/core/utils/gap.dart';
+import 'package:shia_game_flutter/core/utils/my_localization.dart';
+import 'package:shia_game_flutter/core/widgets/button/my_gradient_button.dart';
+import 'package:shia_game_flutter/core/widgets/image/my_image.dart';
+import 'package:shia_game_flutter/features/shop/domain/entity/shop_entity.dart';
+
+class BookStyle extends StatelessWidget {
+  const BookStyle({super.key, required this.shop,});
+
+  final ShopEntity shop;
+
+  @override
+  Widget build(BuildContext context) {
+    return SizedBox(
+      height: 230,
+      child: Column(
+        children: [
+          Expanded(
+            child: Container(
+              decoration: BoxDecoration(
+                border: Border.all(width: 2, color: context.primaryColor),
+                borderRadius: BorderRadius.all(Radius.circular(8)),
+              ),
+              child: ClipRRect(
+                borderRadius: BorderRadius.all(Radius.circular(6)),
+                child: MyImage(
+                  asset: shop.image ?? '',
+                  size: 110,
+                  fit: BoxFit.cover,
+                ),
+              ),
+            ),
+          ),
+          MySpaces.s8.gapHeight,
+          SizedBox(
+            width: 110,
+            child: Text(
+              shop.title ?? '',
+              maxLines: 2,
+              overflow: TextOverflow.ellipsis,
+              style: Lexend.semiBold.copyWith(
+                fontSize: 10,
+              ),
+            ),
+          ),
+          MySpaces.s18.gapHeight,
+          MyGradientButton(
+            onTap: () {},
+            title: context.translate.select,
+            fontSize: 20,
+          ),
+        ],
+      ),
+    );
+  }
+}
--- a/lib/features/shop/presentation/ui/widgets/shop_item/styles/boost_style.dart
+++ b/lib/features/shop/presentation/ui/widgets/shop_item/styles/boost_style.dart
@ -0,0 +1,44 @@
+import 'package:flutter/material.dart';
+import 'package:shia_game_flutter/common_ui/resources/my_assets.dart';
+import 'package:shia_game_flutter/core/utils/number_format.dart';
+import 'package:shia_game_flutter/core/widgets/button/my_gradient_button.dart';
+import 'package:shia_game_flutter/core/widgets/image/my_image.dart';
+import 'package:shia_game_flutter/core/widgets/text/gradient_text.dart';
+import 'package:shia_game_flutter/features/shop/domain/entity/shop_entity.dart';
+
+class BoostStyle extends StatelessWidget {
+  const BoostStyle({super.key, required this.shop,});
+
+  final ShopEntity shop;
+
+  @override
+  Widget build(BuildContext context) {
+    return SizedBox(
+      height: 190,
+      child: Column(
+        children: [
+          GradientText(
+            text: '${shop.number} ${shop.title}',
+            fontSize: 18,
+            color: Color(0XFF9C8CC2),
+            shadowColor: Color(0XFF1B0D31),
+            offset: Offset(0, 1.69),
+          ),
+          Expanded(
+            child: MyImage(
+              asset: shop.image ?? '',
+              size: 110,
+              fit: BoxFit.cover,
+            ),
+          ),
+          MyGradientButton(
+            onTap: () {},
+            title: '${shop.price?.priceFormat}',
+            fontSize: 20,
+            icon: MyImage(asset: MyAssets.gem),
+          ),
+        ],
+      ),
+    );
+  }
+}
--- a/lib/features/shop/presentation/ui/widgets/shop_item/styles/character_style.dart
+++ b/lib/features/shop/presentation/ui/widgets/shop_item/styles/character_style.dart
@ -0,0 +1,114 @@
+import 'package:flutter/material.dart';
+import 'package:shia_game_flutter/common_ui/resources/my_assets.dart';
+import 'package:shia_game_flutter/common_ui/resources/my_colors.dart';
+import 'package:shia_game_flutter/common_ui/resources/my_spaces.dart';
+import 'package:shia_game_flutter/core/utils/my_localization.dart';
+import 'package:shia_game_flutter/core/utils/number_format.dart';
+import 'package:shia_game_flutter/core/widgets/button/enum/my_button_type.dart';
+import 'package:shia_game_flutter/core/widgets/button/my_gradient_button.dart';
+import 'package:shia_game_flutter/core/widgets/image/my_image.dart';
+import 'package:shia_game_flutter/features/shop/domain/entity/shop_entity.dart';
+
+class CharacterStyle extends StatelessWidget {
+  const CharacterStyle({super.key, required this.shop});
+
+  final ShopEntity shop;
+
+  @override
+  Widget build(BuildContext context) {
+    return SizedBox(
+      height: 190,
+      child: Column(
+        spacing: MySpaces.s8,
+        children: [
+          Expanded(
+            child: AnimatedContainer(
+              width: 118,
+              duration: Duration(milliseconds: 200),
+              decoration: BoxDecoration(
+                border:Border.all(width: 2, color: Color(0xFFB37EFA)),
+                borderRadius: BorderRadius.all(Radius.circular(8)),
+                boxShadow: shop.isActive == true
+                    ? [
+                        BoxShadow(
+                          color: Color(0xFFB37EFA),
+                          spreadRadius: 0,
+                          blurRadius: 22,
+                          offset: Offset(0, 0),
+                        ),
+                      ]
+                    : null,
+              ),
+              child: ClipRRect(
+                borderRadius: BorderRadius.all(Radius.circular(6)),
+                child: Stack(
+                  alignment: AlignmentDirectional.bottomEnd,
+                  children: [
+                    MyImage(asset: shop.image ?? '', fit: BoxFit.cover, size: 150,),
+                    if (shop.isActive == true)
+                      PositionedDirectional(
+                        end: MySpaces.s8,
+                        bottom: MySpaces.s8,
+                        child: Stack(
+                          clipBehavior: Clip.none,
+                          children: [
+                            Container(
+                              height: 42,
+                              width: 42,
+                              decoration: BoxDecoration(
+                                borderRadius: BorderRadius.all(
+                                  Radius.circular(5),
+                                ),
+                                color: MyColors.black.withValues(alpha: 0.8),
+                              ),
+                            ),
+                            PositionedDirectional(
+                              top: -0,
+                              end: -5,
+                              child: MyImage(asset: MyAssets.done),
+                            ),
+                          ],
+                        ),
+                      ),
+                    if (shop.isBuy == false)
+                      PositionedDirectional(
+                        end: MySpaces.s8,
+                        bottom: MySpaces.s8,
+                        child: Container(
+                          height: 42,
+                          width: 42,
+                          padding: EdgeInsets.all(MySpaces.s10),
+                          decoration: BoxDecoration(
+                            borderRadius: BorderRadius.all(
+                              Radius.circular(5),
+                            ),
+                            color: MyColors.black.withValues(alpha: 0.8),
+                          ),
+                          child: MyImage(
+                            asset: MyAssets.lock,
+                          ),
+                        ),
+                      ),
+                  ],
+                ),
+              ),
+            ),
+          ),
+          MyGradientButton(
+            onTap: () {},
+            title: shop.isActive == true
+                ? context.translate.active
+                : shop.isBuy == true
+                ? context.translate.select
+                : '${shop.price?.priceFormat}',
+            icon: shop.isBuy == true ? null : MyImage(asset: MyAssets.gem),
+            fontSize: 20,
+            type: shop.isActive == true
+                ? MyButtonType.activeType
+                : MyButtonType.defaultType,
+          ),
+        ],
+      ),
+    );
+  }
+}
--- a/lib/features/shop/presentation/ui/widgets/shop_item/styles/gem_style.dart
+++ b/lib/features/shop/presentation/ui/widgets/shop_item/styles/gem_style.dart
@ -0,0 +1,41 @@
+import 'package:flutter/material.dart';
+import 'package:shia_game_flutter/core/utils/number_format.dart';
+import 'package:shia_game_flutter/core/widgets/button/my_gradient_button.dart';
+import 'package:shia_game_flutter/core/widgets/image/my_image.dart';
+import 'package:shia_game_flutter/core/widgets/text/gradient_text.dart';
+import 'package:shia_game_flutter/features/shop/domain/entity/shop_entity.dart';
+
+class GemStyle extends StatelessWidget {
+  const GemStyle({super.key, required this.shop,});
+
+  final ShopEntity shop;
+
+  @override
+  Widget build(BuildContext context) {
+    return SizedBox(
+      height: 190,
+      child: Column(
+        children: [
+          GradientText(
+            text: '${shop.number} ${shop.title}',
+            fontSize: 18,
+            color: Color(0XFF9C8CC2),
+            shadowColor: Color(0XFF1B0D31),
+            offset: Offset(0, 1.69),
+          ),
+          Expanded(
+            child: MyImage(
+              asset: shop.image ?? '',
+              size: 110,
+            ),
+          ),
+          MyGradientButton(
+            onTap: () {},
+            title: '\$ ${shop.price?.priceFormat}',
+            fontSize: 20,
+          ),
+        ],
+      ),
+    );
+  }
+}
--- a/lib/features/shop/presentation/ui/widgets/shop_item/styles/pro_membership_style.dart
+++ b/lib/features/shop/presentation/ui/widgets/shop_item/styles/pro_membership_style.dart
@ -0,0 +1,41 @@
+import 'package:flutter/material.dart';
+import 'package:shia_game_flutter/core/utils/number_format.dart';
+import 'package:shia_game_flutter/core/widgets/button/my_gradient_button.dart';
+import 'package:shia_game_flutter/core/widgets/image/my_image.dart';
+import 'package:shia_game_flutter/core/widgets/text/gradient_text.dart';
+import 'package:shia_game_flutter/features/shop/domain/entity/shop_entity.dart';
+
+class ProMembershipStyle extends StatelessWidget {
+  const ProMembershipStyle({super.key, required this.shop,});
+
+  final ShopEntity shop;
+
+  @override
+  Widget build(BuildContext context) {
+    return SizedBox(
+      height: 190,
+      child: Column(
+        mainAxisAlignment: MainAxisAlignment.spaceBetween,
+        children: [
+          GradientText(
+            text: '${shop.number} ${shop.title}',
+            fontSize: 18,
+            color: Color(0XFF9C8CC2),
+            shadowColor: Color(0XFF1B0D31),
+            offset: Offset(0, 1.69),
+          ),
+          MyImage(
+            asset: shop.image ?? '',
+            size: 90,
+            fit: BoxFit.contain,
+          ),
+          MyGradientButton(
+            onTap: () {},
+            title: '\$ ${shop.price?.priceFormat}',
+            fontSize: 20,
+          ),
+        ],
+      ),
+    );
+  }
+}
--- a/lib/features/shop/presentation/ui/widgets/shop_item_widget.dart
+++ b/lib/features/shop/presentation/ui/widgets/shop_item_widget.dart
@ -1,54 +0,0 @@
-import 'package:flutter/material.dart';
-import 'package:shia_game_flutter/common_ui/resources/my_spaces.dart';
-import 'package:shia_game_flutter/core/widgets/button/my_gradient_button.dart';
-import 'package:shia_game_flutter/core/widgets/container/my_container.dart';
-import 'package:shia_game_flutter/core/widgets/image/my_image.dart';
-import 'package:shia_game_flutter/core/widgets/text/gradient_text.dart';
-import 'package:shia_game_flutter/features/shop/domain/entity/shop_entity.dart';
-
-class ShopItemWidget extends StatelessWidget {
-  const ShopItemWidget({
-    super.key,
-    required this.shop,
-  });
-
-  final ShopEntity shop;
-
-  @override
-  Widget build(BuildContext context) {
-    return MyContainer(
-      height: 213,
-      color: Color(0XFF1B0B38),
-      borderColor: Color(0XFF462A79),
-      borderRadius: BorderRadius.all(Radius.circular(MySpaces.s14)),
-      padding: EdgeInsets.all(MySpaces.s12),
-      child: MyContainer(
-        color: Color(0XFF070D1C),
-        borderRadius: BorderRadius.all(Radius.circular(7)),
-        padding: EdgeInsets.all(7),
-        child: Column(
-          mainAxisAlignment: MainAxisAlignment.spaceBetween,
-          children: [
-            GradientText(
-              text: '270 Gem',
-              fontSize: 18,
-              color: Color(0XFF9C8CC2),
-              shadowColor: Color(0XFF1B0D31),
-              offset: Offset(0, 1.69),
-            ),
-            MyImage(
-              asset: shop.image ?? '',
-              size: 80,
-              fit: BoxFit.contain,
-            ),
-            MyGradientButton(
-              onTap: () {},
-              title: '\$ 12',
-              fontSize: 20,
-            ),
-          ],
-        ),
-      ),
-    );
-  }
-}
--- a/lib/features/shop/presentation/ui/widgets/shop_package_entity.dart
+++ b/lib/features/shop/presentation/ui/widgets/shop_package_entity.dart
@ -8,7 +8,7 @@ import 'package:shia_game_flutter/core/widgets/image/my_image.dart';
 import 'package:shia_game_flutter/core/widgets/text/gradient_text.dart';
 import 'package:shia_game_flutter/features/shop/domain/entity/shop_entity.dart';
 import 'package:shia_game_flutter/features/shop/domain/entity/shop_package_entity.dart';
-import 'package:shia_game_flutter/features/shop/presentation/ui/widgets/shop_item_widget.dart';
+import 'package:shia_game_flutter/features/shop/presentation/ui/widgets/shop_item/shop_item_widget.dart';

 class ShopPackageWidget extends StatelessWidget {
  const ShopPackageWidget({super.key, required this.shopPackage,});
--- a/lib/l10n/app_en.arb
+++ b/lib/l10n/app_en.arb
@ -18,5 +18,7 @@
  "ongoing": "ongoing",
  "online": "online",
  "battle_cast": "Battle Cast",
-  "no_one_online": "No one's online"
+  "no_one_online": "No one's online",
+  "active": "Active",
+  "select": "Select"
 }
--- a/lib/l10n/app_localizations.dart
+++ b/lib/l10n/app_localizations.dart
@ -207,6 +207,18 @@ abstract class AppLocalizations {
  /// In en, this message translates to:
  /// **'No one\'s online'**
  String get no_one_online;
+
+  /// No description provided for @active.
+  ///
+  /// In en, this message translates to:
+  /// **'Active'**
+  String get active;
+
+  /// No description provided for @select.
+  ///
+  /// In en, this message translates to:
+  /// **'Select'**
+  String get select;
 }

 class _AppLocalizationsDelegate
--- a/lib/l10n/app_localizations_en.dart
+++ b/lib/l10n/app_localizations_en.dart
@ -64,4 +64,10 @@ class AppLocalizationsEn extends AppLocalizations {

  @override
  String get no_one_online => 'No one\'s online';
+
+  @override
+  String get active => 'Active';
+
+  @override
+  String get select => 'Select';
 }