AI Review Center
Commit Review Workspace ?
Select a commit on the left to inspect quality, security, business value, findings, and suggested code changes.
Project AI Score
?
63%
Quality Avg
?
68%
Security Avg
?
45%
Reviews
?
56
Review Result ?
jattin01/avriti · 9568835f
The commit adds several UI elements and SVG icons across multiple files, improving the UI visually. However, it includes use of dangerouslySetInnerHTML which poses security risks, and there are commented out legacy code fragments. The commit message is vague and uninformative.
Quality
?
70%
Security
?
30%
Business Value
?
60%
Maintainability
?
65%
Issues & Suggested Fixes
?
1AI detects the issue
2Shows file, line, or evidence
3Suggests the fix to apply
Issue
Where
commit message
Issue / Evidence
issue
Suggested Fix
provide a descriptive commit message summarizing the changes and purpose to improve business value and reviewability
Security Issue
Where
app/page.tsx:138
Issue / Evidence
security
Suggested Fix
avoid using dangerouslySetInnerHTML or sanitize content before usage to reduce XSS risk
Quality
Where
app/page.tsx:115
Issue / Evidence
quality
Suggested Fix
remove commented out old code to improve code cleanliness
Quality
Where
app/page.tsx:130
Issue / Evidence
quality
Suggested Fix
remove closing commented out tag for clarity and cleanup
Quality
Where
components/ProductDetailSection.tsx:115
Issue / Evidence
quality
Suggested Fix
consider consolidating repetitive image elements to reduce redundancy
Quality
Where
components/ui/cart-button.tsx:21
Issue / Evidence
quality
Suggested Fix
remove commented out dead code blocks to improve clarity
Quality
Where
components/site-header.tsx:182
Issue / Evidence
quality
Suggested Fix
ensure all added SVG icons are documented and consistent to improve maintainability
Quality
Where
app/shop/page.tsx:134
Issue / Evidence
quality
Suggested Fix
ensure proper spacing and indentation for JSX elements for better readability
Quality
Where
components/product-card.tsx:50
Issue / Evidence
quality
Suggested Fix
maintain consistent button styling and avoid inline styling when possible for maintainability
Code Change Preview · app/page.tsx
?
Removed / Before Commit
- <img src="/3.jpeg" alt="product" className="object-contain" /> - </li> - </ul> - <div className="grid lg:grid-cols-[7fr_3fr] gap-6 items-center justify-between text-justify mt-8"> - {home?.sc1description ? ( - <div - className="text-sm leading-7 text-[#6f6f6f] sm:text-base" - <Button className="pl-[10px] pr-[0px] rounded-[10px] border-[1px]" variant="secondary">KNOW MORE <span className="buttonArrow ml-[15px]"></span></Button> - - </Link> - </div> - </div>
Added / After Commit
+ <img src="/3.jpeg" alt="product" className="object-contain" /> + </li> + </ul> + {/* <div className="grid lg:grid-cols-[7fr_3fr] gap-6 items-center justify-between text-justify mt-8"> + {home?.sc1description ? ( + <div + className="text-sm leading-7 text-[#6f6f6f] sm:text-base" + <Button className="pl-[10px] pr-[0px] rounded-[10px] border-[1px]" variant="secondary">KNOW MORE <span className="buttonArrow ml-[15px]"></span></Button> + + </Link> + </div>*/} + + + <div className="grid lg:grid-cols-[7fr_3fr] gap-6 justify-between text-justify mt-8"> + <div> + {home?.sc1description ? ( + <div + className="text-sm leading-6 text-[#6f6f6f] sm:text-[14px]"
Removed / Before Commit
- return ( - <div key={product.id} className="bg-[#F7F7F7] rounded-[20px] p-[20px] overflow-hidden"> - <Link href={`/shop/${product.slug}`} className="group"> - <p className="min-h-10 text-sm font-normal leading-5 text-[#777777]"> - {product.title} - {attr1 && `- ${attr1.value}${product.variant?.name ? ` ${product.variant.name}` : ''}`} - </p> - <div className="relative aspect-[4/5] overflow-hidden"> - <div className="absolute inset-5 rounded-full bg-[radial-gradient(circle,rgba(12,62,187,0.13),transparent_62%)]" /> - <Image - </span> - <div className="flex gap-1"> - <span className="px-[6px] py-[2px] bg-[var(--color-primary-700)] rounded-[5px] text-white">+</span> - <button className="inline-flex items-center justify-center gap-2 font-normal transition focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--color-primary-600)] disabled:pointer-events-none disabled:opacity-50 bg-[var(--color-primary-700)] text-white shadow-[var(--shadow-soft)] hover:bg-[var(--color-primary-600)] px-[4px] py-[2px] min-h-auto text-[14px] uppercase rounded-[5px] h-full">Add</button> - </div> - </div> - </Link>
Added / After Commit
+ return ( + <div key={product.id} className="bg-[#F7F7F7] rounded-[20px] p-[20px] overflow-hidden"> + <Link href={`/shop/${product.slug}`} className="group"> + <div className="mt-1 mb-[10px] flex gap-2 items-center justify-between"> + <p className="text-sm font-normal leading-5 text-[#777777]"> + {product.title} + {attr1 && `- ${attr1.value}${product.variant?.name ? ` ${product.variant.name}` : ''}`} + </p> + <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="#0b3dba" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> + <path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/> + </svg></div> + <div className="relative aspect-[4/5] overflow-hidden"> + <div className="absolute inset-5 rounded-full bg-[radial-gradient(circle,rgba(12,62,187,0.13),transparent_62%)]" /> + <Image + </span> + <div className="flex gap-1"> + <span className="px-[6px] py-[2px] bg-[var(--color-primary-700)] rounded-[5px] text-white">+</span> + <button className="min-h-[28px] inline-flex items-center justify-center gap-2 font-normal transition focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--color-primary-600)] disabled:pointer-events-none disabled:opacity-50 bg-[var(--color-primary-700)] text-white shadow-[var(--shadow-soft)] hover:bg-[var(--color-primary-600)] px-[4px] py-[2px] text-[14px] uppercase rounded-[5px]">Add</button>
Removed / Before Commit
- return ( - <Card className="overflow-hidden"> - <Link href={`/shop/${product.slug}`} className="block h-full flex flex-col justify-between"> - <h3 className="mt-2 text-lg mb-[20px] text-[var(--textcolor)] font-normal"> - {product.name} - {product.attrValue ? ` - ${product.attrValue}${product.variantName ? ` ${product.variantName}` : ''}` : ''} - </h3> - <div className={`relative h-[400px] ${product.tone}`}> - <img - src={product.image} - )} - </p> - <div className="flex gap-1"> - <span className="px-[6px] py-[2px] bg-[var(--color-primary-700)] rounded-[5px] text-white">+</span> - <Button className="px-[4px] py-[2px] min-h-auto text-[14px] uppercase rounded-[5px] h-full"> - Add - </Button> - </div>
Added / After Commit
+ return ( + <Card className="overflow-hidden"> + <Link href={`/shop/${product.slug}`} className="block h-full flex flex-col justify-between"> + <div className="mt-2 mb-[20px] flex gap-2 items-center justify-between"> + <h3 className="text-lg text-[var(--textcolor)] font-normal"> + {product.name} + {product.attrValue ? ` - ${product.attrValue}${product.variantName ? ` ${product.variantName}` : ''}` : ''} + </h3> + <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="#0b3dba" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> + <path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/> + </svg> + </div> + <div className={`relative h-[400px] ${product.tone}`}> + <img + src={product.image} + )} + </p> + <div className="flex gap-1">
Removed / Before Commit
- <div className="grid grid-cols-1 md:grid-cols-2 gap-6 md:gap-14 items-start"> - - {/* LEFT — Image */} - <div className="relative overflow-hidden border border-[#ffebdfde] rounded-[10px] p-4"> - <img - src={imageUrl} - alt={product.title} - className="block mx-auto" - /> - </div> - - {/* RIGHT — Info */} - <div className="flex flex-col"> - - {/* Title */} - <h1 className="text-2xl font-serif md:text-3xl font-normal italic font-bold text-[#2c2420] mb-4"> - {product.title} - </h1>
Added / After Commit
+ <div className="grid grid-cols-1 md:grid-cols-2 gap-6 md:gap-14 items-start"> + + {/* LEFT — Image */} + <div> + <div className="relative overflow-hidden border border-[#ffebdfde] rounded-[10px] p-[60px]"> + <img + src={imageUrl} + alt={product.title} + className="block mx-auto max-w-[60%]" + /> + </div> + <ul className="grid grid-cols-4 mt-[20px] gap-4"> + <li className="border border-[#ffebdfde] p-4 rounded-[10px]"> + <img src={imageUrl} alt={product.title} className="block mx-auto max-w-[60%]"/> + </li> + <li className="border border-[#ffebdfde] p-4 rounded-[10px]"> + <img src={imageUrl} alt={product.title} className="block mx-auto max-w-[60%]"/> + </li>
Removed / Before Commit
- </div> - </nav> - - <div className="hidden items-center gap-4 md:flex relative"> - {user ? ( - <div ref={accountMenuRef} className="flex items-center gap-3"> - <button - Login - </Link> - )} - <div className="relative"> - <CartButton count={cartCount} /> - {toast && ( - <div className="absolute right-0 top-12 z-50 flex items-center gap-2 rounded-[10px] bg-[var(--color-primary-700)] px-4 py-2 text-white text-[13px] font-medium shadow-lg whitespace-nowrap animate-fade-in"> - <span>✓</span> Added to cart! - </div> - <div className="md:hidden flex items-center gap-2"> - <button
Added / After Commit
+ </div> + </nav> + + <div className="hidden items-center gap-2 md:flex relative"> + {user ? ( + <div ref={accountMenuRef} className="flex items-center gap-3"> + <button + Login + </Link> + )} + + <div> + <div className="inline-flex items-center justify-between rounded-[6px] bg-gradient-to-br from-[#C7C3D6] to-[#3C60C2] px-2 py-2 text-white gap-1 cursor-pointer"> + <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> + <path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/> + </svg> + </div> + </div>
Removed / Before Commit
- - export function CartButton({ className, count = 0, itemsLabel = "ITEMS", ...props }: CartButtonProps) { - return ( - <Link href="/cart"> - <button - className={cn( - "inline-flex items-center justify-between rounded-[15px] bg-gradient-to-br from-[#C7C3D6] to-[#3C60C2] px-4 py-2 text-white gap-3 cursor-pointer", - className, - )} - {...props} - > - <span className="text-[12px] font-normal uppercase">CART</span> - <div className="flex flex-col items-center"> - <span className="text-[13px] font-semibold leading-none">{count}</span> - <span className="text-[10px] uppercase">{itemsLabel}</span> - </div> - </button> - </Link>
Added / After Commit
+ + export function CartButton({ className, count = 0, itemsLabel = "ITEMS", ...props }: CartButtonProps) { + return ( + <Link href="/cart" className="flex items-center gap-1"> + <button + className={cn( + "inline-flex items-center justify-between rounded-[6px] bg-gradient-to-br from-[#C7C3D6] to-[#3C60C2] px-2 py-2 text-white gap-1 cursor-pointer", + className, + )} + {...props} + > + {/* <span className="text-[12px] font-normal uppercase">CART</span>*/} + <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> + <circle cx="9" cy="21" r="1"/> + <circle cx="20" cy="21" r="1"/> + <path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"/> + </svg> +