110 comments found.
Hi, can I use this template without redux? also are there graphics files that come with it, e.g. figma etc? thank you
Hi, I purchased your product recently, could you send me the JS version? I will send the request to leftforcode@gmail.com, I await your response.
where is xd file ?
Hi, I purchased your product recently, could you send me the JS version? I will send the request to leftforcode@gmail.com, I await your response.
Hello, how can I disable the animation when switching pages, the ease in from bottom to top, I am unable to find that
Thanks in advance
Hi, I have some questions for you. I’m currently deploying to a Cloudflare server, I’ve made changes to my vite.config.ts file as shown below. How can I deploy with HTTPS?
import { defineConfig } from “vite”; import react from ”@vitejs/plugin-react”; import basicSsl from ’@vitejs/plugin-basic-ssl’ import path from “path”;
// https://vitejs.dev/config/ let __dirname: any; export default defineConfig({ build: { commonjsOptions: { include: [“tailwind.config.js”, “node_modules/**”], }, }, optimizeDeps: { include: [“tailwind-config”], }, plugins: [ react(), basicSsl() ], resolve: { alias: { “tailwind-config”: path.resolve(__dirname, ”./tailwind.config.js”), }, }, server: { host: true, https: true, port: 3001 }, define: { _global: ‘({})’ } });
When i deploy, i get this error: Uncaught SyntaxError: Invalid or unexpected token (at index.5b8973c9.js:30:37472)
Hello Do you have any javascript version of this theme ? i got only typescript version Thanks
Is it possible to convert this to React Inertia? Can your team give guidance regarding this too?
Hi, just want to ask if this theme can be implement to nextjs? tq
I am getting error while running yarn build in Enigma v2.0.1
Node Version – v18.16.1 Yarn Version – 1.22.19
Error is listed below:
❯ yarn build yarn run v1.22.19 $ tsc && vite build src/base-components/Litepicker/litepicker.ts:5:11 – error TS2430: Interface ‘Picker’ incorrectly extends interface ‘Litepicker’. Types of property ‘on’ are incompatible. Type ‘((event: string, cb: (startDate: { dateInstance: Date; }, endDate: { dateInstance: Date; }) => void) => {}) | undefined’ is not assignable to type ‘(eventName: string | symbol, listener: (...args: any[]) => void) => this’. Type ‘undefined’ is not assignable to type ‘(eventName: string | symbol, listener: (...args: any[]) => void) => this’.
5 interface Picker extends Litepicker { ~~~~
Found 1 error in src/base-components/Litepicker/litepicker.ts:5
Hi usrivastava92,
I apologize for the error you’re encountering while running the build command. Based on the provided error message, it appears that there is an issue with the interface declaration in the litepicker.ts file, specifically with the Picker interface extending the Litepicker interface.
However, we couldn’t reproduce the issue on our end, which leads us to believe that there might be some modifications or customizations made to the Litepicker interface in your codebase. Could you please provide us with the code snippet from the litepicker.ts file, specifically the declaration of the Picker interface? This will help us further investigate the issue and provide you with an accurate solution.
Thank you for your cooperation, and we look forward to assisting you in resolving this issue.
Best regards, Left4code Team
Hi, im stuck trying to apply this emplate to my NextJS app, doy you have any recomendation or solution for me. Thanks a lot
Hello,
Thank you for reaching out to us. We understand that you’re facing difficulties applying the template to your Next.js app, and we’re here to help.
To integrate the template with your Next.js app, here are a few recommendations:
1. Ensure that you have a basic understanding of Next.js and its project structure. Familiarize yourself with the Next.js documentation to understand how to set up and configure your Next.js app.
2. Review the template documentation and any specific instructions provided by the template author. Check if there are any specific steps or considerations mentioned for integrating the template with Next.js.
3. Start by copying the necessary template files into your Next.js project. Make sure to retain the folder structure and file names as specified in the template.
4. Update any necessary configurations or dependencies in your Next.js app to align with the requirements of the template. This may include installing additional packages or configuring Next.js plugins.
5. Adapt the template components and styles to fit into your Next.js app’s structure. You may need to adjust paths, import statements, and any framework-specific code to ensure compatibility.
6. Test your Next.js app with the integrated template. Check for any console errors, warnings, or visual inconsistencies. Use the development tools provided by Next.js to debug and troubleshoot any issues that arise.
7. Reach out to the template author or consult their documentation or support channels for any template-specific questions or issues you encounter during the integration process. They will have the most comprehensive knowledge of the template and can provide guidance tailored to your specific situation.
Remember to back up your Next.js app before making any major changes or integrations to ensure you can revert back if needed.
We hope these recommendations help you successfully integrate the template into your Next.js app. If you have any further questions or need additional assistance, please don’t hesitate to reach out.
Best regards, Left4code Team
Hello, Please how can I add text alignment feature to the classic editor?
Hello,
Thank you for your request. We apologize for the inconvenience caused by the delay in our response. We appreciate your patience.
To enable the text alignment feature in your current build, please follow these steps:
Install the CKEditor 5 Classic Editor package from the following link:
1. Install the CKEditor 5 Classic Editor package by visiting the following link.https://www.npmjs.com/package/@ckeditor/ckeditor5-editor-classic
2. Install the “text alignment” package to enable the alignment options:
https://www.npmjs.com/package/@ckeditor/ckeditor5-alignment
Once you have installed these packages, modify the file ”/src/base-components/Ckeditor/ClassicEditor/index.tsx” as follows:
Locate the configuration section for the CKEditor 5 Classic Editor in the file.
Add the “alignment” plugin to the list of plugins used by the editor.
Save the file and rebuild your project.
The text alignment feature will now be available in your CKEditor 5 Classic Editor, allowing you to align your text as needed.
For more examples and detailed instructions, please refer to the official documentation for CKEditor 5.
If you require further assistance, feel free to ask.
Hello, I think the new typescript version and the new react types version break this template ( typescript 5.1.3 & ”@types/react”: “^18.2.8” )
Hello, please i am using the react version of the admin template, I am having difficulty of preloading the TomSelect component, how can i in useEffect load an array of selected items into the TomSelect component so that on load of the page it shows the items as selected.
Hello,
Thank you for reaching out to our customer support team. We understand that you are using the React version of our admin template and facing difficulty in preloading the TomSelect component.
To preload an array of selected items into a select element using React’s useEffect hook, you can set the selected attribute on the corresponding options. Here’s an example of how you can achieve that:
import React, { useState } from 'react';
import TomSelect from "../../base-components/TomSelect";
type Option = {
value: string;
label: string;
};
const options: Option[] = [
{ value: '1', label: 'Option 1' },
{ value: '2', label: 'Option 2' },
{ value: '3', label: 'Option 3' },
];
function Main() {
const [selectedOption, setSelectedOption] = useState("1");
return (
<div>
<label htmlFor="select">Select an option:</label>
<TomSelect
id="select"
value={selectedOption}
onChange={setSelectedOption}
>
<option value="">Select an option</option>
{options.map((option) => (
<option key={option.value} value={option.value}>
{option.label}
</option>
))}
</TomSelect>
{selectedOption && (
<div>
Selected option: {selectedOption.label} ({selectedOption.value})
</div>
)}
</div>
);
};
export default Main;
If you need any further assistance, feel free to ask!
also in ClassicEditor i cant seem to get the parameters parsed into the onChange event e.g. <ClassicEditor className=”form-control w-full” value={coursei.questions[index].question} onChange={(e) => handleQuestionChange(index, e.target.value)} /> i this example i cant get the e.taget.value and the index parameter i passed into the function. i know that in other places i used it, i didnt have to do the arrow function thing but in this particular scenario, how can i pass stuff on change and still get them
I am yet to implement the solution you provided but i came across another issue with the ClassicEditor, if i use it in a loop to display data collected from a fellow ClassicEditor, all the ClassicEditors in that loop shows the same value and of which all the time its the value of the last item in the loop that all of them displays, can you please help?
also for the TomSelect solution you provided, it works well when its for single select, how about when its a multiple select?
Hi there,
Thank you for your reply,
For multiple select, you can easily enable multiple selection by using an array for the state, like this.
const [selectMultiple, setSelectMultiple] = useState(["1", "3"]);
Also, make sure to set the multiple property of TomSelect to enable the multiple select functionality.
<TomSelect
value={selectMultiple}
onChange={setSelectMultiple}
options={{
placeholder: "Select your favorite actors",
}}
className="w-full"
multiple
>
<option value="1">Leonardo DiCaprio</option>
<option value="2">Johnny Deep</option>
<option value="3">Robert Downey, Jr</option>
<option value="4">Samuel L. Jackson</option>
<option value="5">Morgan Freeman</option>
</TomSelect>
Since `ClassicEditor` is a custom component and not a standard HTML element, you can easily retrieve the value from the editor using the following approach.
<ClassicEditor
value={editorData}
onChange={(e) => {
console.log(e);
}}
/>
Here’s an example of using the ClassicEditor component in a loop based on a state array:
import { useState } from "react";
import { ClassicEditor } from "../../base-components/Ckeditor";
interface TextAreaItem {
id: string;
value: string;
}
function Main() {
const [textAreas, setTextAreas] = useState<TextAreaItem[]>([
{ id: "1", value: "a" },
{ id: "2", value: "b" },
{ id: "3", value: "c" },
]);
const handleTextAreaChange = (id: string, value: string) => {
setTextAreas((prevTextAreas) =>
prevTextAreas.map((item) => (item.id === id ? { ...item, value } : item))
);
};
return (
<>
<div>
{JSON.stringify(textAreas)}
{textAreas.map((item) => (
<ClassicEditor
key={item.id}
value={item.value}
onChange={(e) => handleTextAreaChange(item.id, e)}
/>
))}
</div>
</>
);
}
export default Main;
If you have any more questions, feel free to ask. I’m here to help!
It didnt still solve the issue, see the google doc with images showing the problem i am facing wit the ckEditor https://docs.google.com/document/d/124Vx6EAECYlLzsqCqkxH2x9pMGHVdJJXPLb4AHCkHf8/edit?usp=sharing
Hi,
Thank you for reaching out and sharing the Google Doc with images showcasing the issue you’re experiencing with the CKEditor.
We understand that you’re still encountering difficulties despite our previous testing. We apologize for any inconvenience caused. In order to assist you more effectively, could you please provide us with a step-by-step guide to reproduce the issue you’re facing? This will allow us to understand the problem more thoroughly and work towards finding a solution.
Your cooperation and detailed explanation will greatly help us in diagnosing and resolving the issue. We are committed to ensuring your satisfaction and providing you with a functional CKEditor.
Please let us know the specific steps you take and any relevant information regarding the issue. We will carefully review the details you provide and strive to find a prompt resolution.
If you have any further questions or need additional assistance, please don’t hesitate to ask. We’re here to support you.
Thank you for your patience and understanding.
Best regards, Left4code Team
Hi,
Can you please let me know that is this template supports javascript? as i only see typescript when i downloaded. I need jsx files if you can provide me.
Thanks,
Hello,
Thank you for your inquiry. We apologize for any confusion caused. While the template primarily uses TypeScript, we can provide you with the JavaScript version as per your request.
Please provide us with your email address in the comments below or send a request to our email address at leftforcode@gmail.com, and we will send you the JavaScript version promptly.
If you have any further questions or need additional assistance, please don’t hesitate to let us know.
Thank you, Left4code
I have sent an email to the mentioned email id. Please send me the javascript version asap.
Hi Team, Please send me Js version of the template to my email id. I have already sent an email to leftforcode@gmail.com .
Hello,
Thank you for your request. We apologize for the inconvenience caused by the delay in our response. We appreciate your patience.
We have received your email requesting the JS version of the template. We are pleased to inform you that the file has been sent to your email.
If you have any further questions or need additional assistance, please feel free to reach out to us. We are here to help.
Thank you for choosing our services.
Best regards, Left4code
hello, I have purchased the item based on the fact that the XD design file is included in the files, however, I found that the xd file is very outdated and does not have almost all essential elements available currently in the coded dashboard.
Can you please asset and provide access to the latest XD design file?
Hello,
Thank you for reaching out to us. We’re sorry for any inconvenience caused by the outdated XD design file. We understand that you were expecting the latest version to be included, and we apologize for any confusion.
Regarding the XD design file, we’d like to clarify that it was the most recent version available at the time of your purchase. However, please keep in mind that the XD design file is provided as a bonus and may not include all the elements and updates found in the coded dashboard.
We appreciate your understanding in this matter. If you have any specific design-related questions or need assistance with any other aspect of the template, please feel free to let us know. We’re here to help.
Thank you for your understanding.
Best regards, Left4code Team
Hello, I’m a buyer who purchased your template, and I am a Korean developer 
I’m writing to ask for your help because I have a question about your template.
First of all, thank you for your support. Your template is really helpful in our development. Also, due to your template, our development period has been shortened a lot.
What I want to ask is about “base-component”. I do not modify the contents of the base-component at all. This is because it is the perfect component for the template you or your company specified. However, even though there is no history of package version changes, the build may fail intermittently as shown below.
I’m sure this is a library dependency issue, but it’s true that it takes a lot of time to analyze the exact cause. And, I’m new to TS, and may not be good enough to proceed with some debugging.
──────────────────────────────────────────────────── Q. Could you please analyze the issue below? Q. When the issue below occurs, if there is a way to analyze the problem most efficiently, could you share it? ────────────────────────────────────────────────────
I am attaching the build error below, so please check it.
──────────────────────────────────────────────────── - PATH ./src/base-components/Headless/Tab/index.tsx - Build Log & Error Msg $ npm run build
> myproject-react@1.0.1 build > tsc && vite build
src/base-components/Headless/Tab/index.tsx:31:10 – error TS2322: Type ‘{ children: Element; style?: any; color?: any; id?: any; lang?: any; ‘aria-activedescendant’?: any; ‘aria-atomic’?: any; ‘aria-autocomplete’?: any; ‘aria-busy’?: any; ‘aria-checked’?: any; ‘aria-colcount’?: any; ... 207 more …; className: string; }’ is not assignable to type ‘DetailedHTMLProps<LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>’. Type ‘{ children: Element; style?: any; color?: any; id?: any; lang?: any; ‘aria-activedescendant’?: any; ‘aria-atomic’?: any; ‘aria-autocomplete’?: any; ‘aria-busy’?: any; ‘aria-checked’?: any; ‘aria-colcount’?: any; ... 207 more …; className: string; }’ is not assignable to type ‘ClassAttributes<HTMLLIElement>’. Types of property ‘ref’ are incompatible. Type ‘Ref<HTMLElement> | undefined’ is not assignable to type ‘LegacyRef<HTMLLIElement> | undefined’. Type ‘RefObject<HTMLElement>’ is not assignable to type ‘LegacyRef<HTMLLIElement> | undefined’. Type ‘RefObject<HTMLElement>’ is not assignable to type ‘RefObject<HTMLLIElement>’. Type ‘HTMLElement’ is missing the following properties from type ‘HTMLLIElement’: type, value
31
li ~~
Found 1 error in src/base-components/Headless/Tab/index.tsx:31 ────────────────────────────────────────────────────
Hello,
Thank you for reaching out, and we appreciate your support as a buyer of our template. We’re delighted to hear that our template has been valuable in your development process and has helped to shorten your project timeline.
In regards to your question about the “base-component,” we recently made an update to address a typing issue that occurred due to a recent update in HeadlessUI. We have released an update to resolve this issue, ensuring that you can continue using the latest version of HeadlessUI. To apply the latest update, please update or add the following files:
- ”/src/base-components/Headless”
- ”/package.json”
Rest assured, our team is dedicated to assisting you in resolving this issue as quickly as possible. We value your patience and cooperation. If you have any further questions or concerns, please don’t hesitate to let us know. We’re here to provide the support you need.
Best regards, Left4code Team
Hello,
I have purchased your bundle recently but unable to file the design file like figma or XD Design Files, only html and coding templates.
Please let me know if there is a way you can support me with those files, i need to make a design file for my Dev team.
Thank you.
Hi There,
Thank you for reaching out to us. We’re sorry for the delayed response.
Unfortunately, we only have Rubick (Adobe XD) design files available at the moment, and not all pages are included. You can check out this link for more information:
Let us know if you have any further questions or concerns.
i’ve accidentally purchased this item twice, please give me a refund df57cd-e2f1-40c9-9eee-2cc512824eb0
Hello!
Thank you for reaching out to us. We appreciate your support in choosing our template. I’m sorry to hear that you accidentally made a double purchase. Not to worry, we’ll be happy to help you with a refund. To get started, please click on the link below, and follow the instructions to request a refund.
https://themeforest.net/refund_requests/newIf you have any further questions or concerns, please don’t hesitate to let us know. Have a great day!
Hello,
Thank you for this nice template. I am working with NextJS, do you have a guide on how I can migrate from Vite to NextJS?
Also, the components use so many external styles and are not self contained, do you have any guide on how to make them modular.
Also, there is a dependency called @left4code/tw-starter in the code that controlls a lot of style imports, can you share what it does and how to remove it or get access to the code?
Thank you
Dear mabusaid,
We hope this reply finds you well! First of all, we want to apologize for the delay in our response. Thank you for reaching out to us and providing feedback on the template. We’re thrilled to hear that you’re enjoying it!
Now, let’s address your questions:
Migrating from Vite to Next.js: While we don’t have a specific guide for migrating from Vite to Next.js at the moment, we can certainly help you with the process. Generally, migrating involves setting up a new Next.js project and manually transferring your code and dependencies from the Vite project. You’ll need to update the build configuration, import statements, and any Vite-specific features you may be using. The Next.js documentation and community resources are great references for guidance on the migration process. If you need any assistance or have specific concerns during the migration, please let us know, and we’ll be glad to help you.
Making components modular: We’d love to assist you in making your components more modular. Could you please provide more details or examples of the specific external styles you mentioned? This will allow us to understand the issue better and provide you with tailored guidance. Our goal is to help you achieve modular and self-contained components that enhance the maintainability and reusability of your code.
@left4code/tw-starter dependency: The ”@left4code/tw-starter” dependency includes CSS/JS utilities that were utilized in previous versions of Midone. However, in the current version, we no longer rely on this package. For users transitioning from older versions, we have kept this package as a dependency to ensure a smooth transition and provide compatibility with their existing codebase. Rest assured, we have plans to remove this package from future versions as we continue to refine and improve Midone.
Once again, we sincerely apologize for the delay in our response. We value your feedback and are committed to providing you with the best support possible. If you have any further questions, concerns, or need assistance with anything else, please don’t hesitate to reach out to us. We’re here to help!
Thank you for your understanding and patience.
Warm regards, Left4code Team
