Skip to content

Commit

Permalink
Minor changes for some components in day21 challenge
Browse files Browse the repository at this point in the history
  • Loading branch information
@fwedwicc
fwedwicc committed Dec 4, 2024
1 parent 5153e9f commit 29e499b
Showing 1 changed file with 80 additions and 1 deletion.
81 changes: 80 additions & 1 deletion src/pages/Day21.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -122,9 +122,88 @@ const Day21 = () => {
<p className='text-neutral-400 leading-none'>Lorem ipsum dolor</p>
</div>
</div>
{/* */}
<div className='grid grid-cols-2 mt-6 gap-3'>
{[
{
icon: "M2.25 15a4.5 4.5 0 0 0 4.5 4.5H18a3.75 3.75 0 0 0 1.332-7.257 3 3 0 0 0-3.758-3.848 5.25 5.25 0 0 0-10.233 2.33A4.502 4.502 0 0 0 2.25 15Z",
value: "23C",
label: "Lorem ipsum dolor"
},
{
icon: "M2.25 15a4.5 4.5 0 0 0 4.5 4.5H18a3.75 3.75 0 0 0 1.332-7.257 3 3 0 0 0-3.758-3.848 5.25 5.25 0 0 0-10.233 2.33A4.502 4.502 0 0 0 2.25 15Z",
value: "23C",
label: "Lorem ipsum dolor"
},
{
icon: "M2.25 15a4.5 4.5 0 0 0 4.5 4.5H18a3.75 3.75 0 0 0 1.332-7.257 3 3 0 0 0-3.758-3.848 5.25 5.25 0 0 0-10.233 2.33A4.502 4.502 0 0 0 2.25 15Z",
value: "23C",
label: "Lorem ipsum dolor"
},
{
icon: "M2.25 15a4.5 4.5 0 0 0 4.5 4.5H18a3.75 3.75 0 0 0 1.332-7.257 3 3 0 0 0-3.758-3.848 5.25 5.25 0 0 0-10.233 2.33A4.502 4.502 0 0 0 2.25 15Z",
value: "23C",
label: "Lorem ipsum dolor"
}
].map((item, index) => (
<div className='flex items-center gap-3' key={index}>
<div className='inline-flex items-center justify-center p-2 border border-green-800 rounded-full text-green-500 bg-green-700/30'>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="size-5">
<path strokeLinecap="round" strokeLinejoin="round" d={item.icon} />
</svg>
</div>
<div>
<h3 className='text-neutral-200 font-semibold'>{item.value}</h3>
<p className='text-neutral-400 leading-none text-sm'>{item.label}</p>
</div>
</div>
))}
</div>
</div>
<div className='border bg-neutral-700/40 border border-neutral-700 bg-neutral-700/30 rounded-xl p-3'>
<p className='text-white leading-relaxed'>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Porro animi provident facilis, itaque, quisquam repudiandae impedit placeat fugit dolor possimus aperiam, cumque distinctio! Delectus quaerat repellat necessitatibus hic. Nemo, harum!</p>
<div className='flex items-center gap-3'>
<div className='inline-flex items-center justify-center p-3 border border-green-800 rounded-full text-green-500 bg-green-700/30'>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="size-8">
<path strokeLinecap="round" strokeLinejoin="round" d="M2.25 15a4.5 4.5 0 0 0 4.5 4.5H18a3.75 3.75 0 0 0 1.332-7.257 3 3 0 0 0-3.758-3.848 5.25 5.25 0 0 0-10.233 2.33A4.502 4.502 0 0 0 2.25 15Z" />
</svg>
</div>
<div>
<h3 className='text-neutral-200 text-2xl font-semibold'>23 C</h3>
<p className='text-neutral-400 leading-none'>Lorem ipsum dolor</p>
</div>
</div>
{/* */}
<div className='grid grid-cols-2 mt-6 gap-3'>
{[
{
icon: "M2.25 15a4.5 4.5 0 0 0 4.5 4.5H18a3.75 3.75 0 0 0 1.332-7.257 3 3 0 0 0-3.758-3.848 5.25 5.25 0 0 0-10.233 2.33A4.502 4.502 0 0 0 2.25 15Z",
value: "23C",
label: "Lorem ipsum dolor"
},
{
icon: "M2.25 15a4.5 4.5 0 0 0 4.5 4.5H18a3.75 3.75 0 0 0 1.332-7.257 3 3 0 0 0-3.758-3.848 5.25 5.25 0 0 0-10.233 2.33A4.502 4.502 0 0 0 2.25 15Z",
value: "23C",
label: "Lorem ipsum dolor"
},
{
icon: "M2.25 15a4.5 4.5 0 0 0 4.5 4.5H18a3.75 3.75 0 0 0 1.332-7.257 3 3 0 0 0-3.758-3.848 5.25 5.25 0 0 0-10.233 2.33A4.502 4.502 0 0 0 2.25 15Z",
value: "23C",
label: "Lorem ipsum dolor"
}
].map((item, index) => (
<div className='flex items-center gap-3' key={index}>
<div className='inline-flex items-center justify-center p-2 border border-green-800 rounded-full text-green-500 bg-green-700/30'>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="size-5">
<path strokeLinecap="round" strokeLinejoin="round" d={item.icon} />
</svg>
</div>
<div>
<h3 className='text-neutral-200 font-semibold'>{item.value}</h3>
<p className='text-neutral-400 leading-none text-sm'>{item.label}</p>
</div>
</div>
))}
</div>
</div>
<div className='col-span-2 border bg-neutral-700/40 border border-neutral-700 bg-neutral-700/30 rounded-xl p-3'>
<p className='text-white leading-relaxed'>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Porro animi provident facilis, itaque, quisquam repudiandae impedit placeat fugit dolor possimus aperiam, cumque distinctio! Delectus quaerat repellat necessitatibus hic. Nemo, harum!</p>
Expand Down

0 comments on commit 29e499b

Please sign in to comment.