Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Added light/dark mode #268

Merged
merged 10 commits into from
Jun 21, 2024
+975 −913
Merged

Added light/dark mode #268

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
8c30557
first
manikumarreddyu Jun 20, 2024
bc857e3
Update App.tsx
manikumarreddyu Jun 20, 2024
557df15
Update App.tsx
manikumarreddyu Jun 20, 2024
c4d7af8
Update HomePagePosts.tsx
manikumarreddyu Jun 20, 2024
6f9c88a
editpost ,homepageposts,posts
manikumarreddyu Jun 20, 2024
2c3fedd
Completed all
manikumarreddyu Jun 20, 2024
199c4a8
last
manikumarreddyu Jun 20, 2024
df553b6
completed all
manikumarreddyu Jun 20, 2024
e089fb4
Update App.tsx
manikumarreddyu Jun 21, 2024
334a95f
loader updated
manikumarreddyu Jun 21, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
207 changes: 106 additions & 101 deletions frontend/src/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,120 +25,125 @@ import LeaderBoard from "./pages/LeaderBoard";
import CustomizeWithAi from "./pages/CustomizeWithAi";
import ScrollToTopWhenRouteChanges from "./components/ScrollToTopWhenRouteChanges";
import './i18n';
import CodeEditor from "./pages/CodeEditor";
import ShowProfile from "./pages/ShowProfile";
import { Tooltip } from 'react-tooltip'
import EditPost from "./pages/EditPost";
import useTheme from './hooks/useTheme';
import CodeEditor from "./pages/CodeEditor";
// import axios from "axios";
// axios.defaults.baseURL = "http://localhost:3001/";

