first commit

2025-02-12 23:25:43 -05:00
commit d8c7ec4866
1400 changed files with 90826 additions and 0 deletions
@@ -0,0 +1,106 @@
+
+'use client'
+
+
+import React, { useEffect, useState } from "react";
+import Link from "next/link";
+import { Tab, Tabs, TabList, TabPanel } from "react-tabs";
+import { Gallery, Item } from "react-photoswipe-gallery";
+import { AllPortfolioFour } from "@/data/portfolios";
+import Image from "next/image";
+const TabListContent = ["All", "Development", "Plugin", "Design", "Branding"];
+
+
+
+
+
+const PortfolioTwo = () => {
+  const [currentCategory, setCurrentCategory] = useState('All')
+  const [fitteredItems, setFitteredItems] = useState([])
+  useEffect(() => {
+    if (currentCategory ==  'All') {
+      setFitteredItems(AllPortfolioFour)
+      
+    } else {
+      setFitteredItems(AllPortfolioFour.filter(elm=>elm.meta.split(' ').join('').split(',').includes(currentCategory)))
+      
+    }
+    
+   
+  
+  }, [currentCategory])
+  
+  return (
+    <Gallery>
+      <Tabs className="portfolio-container">
+        <div className="controls po-control-one text-center mb-90 md-mb-50 mt-90 md-mt-60">
+          <TabList className="d-flex flex-wrap justify-content-center">
+          {TabListContent.map((tab, i) => (
+              <Tab onClick={()=>setCurrentCategory(tab)}  key={i}>
+                <button type="button" className="control">
+                  {tab}
+                </button>
+              </Tab>
+            ))}
+          </TabList>
+        </div>
+        {/* End pc-control-one */}
+
+        <div>
+          <div className="mixitUp-container  gutter-space-one d-flex flex-wrap">
+            {fitteredItems.map((val, i) => (
+              <div
+                className={`mix ${val.imgClass}`}
+                key={i}
+                data-aos="fade-right"
+                data-aos-delay={val.dalayAnimation}
+              >
+                <div className="portfolio-block-two position-relative">
+                  <div className="d-flex align-items-center justify-content-center">
+                    <Image width={990} height={890} style={{width:'100%',height:'fit-content'}}    
+                      src={val.img}
+                      alt={val.meta}
+                      className="w-100 h-100 tran4s img-meta"
+                    />
+                    <Item
+                      original={val.img}
+                      thumbnail={val.img}
+                      width={val.width}
+                      height={val.height}
+                    >
+                      {({ ref, open }) => (
+                        <div
+                          className="fancybox"
+                          role="button"
+                          ref={ref}
+                          onClick={open}
+                        >
+                          <i
+                            className="fa fa-arrows-alt"
+                            aria-hidden="true"
+                          ></i>
+                        </div>
+                      )}
+                    </Item>
+                  </div>
+                  <div className="hover-content">
+                    <h3>
+                      <Link      href={`/portfolios/${val.id}`}>{val.title}</Link>
+                    </h3>
+                    <div className="tag">{val.meta}</div>
+                  </div>
+                  {/* /.hover-content */}
+                </div>
+                {/* /.portfolio-block-two */}
+              </div>
+            ))}
+          </div>
+          {/* single mixitUp-container */}
+        </div>
+       
+      </Tabs>
+    </Gallery>
+  );
+};
+
+export default PortfolioTwo;