300 lines
14 KiB
JavaScript
300 lines
14 KiB
JavaScript
"use client";
|
|
import Image from "next/image";
|
|
import CommentBox from "./CommentBox";
|
|
import { useState } from "react";
|
|
export default function ShopDescription() {
|
|
const [activeTab, setActiveTab] = useState(1);
|
|
return (
|
|
<div className="tf-container">
|
|
<div className="widget-tabs style-1">
|
|
<ul className="widget-menu-tab overflow-x-auto">
|
|
<li
|
|
className={`item-title h5 ${activeTab == 1 ? "active" : ""}`}
|
|
onClick={() => setActiveTab(1)}
|
|
>
|
|
<span className="text-whitespace">Description</span>
|
|
</li>
|
|
<li
|
|
className={`item-title h5 ${activeTab == 2 ? "active" : ""}`}
|
|
onClick={() => setActiveTab(2)}
|
|
>
|
|
<span className="text-whitespace">Reviews (3)</span>
|
|
</li>
|
|
<li
|
|
className={`item-title h5 ${activeTab == 3 ? "active" : ""}`}
|
|
onClick={() => setActiveTab(3)}
|
|
>
|
|
<span className="text-whitespace">Additinal Information</span>
|
|
</li>
|
|
</ul>
|
|
<div className="widget-content-tab">
|
|
<div
|
|
className={`widget-content-inner ${
|
|
activeTab == 1 ? "active" : ""
|
|
} `}
|
|
>
|
|
<div className="tab-description d-grid gap_29">
|
|
<p className="text-body-1 text_mono-gray-8">
|
|
The 24-inch iMac M3 2023 has an impressively slim design.
|
|
Despite being slim, the iMac is also equipped with a diverse
|
|
connection port system such as Thunderbolt. In terms of color,
|
|
the 24-inch iMac M3 2023 impresses with seven different color
|
|
versions for users to choose from: Blue, Green, Pink, Silver,
|
|
Yellow, Orange and Purple.
|
|
</p>
|
|
<p className="text-body-1 text_mono-gray-8">
|
|
The iMac M3 2023 is equipped with a 24-inch screen with thin
|
|
screen borders for a wide display space. The screen is equipped
|
|
with an impressive high resolution of upto 4.5K and a brightness
|
|
of 500 nits for super sharp display. The device screen is also
|
|
equipped with a wide color gamut P3, so the details displayed on
|
|
the screen are extremely vivid
|
|
</p>
|
|
<p className="text-body-1 text_mono-gray-8">
|
|
The 24-inch iMac M3 2023 is equipped with the best camera system
|
|
compared to previous generations of iMac introduced by Apple.
|
|
Along with that is an integrated image processor, a processor
|
|
with the ability to analyze and improve pixels at 1 trillion
|
|
calculations per second. Thanks to that, the 24-inch iMac M3
|
|
2023 brings impressive video recording capabilities. In addition
|
|
to the sharp camera, the 24-inch iMac M3 2023 is also equipped
|
|
with a microphone that supports effective sound recording.
|
|
Thanks to that, users can record podcasts or livestreams without
|
|
the need for supporting equipment. In particular, the microphone
|
|
on the device is also designed with echo reduction and
|
|
beamforming technology to effectively reduce ambient noise
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div
|
|
className={`widget-content-inner ${
|
|
activeTab == 2 ? "active" : ""
|
|
} `}
|
|
>
|
|
<div className="tab-reviews write-cancel-review-wrap">
|
|
<div className="tab-reviews-heading">
|
|
<div className="top">
|
|
<div className="text-center">
|
|
<div className="number text-display">4.9</div>
|
|
<div className="ratings justify-content-center">
|
|
<i className="icon icon-star-solid" />
|
|
<i className="icon icon-star-solid" />
|
|
<i className="icon icon-star-solid" />
|
|
<i className="icon icon-star-solid" />
|
|
<i className="icon icon-star-solid" />
|
|
</div>
|
|
<p className="text_mono-gray-8">(168 Ratings)</p>
|
|
</div>
|
|
<div className="rating-score">
|
|
<div className="item">
|
|
<div className="number-1 text-body-2 text_mono-gray">
|
|
5
|
|
</div>
|
|
<i className="icon icon-star-solid" />
|
|
<div className="line-bg">
|
|
<div style={{ width: "94.67%" }} />
|
|
</div>
|
|
<div className="number-2 text-body-2 text_mono-gray">
|
|
59
|
|
</div>
|
|
</div>
|
|
<div className="item">
|
|
<div className="number-1 text-body-2 text_mono-gray">
|
|
4
|
|
</div>
|
|
<i className="icon icon-star-solid" />
|
|
<div className="line-bg">
|
|
<div style={{ width: "60%" }} />
|
|
</div>
|
|
<div className="number-2 text-body-2 text_mono-gray">
|
|
46
|
|
</div>
|
|
</div>
|
|
<div className="item">
|
|
<div className="number-1 text-body-2 text_mono-gray">
|
|
3
|
|
</div>
|
|
<i className="icon icon-star-solid" />
|
|
<div className="line-bg">
|
|
<div style={{ width: "0%" }} />
|
|
</div>
|
|
<div className="number-2 text-body-2 text_mono-gray">
|
|
0
|
|
</div>
|
|
</div>
|
|
<div className="item">
|
|
<div className="number-1 text-body-2 text_mono-gray">
|
|
2
|
|
</div>
|
|
<i className="icon icon-star-solid" />
|
|
<div className="line-bg">
|
|
<div style={{ width: "0%" }} />
|
|
</div>
|
|
<div className="number-2 text-body-2 text_mono-gray">
|
|
0
|
|
</div>
|
|
</div>
|
|
<div className="item">
|
|
<div className="number-1 text-body-2 text_mono-gray">
|
|
1
|
|
</div>
|
|
<i className="icon icon-star-solid" />
|
|
<div className="line-bg">
|
|
<div style={{ width: "0%" }} />
|
|
</div>
|
|
<div className="number-2 text-body-2 text_mono-gray">
|
|
0
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="reply-comment style-2">
|
|
<div className="reply-comment-heading mb_82">
|
|
<h2>3 Comments</h2>
|
|
</div>
|
|
<div className="wrap-comment">
|
|
<div className="reply-comment-wrap">
|
|
<div className="reply-comment-item">
|
|
<div className="heading mb_15">
|
|
<div className="box-user">
|
|
<div className="avatar">
|
|
<Image
|
|
alt="avatar"
|
|
src="/images/avatar/avatar-2.jpg"
|
|
width={119}
|
|
height={119}
|
|
/>
|
|
</div>
|
|
<div className="content">
|
|
<h5>Kobbie Dao</h5>
|
|
<p className="text-body-1 text_mono-gray-5">
|
|
September 30, 2023 / 9:30 AM
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<a href="#" className="tf-btn btn-primary2">
|
|
<span>Reply</span>
|
|
<span className="bg-effect" />
|
|
</a>
|
|
</div>
|
|
<div className="comment text-body-1 text_black">
|
|
As a web designer myself, I couldn't agree more with the
|
|
sentiment that great design should be felt and
|
|
remembered long after the screen is turned off.
|
|
</div>
|
|
</div>
|
|
<div className="reply-comment-item type-reply">
|
|
<div className="heading mb_35">
|
|
<div className="box-user">
|
|
<div className="avatar">
|
|
<Image
|
|
alt="avatar"
|
|
src="/images/avatar/avatar-3.jpg"
|
|
width={119}
|
|
height={119}
|
|
/>
|
|
</div>
|
|
<div className="content">
|
|
<h5 className="text_black">Zalatan</h5>
|
|
<p className="text-body-1 text_mono-gray-5">
|
|
September 30, 2023 / 9:30 AM
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<a href="#" className="tf-btn btn-primary2">
|
|
<span>Reply</span>
|
|
<span className="bg-effect" />
|
|
</a>
|
|
</div>
|
|
<div className="comment text-body-1 text_black">
|
|
Aute mi ut suspendisse velit leo, vel risus ac. Amet dui
|
|
dignissim fermentum malesuada auctor volutpat,
|
|
vestibulum ipsum nulla.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="reply-comment-wrap">
|
|
<div className="reply-comment-item">
|
|
<div className="heading mb_15">
|
|
<div className="box-user">
|
|
<div className="avatar">
|
|
<Image
|
|
alt="avatar"
|
|
src="/images/avatar/avatar-4.jpg"
|
|
width={119}
|
|
height={119}
|
|
/>
|
|
</div>
|
|
<div className="content">
|
|
<h5 className="text_black">Bellingham</h5>
|
|
<p className="text-body-1 text_mono-gray-5">
|
|
September 30, 2023 / 9:30 AM
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<a href="#" className="tf-btn btn-primary2">
|
|
<span>Reply</span>
|
|
<span className="bg-effect" />
|
|
</a>
|
|
</div>
|
|
<div className="comment text-body-1 text_black">
|
|
Aute mi ut suspendisse velit leo, vel risus ac. Amet dui
|
|
dignissim fermentum malesuada auctor volutpat,
|
|
vestibulum ipsum nulla.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="leave-comment">
|
|
<div className="heading-title mb_56">
|
|
<h2 className="mb_18">Leave a Reply</h2>
|
|
<p className="text-body-1 text_mono-gray letter-spacing-1">
|
|
Your email address will not be published. Require field
|
|
are marked <span>*</span>
|
|
</p>
|
|
</div>
|
|
<CommentBox />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div
|
|
className={`widget-content-inner ${
|
|
activeTab == 3 ? "active" : ""
|
|
} `}
|
|
>
|
|
<div className="tab-description d-grid gap_12">
|
|
<p className="text-body-1 text_mono-gray-8">
|
|
With the 2024 version, the Macbook Air is upgraded to a
|
|
15.3-inch screen with Liquid Retina resolution (2880 x 1864)
|
|
that reproduces detailed image quality, millions of pixels and a
|
|
wide spectrum P3 color range of up to 1 billion colors. Allows
|
|
you to perfectly perform graphic design tasks with strict color
|
|
requirements.
|
|
</p>
|
|
<p className="text-body-1 text_mono-gray-8">
|
|
500 nits brightness with True Tone Technology regulates vision
|
|
and vision extremely well, quickly adapting to ambient light
|
|
conditions to display the sharpest content from text to video.
|
|
</p>
|
|
<p className="text-body-1 text_mono-gray-8">
|
|
MacBook Air 15 inch M3 2024 8-core CPU - Screen
|
|
</p>
|
|
<p className="text-body-1 text_mono-gray-8">
|
|
Multi-dimensional surround sound system Dolby Atmos, Spatial
|
|
Audio combined with a high-quality linear speaker system brings
|
|
a complete and realistic entertainment experience with vivid
|
|
sound quality, clear bass, and sound amplification. Loud allows
|
|
you to immerse yourself in melodious music or vivid movies,
|
|
detailed sound is also extremely beneficial when participating
|
|
in video post-production editing and sound effects.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|