function App() {

function App() {
const { theme, toggleTheme } = useTheme();
return (
<BrowserRouter>
<RecoilRoot>
<React.Suspense fallback={<Loader />}>
<Navbar />

<GoTop/>
<ScrollToTopWhenRouteChanges/>
<div className="min-h-[80vh] mt-12 pt-12">
<Routes>
<Route path="/app" element={<Home />} />
<Route path="/app/posts/:id" element={<Post />} />
<Route path="/app/posts" element={<Posts />} />
<Route path="/app/profile/:id" element={<ShowProfile/>} />
<Route
path="/app/signin"
element={
<NonAuthenticatedRoute>
<Signin />
</NonAuthenticatedRoute>
}
/>
<Route
path="/app/signup"
element={
<NonAuthenticatedRoute>
<Signup />
</NonAuthenticatedRoute>
}
/>
<Route
path="/app/new-post"
element={
<AuthenticatedRoute>
<NewPost />
</AuthenticatedRoute>
}
/>
<Route
path="/app/posts/edit/:id"
element={
<AuthenticatedRoute>
<EditPost />
</AuthenticatedRoute>
}
/>
<Route
path="/app/profile"
element={
<AuthenticatedRoute>
<Profile />
</AuthenticatedRoute>
}
/>
<Route
path="/app/fav"
element={
<AuthenticatedRoute>
<Favorite />
</AuthenticatedRoute>
}
/>
<Route
path="/app/customize-with-ai/:id"
element={
<AuthenticatedRoute>
<CustomizeWithAi />
</AuthenticatedRoute>
}
/>
<Route
path="/app/leaderboard"
element={
<LeaderBoard />
}
/>
<Route
path="/app/code"
element={
<AuthenticatedRoute>
<CodeEditor />
</AuthenticatedRoute>
}
/>
<Route
path="/app/contact-us"
element={
<ContactUs />
}
/>
<Route
path="/app/about"
element={
<About />
}
/>
<Route
path="/app/policy"
element={
<Policy />
}
/>
<Route path="*" element={<PageNotFound/>} />
</Routes>
<div style={{ backgroundColor: theme === 'light' ? '#fff' : '#000435', color: theme === 'light' ? '#000435' : '#fff'}}>
<Navbar theme={theme} toggleTheme={toggleTheme} />
<ScrollToTopWhenRouteChanges/>
<div className="min-h-[80vh] mt-12 pt-12">
<Routes>
<Route path="/app" element={<Home />} />
<Route path="/app/posts/:id" element={<Post />} />
<Route path="/app/posts" element={<Posts />} />
<Route path="/app/profile/:id" element={<ShowProfile/>} />
<Route
path="/app/signin"
element={
<NonAuthenticatedRoute>
<Signin />
</NonAuthenticatedRoute>
}
/>
<Route
path="/app/signup"
element={
<NonAuthenticatedRoute>
<Signup />
</NonAuthenticatedRoute>
}
/>
<Route
path="/app/new-post"
element={
<AuthenticatedRoute>
<NewPost />
</AuthenticatedRoute>
}
/>
<Route
path="/app/posts/edit/:id"
element={
<AuthenticatedRoute>
<EditPost />
</AuthenticatedRoute>
}
/>
<Route
path="/app/profile"
element={
<AuthenticatedRoute>
<Profile />
</AuthenticatedRoute>
}
/>
<Route
path="/app/fav"
element={
<AuthenticatedRoute>
<Favorite />
</AuthenticatedRoute>
}
/>
<Route
path="/app/customize-with-ai/:id"
element={
<AuthenticatedRoute>
<CustomizeWithAi />
</AuthenticatedRoute>
}
/>
<Route
path="/app/leaderboard"
element={
<LeaderBoard />
}
/>
<Route
path="/app/code"
element={
<AuthenticatedRoute>
<CodeEditor />
</AuthenticatedRoute>
}
/>
<Route
path="/app/contact-us"
element={
<ContactUs />
}
/>
<Route
path="/app/about"
element={
<About />
}
/>
<Route
path="/app/policy"
element={
<Policy />
}
/>
<Route path="*" element={<PageNotFound/>} />
</Routes>
</div>
<Footer />
</div>
<Footer />
</React.Suspense>
</RecoilRoot>
<Tooltip id="my-tooltip" place='right' style={{backgroundColor:"#00AAFF",color:'#fff',fontSize:'15px'}} />
Expand Down
17 changes: 8 additions & 9 deletions frontend/src/components/FAQ.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,26 +42,26 @@ const FAQ: React.FC = () => {
};

return (
<section className="bg-[#000435] mb-20 text-white" style={{ backgroundImage: `url(${bgHero})`, backgroundSize: 'cover', backgroundPosition: 'center' }}>
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8" >
<h2 className="text-3xl md:text-4xl mb-14 font-extrabold text-center text-white">🤔 Frequently Asked Questions 🤔</h2>
<section className=" text-[#000435] bg-white dark:text-white dark:bg-[#000435]" >
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-[#000435] bg-white dark:text-white dark:bg-[#000435]" style={{ backgroundImage: `url(${bgHero})`, backgroundSize: 'cover', backgroundPosition: 'center' }}>
<h2 className="text-3xl md:text-4xl mb-14 font-extrabold text-center text-[#000435] bg-white dark:text-white dark:bg-[#000435]">🤔 Frequently Asked Questions 🤔</h2>
<dl className="space-y-5">
{faqs.map((faq, index) => (
<div key={index} className="space-y-2">
<div className={`rounded-lg ${activeIndex === index ? 'animated-border' : 'border-2 border-transparent'}`}>
<div className={`rounded-lg ${activeIndex === index ? 'animated-border' : 'border-2 border-transparent text-[#000435] bg-white dark:text-white dark:bg-[#000435]'}`}>
<button
onClick={() => handleToggle(index)}
className={`animated-border-inner w-full focus:outline-none transition duration-100 ease-in-out`}
className={`animated-border-inner w-full focus:outline-none transition duration-100 ease-in-out text-[#000435] bg-white dark:text-white dark:bg-[#000435]`}
>
<span className="text-lg md:text-2xl leading-6 font-medium">{faq.question}</span>
<span className="text-lg md:text-2xl leading-6 font-medium text-[#000435] bg-white dark:text-white dark:bg-[#000435]">{faq.question}</span>
{activeIndex === index ? <BiChevronUp className="h-5 w-5" /> : <BiChevronDown className="h-5 w-5" />}
</button>
</div>
<div
className={`transition-all duration-1000 ease-in-out overflow-hidden ${activeIndex === index ? 'max-h-full' : 'max-h-0'}`}
style={{ maxHeight: activeIndex === index ? '200px' : '0px' }} // Adjust maxHeight as needed
>
<div className="mt-2 ml-4 text-xl font-mono">{faq.answer}</div>
<div className="mt-2 ml-4 text-xl font-mono ">{faq.answer}</div>
</div>
</div>
))}
Expand All @@ -71,5 +71,4 @@ const FAQ: React.FC = () => {
);
};

export default FAQ;

export default FAQ;
61 changes: 27 additions & 34 deletions frontend/src/components/Features.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,61 +1,54 @@
import { RiTailwindCssFill } from "react-icons/ri";
import { MdLeaderboard } from "react-icons/md";
import bgHero from "../assets/bgHero.png";
import { BiSolidCustomize } from "react-icons/bi";
import { FaLaptopFile } from "react-icons/fa6";

const Features = () => {
return (
<div>
<section className="text-gray-400">
<div className="container px-5 py-24 mx-auto">
<div className={`w-full`}style={{ backgroundImage: `url(${bgHero})`, backgroundSize: 'cover', backgroundPosition: 'center' }}>
<section className="text-[#000435] bg-white dark:text-white dark:bg-[#000435]"style={{ backgroundImage: `url(${bgHero})`, backgroundSize: 'cover', backgroundPosition: 'center' }} >
<div className="container px-5 py-24 mx-auto" >
<div className="flex flex-wrap w-full mb-20 flex-col items-center text-center">
<h1 className="sm:text-3xl text-2xl font-medium title-font mb-2 text-white">
<h1 className="sm:text-3xl text-2xl font-medium title-font mb-2 text-[#000435] bg-white dark:text-white dark:bg-[#000435]">
🫴 What we offer to developers 📦
</h1>
</div>
<div className="flex flex-wrap -m-4">
<div className="xl:w-1/4 md:w-1/2 p-4">
<div className="feature-card">
<div className="border border-sky-500 border-opacity-75 p-6 rounded-lg hover:bg-blue-950 hover:border-sky-300 backdrop-blur-sm cursor-pointer transform hover:-translate-y-2 transition-transform duration-300">
<div className="w-10 h-10 inline-flex items-center justify-center rounded-full bg-sky-500 text-white mb-4">
<RiTailwindCssFill size={23} />
</div>
<h2 className="text-lg text-white font-medium title-font mb-2">Responsive Design</h2>
<p className="leading-relaxed text-base">All components are from best sources and designed to be fully responsive 📝ensuring they look great on any device📱</p>
<div className="xl:w-1/4 md:w-1/2 p-4">
<div className="border border-sky-500 border-opacity-75 p-6 rounded-lg hover:bg-blue-300 dark:hover:bg-blue-950 hover:border-sky-700 backdrop-blur-sm cursor-pointer">
<div className="w-10 h-10 inline-flex items-center justify-center rounded-full bg-sky-500 text-white mb-4">
<RiTailwindCssFill size={23}/>
</div>
<h2 className="text-lg text-[#000435] dark:text-white font-medium title-font mb-2">Responsive Design</h2>
<p className="leading-relaxed text-base">All components are from best sources and designed to be fully responsive 📝ensuring they look great on any device📱</p>
</div>
</div>
<div className="xl:w-1/4 md:w-1/2 p-4">
<div className="feature-card">
<div className="border border-sky-500 border-opacity-75 p-6 rounded-lg hover:bg-blue-950 hover:border-sky-300 backdrop-blur-sm cursor-pointer transform hover:-translate-y-2 transition-transform duration-300">
<div className="w-10 h-10 inline-flex items-center justify-center rounded-full bg-sky-500 text-white mb-4">
<MdLeaderboard size={23} />
</div>
<h2 className="text-lg text-white font-medium title-font mb-2">Leaderboard</h2>
<p className="leading-relaxed text-base">Compete with other developers and 🪜climb the leaderboard by sharing your best components and get recognized 🥇</p>
<div className="border border-sky-500 border-opacity-75 p-6 rounded-lg hover:bg-blue-300 dark:hover:bg-blue-950 hover:border-sky-700 backdrop-blur-sm cursor-pointer">
<div className="w-10 h-10 inline-flex items-center justify-center rounded-full bg-sky-500 text-white mb-4">
<MdLeaderboard size={23}/>
</div>
<h2 className="text-lg text-[#000435] dark:text-white font-medium title-font mb-2">Leaderboard</h2>
<p className="leading-relaxed text-base">Compete with other developers and 🪜climb the leaderboard by sharing your best components and get recognized 🥇</p>
</div>
</div>
<div className="xl:w-1/4 md:w-1/2 p-4">
<div className="feature-card">
<div className="border border-sky-500 border-opacity-75 p-6 rounded-lg hover:bg-blue-950 hover:border-sky-300 backdrop-blur-sm cursor-pointer transform hover:-translate-y-2 transition-transform duration-300">
<div className="w-10 h-10 inline-flex items-center justify-center rounded-full bg-sky-500 text-white mb-4">
<FaLaptopFile size={23} />
</div>
<h2 className="text-lg text-white font-medium title-font mb-2">Personalization</h2>
<p className="leading-relaxed text-base">Engage with the community by 👍/👎components. Save your 💖 components for quick access in your future projects.</p>
<div className="border border-sky-500 border-opacity-75 p-6 rounded-lg hover:bg-blue-300 dark:hover:bg-blue-950 hover:border-sky-700 backdrop-blur-sm cursor-pointer">
<div className="w-10 h-10 inline-flex items-center justify-center rounded-full bg-sky-500 text-white mb-4">
<FaLaptopFile size={23}/>
</div>
<h2 className="text-lg text-[#000435] dark:text-white font-medium title-font mb-2">Personalization</h2>
<p className="leading-relaxed text-base">Engage with the community by 👍/👎components. Save your 💖 components for quick access in your future projects.</p>
</div>
</div>
<div className="xl:w-1/4 md:w-1/2 p-4">
<div className="feature-card">
<div className="border border-sky-500 border-opacity-75 p-6 rounded-lg hover:bg-blue-950 hover:border-sky-300 backdrop-blur-sm cursor-pointer transform hover:-translate-y-2 transition-transform duration-300">
<div className="w-10 h-10 inline-flex items-center justify-center rounded-full bg-sky-500 text-white mb-4">
<BiSolidCustomize size={23} />
</div>
<h2 className="text-lg text-white font-medium title-font mb-2">Customizable Code Snippets</h2>
<p className="leading-relaxed text-base">Easily customize and preview code 👀 snippets with our built-in editor and A.I tailored specifically for Tailwind CSS 💅</p>
<div className="border border-sky-500 border-opacity-75 p-6 rounded-lg hover:bg-blue-300 dark:hover:bg-blue-950 hover:border-sky-700 backdrop-blur-sm cursor-pointer">
<div className="w-10 h-10 inline-flex items-center justify-center rounded-full bg-sky-500 text-white mb-4">
<BiSolidCustomize size={23}/>
</div>
<h2 className="text-lg text-[#000435] dark:text-white font-medium title-font mb-2">Customizable Code Snippets</h2>
<p className="leading-relaxed text-base">Easily customize and preview code 👀 snippets with our built-in editor and A.I tailored specifically for Tailwind CSS 💅</p>
</div>
</div>
</div>
Expand All @@ -65,4 +58,4 @@ const Features = () => {
);
};

export default Features;
export default Features;
Loading
Loading