248 lines
12 KiB
JavaScript
248 lines
12 KiB
JavaScript
"use client";
|
|
import { posts3 } from "@/data/blogs";
|
|
import { socialLinks } from "@/data/socials";
|
|
import Image from "next/image";
|
|
import Link from "next/link";
|
|
import React from "react";
|
|
|
|
export default function Sidebar() {
|
|
return (
|
|
<aside className="xl:w-4/12 lg:w-4/12 w-full flex-[0_0_auto] xl:!px-[35px] lg:!px-[20px] !px-[15px] max-w-full sidebar !mt-8 xl:!mt-6 lg:!mt-6">
|
|
<div className="widget">
|
|
<form
|
|
onSubmit={(e) => e.preventDefault()}
|
|
className="search-form relative before:content-['\eca5'] before:block before:absolute before:-translate-y-2/4 before:text-[0.9rem] before:!text-[#959ca9] before:z-[9] before:right-3 before:top-2/4 font-Unicons"
|
|
>
|
|
<div className="form-floating relative !mb-0">
|
|
<input
|
|
id="search-form"
|
|
type="text"
|
|
className="form-control relative block w-full text-[.75rem] font-medium !text-[#60697b] bg-[#fefefe] bg-clip-padding border shadow-[0_0_1.25rem_rgba(30,34,40,0.04)] rounded-[0.4rem] border-solid border-[rgba(8,60,130,0.07)] transition-[border-color] duration-[0.15s] ease-in-out focus:shadow-[0_0_1.25rem_rgba(30,34,40,0.04),unset] focus-visible:!border-[rgba(63,120,224,0.5)] placeholder:!text-[#959ca9] placeholder:opacity-100 m-0 !pr-9 p-[.6rem_1rem] h-[calc(2.5rem_+_2px)] min-h-[calc(2.5rem_+_2px)] !leading-[1.25]"
|
|
placeholder=""
|
|
/>
|
|
<label
|
|
htmlFor="search-form"
|
|
className="inline-block !text-[#959ca9] text-[.75rem] absolute z-[2] h-full overflow-hidden text-start text-ellipsis whitespace-nowrap pointer-events-none border origin-[0_0] px-4 py-[0.6rem] border-solid border-transparent left-0 top-0 font-Manrope"
|
|
>
|
|
Search
|
|
</label>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
{/* /.widget */}
|
|
<div className="widget !mt-[40px]">
|
|
<h4 className="widget-title !mb-3">About Us</h4>
|
|
<p>
|
|
Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum
|
|
nibh, ut fermentum. Nulla vitae elit libero, a pharetra augue. Donec
|
|
id elit non mi porta gravida at eget metus.
|
|
</p>
|
|
<nav className="nav social">
|
|
{socialLinks.map((elm, i) => (
|
|
<a
|
|
key={i}
|
|
className="text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 motion-reduce:transition-none hover:translate-y-[-0.15rem] m-[0_.7rem_0_0]"
|
|
href={elm.href}
|
|
>
|
|
<i
|
|
className={`text-[1rem] !text-[${elm.color}] before:content-[${elm.unicode}] uil ${elm.icon}`}
|
|
/>
|
|
</a>
|
|
))}
|
|
</nav>
|
|
{/* /.social */}
|
|
</div>
|
|
{/* /.widget */}
|
|
<div className="widget !mt-[40px]">
|
|
<h4 className="widget-title !mb-3">Popular Posts</h4>
|
|
<ul className="m-0 p-0 after:content-[''] after:block after:h-0 after:clear-both after:invisible">
|
|
{posts3.map((post, i) => (
|
|
<li
|
|
key={post.id}
|
|
className={`clear-both block overflow-hidden ${
|
|
i !== 0 ? "!mt-4" : ""
|
|
}`}
|
|
>
|
|
<figure className="!rounded-[.4rem] float-left w-14 !h-[4.5rem]">
|
|
<Link href={`/blog-post`}>
|
|
<Image
|
|
className="!rounded-[.4rem]"
|
|
alt="image"
|
|
src={post.image}
|
|
width={100}
|
|
height={100}
|
|
/>
|
|
</Link>
|
|
</figure>
|
|
<div className="!relative !ml-[4.25rem] !mb-0">
|
|
<h6 className="!mb-2">
|
|
<Link
|
|
className="!text-[#343f52] hover:!text-[#3f78e0]"
|
|
href={`/blog-post`}
|
|
>
|
|
{post.title}
|
|
</Link>
|
|
</h6>
|
|
<ul className="!text-[0.7rem] !text-[#aab0bc] m-0 p-0 list-none">
|
|
<li className="post-date inline-block">
|
|
<i className="uil uil-calendar-alt pr-[0.2rem] align-[-.05rem] before:content-['\e9ba']" />
|
|
<span>{post.date}</span>
|
|
</li>
|
|
<li className="post-comments inline-block before:content-[''] before:inline-block before:w-[0.2rem] before:h-[0.2rem] before:opacity-50 before:m-[0_.6rem_0] before:rounded-[100%] before:align-[.15rem] before:bg-[#aab0bc]">
|
|
<a
|
|
className="!text-[#aab0bc] hover:!text-[#3f78e0] hover:!border-[#3f78e0]"
|
|
href="#"
|
|
>
|
|
<i className="uil uil-comment pr-[0.2rem] align-[-.05rem] before:content-['\ea54']" />
|
|
{post.comments}
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
{/* /.image-list */}
|
|
</div>
|
|
{/* /.widget */}
|
|
<div className="widget !mt-[40px]">
|
|
<h4 className="widget-title !mb-3">Categories</h4>
|
|
<ul className="pl-0 list-none bullet-primary !text-inherit">
|
|
<li className="relative !pl-[1rem] before:absolute before:top-[-0.15rem] before:text-[1rem] before:content-['\2022'] before:left-0 before:font-SansSerif">
|
|
<a className="!text-[#60697b] hover:!text-[#3f78e0]" href="#">
|
|
Teamwork (21)
|
|
</a>
|
|
</li>
|
|
<li className="relative !pl-[1rem] before:absolute before:top-[-0.15rem] before:text-[1rem] before:content-['\2022'] before:left-0 before:font-SansSerif !mt-[.35rem]">
|
|
<a className="!text-[#60697b] hover:!text-[#3f78e0]" href="#">
|
|
Ideas (19)
|
|
</a>
|
|
</li>
|
|
<li className="relative !pl-[1rem] before:absolute before:top-[-0.15rem] before:text-[1rem] before:content-['\2022'] before:left-0 before:font-SansSerif !mt-[.35rem]">
|
|
<a className="!text-[#60697b] hover:!text-[#3f78e0]" href="#">
|
|
Workspace (16)
|
|
</a>
|
|
</li>
|
|
<li className="relative !pl-[1rem] before:absolute before:top-[-0.15rem] before:text-[1rem] before:content-['\2022'] before:left-0 before:font-SansSerif !mt-[.35rem]">
|
|
<a className="!text-[#60697b] hover:!text-[#3f78e0]" href="#">
|
|
Coding (7)
|
|
</a>
|
|
</li>
|
|
<li className="relative !pl-[1rem] before:absolute before:top-[-0.15rem] before:text-[1rem] before:content-['\2022'] before:left-0 before:font-SansSerif !mt-[.35rem]">
|
|
<a className="!text-[#60697b] hover:!text-[#3f78e0]" href="#">
|
|
Meeting (12)
|
|
</a>
|
|
</li>
|
|
<li className="relative !pl-[1rem] before:absolute before:top-[-0.15rem] before:text-[1rem] before:content-['\2022'] before:left-0 before:font-SansSerif !mt-[.35rem]">
|
|
<a className="!text-[#60697b] hover:!text-[#3f78e0]" href="#">
|
|
Business Tips (14)
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
{/* /.widget */}
|
|
<div className="widget !mt-[40px]">
|
|
<h4 className="widget-title !mb-3">Tags</h4>
|
|
<ul className="pl-0 list-none tag-list">
|
|
<li className="!mt-0 !mb-[0.45rem] !mr-[0.2rem] inline-block">
|
|
<a
|
|
href="#"
|
|
className="btn btn-soft-ash btn-sm !rounded-[50rem] flex items-center hover:translate-y-[-0.15rem] hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,.05)] before:not-italic before:content-['#'] before:font-normal before:!pr-[0.2rem]"
|
|
>
|
|
Still Life
|
|
</a>
|
|
</li>
|
|
<li className="!mt-0 !mb-[0.45rem] !mr-[0.2rem] inline-block">
|
|
<a
|
|
href="#"
|
|
className="btn btn-soft-ash btn-sm !rounded-[50rem] flex items-center hover:translate-y-[-0.15rem] hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,.05)] before:not-italic before:content-['#'] before:font-normal before:!pr-[0.2rem]"
|
|
>
|
|
Urban
|
|
</a>
|
|
</li>
|
|
<li className="!mt-0 !mb-[0.45rem] !mr-[0.2rem] inline-block">
|
|
<a
|
|
href="#"
|
|
className="btn btn-soft-ash btn-sm !rounded-[50rem] flex items-center hover:translate-y-[-0.15rem] hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,.05)] before:not-italic before:content-['#'] before:font-normal before:!pr-[0.2rem]"
|
|
>
|
|
Nature
|
|
</a>
|
|
</li>
|
|
<li className="!mt-0 !mb-[0.45rem] !mr-[0.2rem] inline-block">
|
|
<a
|
|
href="#"
|
|
className="btn btn-soft-ash btn-sm !rounded-[50rem] flex items-center hover:translate-y-[-0.15rem] hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,.05)] before:not-italic before:content-['#'] before:font-normal before:!pr-[0.2rem]"
|
|
>
|
|
Landscape
|
|
</a>
|
|
</li>
|
|
<li className="!mt-0 !mb-[0.45rem] !mr-[0.2rem] inline-block">
|
|
<a
|
|
href="#"
|
|
className="btn btn-soft-ash btn-sm !rounded-[50rem] flex items-center hover:translate-y-[-0.15rem] hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,.05)] before:not-italic before:content-['#'] before:font-normal before:!pr-[0.2rem]"
|
|
>
|
|
Macro
|
|
</a>
|
|
</li>
|
|
<li className="!mt-0 !mb-[0.45rem] !mr-[0.2rem] inline-block">
|
|
<a
|
|
href="#"
|
|
className="btn btn-soft-ash btn-sm !rounded-[50rem] flex items-center hover:translate-y-[-0.15rem] hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,.05)] before:not-italic before:content-['#'] before:font-normal before:!pr-[0.2rem]"
|
|
>
|
|
Fun
|
|
</a>
|
|
</li>
|
|
<li className="!mt-0 !mb-[0.45rem] !mr-[0.2rem] inline-block">
|
|
<a
|
|
href="#"
|
|
className="btn btn-soft-ash btn-sm !rounded-[50rem] flex items-center hover:translate-y-[-0.15rem] hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,.05)] before:not-italic before:content-['#'] before:font-normal before:!pr-[0.2rem]"
|
|
>
|
|
Workshop
|
|
</a>
|
|
</li>
|
|
<li className="!mt-0 !mb-[0.45rem] !mr-[0.2rem] inline-block">
|
|
<a
|
|
href="#"
|
|
className="btn btn-soft-ash btn-sm !rounded-[50rem] flex items-center hover:translate-y-[-0.15rem] hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,.05)] before:not-italic before:content-['#'] before:font-normal before:!pr-[0.2rem]"
|
|
>
|
|
Photography
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
{/* /.widget */}
|
|
<div className="widget !mt-[40px]">
|
|
<h4 className="widget-title !mb-3">Archive</h4>
|
|
<ul className="pl-0 list-none bullet-primary !text-inherit">
|
|
<li className="relative !pl-[1rem] before:absolute before:top-[-0.15rem] before:text-[1rem] before:content-['\2022'] before:left-0 before:font-SansSerif">
|
|
<a className="!text-[#60697b] hover:!text-[#3f78e0]" href="#">
|
|
February 2019
|
|
</a>
|
|
</li>
|
|
<li className="relative !pl-[1rem] before:absolute before:top-[-0.15rem] before:text-[1rem] before:content-['\2022'] before:left-0 before:font-SansSerif !mt-[.35rem]">
|
|
<a className="!text-[#60697b] hover:!text-[#3f78e0]" href="#">
|
|
January 2019
|
|
</a>
|
|
</li>
|
|
<li className="relative !pl-[1rem] before:absolute before:top-[-0.15rem] before:text-[1rem] before:content-['\2022'] before:left-0 before:font-SansSerif !mt-[.35rem]">
|
|
<a className="!text-[#60697b] hover:!text-[#3f78e0]" href="#">
|
|
December 2018
|
|
</a>
|
|
</li>
|
|
<li className="relative !pl-[1rem] before:absolute before:top-[-0.15rem] before:text-[1rem] before:content-['\2022'] before:left-0 before:font-SansSerif !mt-[.35rem]">
|
|
<a className="!text-[#60697b] hover:!text-[#3f78e0]" href="#">
|
|
November 2018
|
|
</a>
|
|
</li>
|
|
<li className="relative !pl-[1rem] before:absolute before:top-[-0.15rem] before:text-[1rem] before:content-['\2022'] before:left-0 before:font-SansSerif !mt-[.35rem]">
|
|
<a className="!text-[#60697b] hover:!text-[#3f78e0]" href="#">
|
|
October 2018
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
{/* /.widget */}
|
|
</aside>
|
|
);
|
|
}
|